/* Asuu.Travel additions on top of the Turie theme (main.css). Keep theme files untouched. */

/* Header: six menu items on one line at 1200-1400px ("Аяллын компани" since 2026-10-19: tighter gaps, a shorter logo margin and search box) */
.tp-main-menu nav > ul > li:not(:last-child) { margin-right: 14px; }
@media (min-width: 1200px) and (max-width: 1399px) {
    .tp-main-menu nav > ul > li:not(:last-child) { margin-right: 9px; }
    .tp-header-logo.mr-60 { margin-right: 34px; }
    .tp-header-search .tp-input { width: 190px; }
    /* The theme splits the bar 7/5; the menu needs more than that with the longer label, the search box less. */
    .tp-header-area .row > .col-xl-7 { flex: 0 0 auto; width: 66.666%; }
    .tp-header-area .row > .col-xl-5 { flex: 0 0 auto; width: 33.333%; }
}
@media (min-width: 1400px) { .tp-main-menu nav > ul > li:not(:last-child) { margin-right: 30px; } }

/* Language switcher (header top-menu style) */
.tp-header-top-lang { position: relative; cursor: pointer; }
.tp-header-top-lang .tp-header-top-lang-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--tp-common-black); padding: 6px 0; }
.tp-header-top-lang ul { position: absolute; top: 100%; right: 0; min-width: 150px; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 8px 0; box-shadow: 0 10px 30px rgba(0,0,0,.08); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s; z-index: 30; list-style: none; margin: 0; }
.tp-header-top-lang:hover ul, .tp-header-top-lang.is-open ul { opacity: 1; visibility: visible; transform: translateY(0); }
.tp-header-top-lang ul li a { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 14px; color: var(--tp-common-black); white-space: nowrap; }
.tp-header-top-lang ul li a:hover { color: var(--tp-theme-1); }
.tp-header-top-lang .fi { border-radius: 2px; }
/* The theme draws a dropdown caret after every .tp-header-top-menu-item > span (main.css);
   our own hover-revealed flag list doesn't need it. */
.tp-header-top-lang .tp-header-top-lang-toggle { padding-right: 0; }
.tp-header-top-lang .tp-header-top-lang-toggle::after { content: none; }

/* Account dropdown (theme tp-header-login) with buttons for logout */
.tp-header-login ul li form { margin: 0; }
.tp-header-login ul li .tp-header-login-menu-action { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; font-size: 14px; color: var(--tp-common-black); cursor: pointer; font-family: inherit; }
.tp-header-login ul li .tp-header-login-menu-action:hover { color: var(--tp-theme-1); }
.tp-header-login ul li:not(:last-child) { margin-bottom: 7px; }
.tp-header-login ul { min-width: 190px; }
.tp-header-login .tp-header-login-name { display: block; font-weight: 600; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Offcanvas: language and account rows */
.tp-offcanvas-lang { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-offcanvas-lang a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #e5e5e5; border-radius: 999px; font-size: 13px; color: var(--tp-common-black); }
.tp-offcanvas-lang a.is-active { border-color: var(--tp-theme-1); color: var(--tp-theme-1); }
.tp-offcanvas-account a, .tp-offcanvas-account button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 0; font-size: 15px; color: var(--tp-common-black); font-family: inherit; cursor: pointer; }
.tp-offcanvas-account a:hover, .tp-offcanvas-account button:hover { color: var(--tp-theme-1); }

/* Home: how it works, why, ask (carried over from the first build, tidied) */
.mp-filter-box { border: 1px solid #e8e8e8; border-radius: 12px; padding: 24px; background: #fff; }
.mp-step-number { width: 48px; height: 48px; border-radius: 50%; background: var(--tp-theme-1, #008000); color: #fff; font-weight: 700; font-size: 1.25rem; }
.mp-meta { color: #666; font-size: 14px; }
.mp-benefit-list { list-style: none; padding: 0; margin: 0; }
.mp-benefit-list li { position: relative; padding-left: 1.5rem; margin-bottom: .75rem; color: #444; }
.mp-benefit-list li::before { content: "✓"; position: absolute; left: 0; color: var(--tp-theme-1, #008000); font-weight: 700; }
.mp-ask-box { border: 1px solid #e8e8e8; border-radius: 16px; padding: 40px; background: linear-gradient(135deg, #fff7f4 0%, #fff 60%); }
.mp-ask-box__text { color: #555; font-size: 16px; line-height: 1.7; }
.mp-ask-form .form-label { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
/* The same box as the login and account forms; the bare theme rule leaves these square and flat. */
.mp-ask-form .tp-input { width: 100%; height: 56px; padding: 0 20px; border: 1px solid rgba(7, 21, 22, 0.1); border-radius: 12px; background: #fff; font-size: 15px; }
.mp-ask-form .tp-input:focus { border-color: var(--tp-theme-1); background: #fff; }
/* The theme gives every textarea one line's height, so rows="4" never showed. */
.mp-ask-form textarea.tp-input { height: auto; min-height: 124px; padding: 14px 20px; line-height: 1.6; resize: vertical; }
.mp-ask-form .tp-single-datepicker { cursor: pointer; }
@media (max-width: 767px) { .mp-ask-box { padding: 24px; } }
.mp-why-list { list-style: none; padding: 0; margin: 0; }
.mp-why-item { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.mp-why-item:last-child { margin-bottom: 0; }
.mp-why-item__icon { flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #fff1ee; color: var(--tp-theme-1, #008000); font-size: 18px; }
.mp-why-item__title { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.mp-why-item__text { color: #555; font-size: 15px; line-height: 1.6; }

/* "Coming soon" hint under display-only forms */
.mp-coming { display: inline-block; font-size: 13px; color: #888; margin-top: 8px; }

/* Flash messages */
.mp-flash { border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; font-size: 15px; }
.mp-flash--status { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.mp-flash--error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* Auth pages */
/* The theme paints the "create an account" / "log in" link black (main.css .tp-login-top p a);
   it is the one action we want people to notice, so it carries the brand colour. */
.tp-login-top p a { color: var(--tp-theme-1); }
.tp-login-top p a::after { background-color: var(--tp-theme-1); }
/* Same for the terms and privacy links beside the sign-up checkbox, black in main.css. */
.tp-review-input .tp-agree a { color: var(--tp-theme-1); }
/* The theme widens a social button only through .has-google (main.css, 98px -> 220px);
   any provider whose button carries a text label needs the same room. */
.tp-login-option-item.has-label a { width: 220px; }
.tp-login-social { gap: 10px; }
.tp-login-option-item.has-label { flex: 1 1 160px; margin: 0 0 10px !important; }
.tp-login-option-item.has-label a { width: 100%; }
.tp-login-input-wrapper .is-invalid { border-color: #dc2626; }
.mp-field-error { color: #dc2626; font-size: 13px; margin-top: 4px; display: block; }
.tp-login-option-item.is-disabled a { opacity: .5; pointer-events: none; }

/* Operator-written pages */
.mp-page-body { font-size: 16px; line-height: 1.8; color: #333; }
.mp-page-body h2, .mp-page-body h3 { margin-top: 32px; margin-bottom: 12px; font-weight: 600; }
.mp-page-body p { margin-bottom: 16px; }
.mp-page-version { margin-bottom: 24px; color: #777; font-size: 14px; }
.mp-page-body ul, .mp-page-body ol { margin: 0 0 16px 20px; }
.mp-page-body li { margin-bottom: 6px; }

/* Error pages */
.mp-error { text-align: center; padding: 120px 0; }
.mp-error__code { font-size: 96px; font-weight: 700; line-height: 1; color: var(--tp-theme-1, #008000); margin-bottom: 16px; }
.mp-error__title { font-size: 32px; font-weight: 600; margin-bottom: 12px; }
.mp-error__text { color: #666; margin-bottom: 28px; }

/* Hero wings: real photos, cropped into the theme's own staircase composition
   (each thumb shrinks toward the centre: 129 -> 103 -> 74/76px). The theme
   achieved this with differently-sized image files; we crop uniform photos
   to the same boxes with object-fit so the layout matches "Home 03" exactly. */
.tp-hero-3-left-thumb { overflow: hidden; }
.tp-hero-3-left-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tp-hero-3-left-top:not(.tp-hero-3-left-bottom) .tp-hero-3-left-thumb:nth-child(1) { width: 129px; height: 129px; }
.tp-hero-3-left-top:not(.tp-hero-3-left-bottom) .tp-hero-3-left-thumb:nth-child(2) { width: 103px; height: 103px; }
.tp-hero-3-left-top:not(.tp-hero-3-left-bottom) .tp-hero-3-left-thumb:nth-child(3) { width: 74px; height: 74px; }
.tp-hero-3-left-bottom .tp-hero-3-left-thumb:nth-child(1) { width: 129px; height: 129px; }
.tp-hero-3-left-bottom .tp-hero-3-left-thumb:nth-child(2) { width: 103px; height: 103px; }
.tp-hero-3-left-bottom .tp-hero-3-left-thumb:nth-child(3) { width: 86px; height: 86px; }
.tp-hero-3-left-bottom .tp-hero-3-left-thumb:nth-child(4) { width: 76px; height: 76px; }

/* The theme gives width:100% to text inputs only, so a <select> grows to its widest
   option and spills over the column next to it. Put it in the same box, with our own caret. */
.tp-review-input select.tp-input,
.tp-contact-form .tp-review-input select.tp-input {
    width: 100%;
    max-width: 100%;
    padding-right: 42px;
    text-overflow: ellipsis;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
}

/* Picker with its own search box (see theme/js/site.js). The field only shows what is
   chosen; typing happens inside the dropdown. Without JavaScript the plain <select> shows. */
.mp-combo { position: relative; }
.mp-combo--ready > select { display: none; }
.tp-review-input .mp-combo__toggle,
.tp-contact-form .tp-review-input .mp-combo__toggle { display: block; width: 100%; text-align: left; font-family: inherit; cursor: pointer; padding-right: 42px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; }
.mp-combo__toggle.is-empty { color: var(--tp-grey-1); }
.mp-combo__toggle:focus-visible { border-color: var(--tp-theme-1); outline: none; }
/* Wide enough for the search box in a narrow column, never wide enough to cover the next one. */
.mp-combo__panel { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: max(100%, 220px); max-width: min(340px, 92vw); background: #fff; border: 1px solid rgba(7, 21, 22, 0.1); border-radius: 12px; box-shadow: 0 10px 30px rgba(7, 21, 22, 0.12); overflow: hidden; }
/* Scoped past the theme's input[type=text] rule, which would otherwise box it in. */
.mp-combo__panel .mp-combo__search { width: 100%; height: 42px; line-height: 42px; padding: 0 16px; border: 0; border-bottom: 1px solid rgba(7, 21, 22, 0.08); border-radius: 0; font-size: 15px; outline: none; }
/* The theme hides placeholders on focus; this box opens focused, so the hint must stay. */
.mp-combo__panel .mp-combo__search:focus::placeholder { opacity: 1; color: var(--tp-grey-1); }
.mp-combo__list { max-height: 240px; overflow-y: auto; margin: 0; padding: 6px 0; list-style: none; }
/* A long country name wraps rather than truncates; the two-column codes stay on one line. */
.mp-combo__item { padding: 8px 18px; font-size: 15px; line-height: 1.4; cursor: pointer; }
[data-combo-columns] .mp-combo__item { white-space: nowrap; }
.mp-combo__item .mp-combo__lead { display: inline-block; min-width: 56px; }
.mp-combo__item .mp-combo__rest { color: var(--tp-grey-1); }
.mp-combo__item:hover .mp-combo__rest, .mp-combo__item.is-selected .mp-combo__rest { color: inherit; }
.mp-combo__item.is-active { background: var(--tp-grey-3); }
.mp-combo__item.is-selected { font-weight: 600; }
.mp-combo__item:hover { background: var(--tp-theme-1); color: #fff; }

/* Account page: photo row, phone with its dialling code, status badges */
.mp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mp-avatar-box { position: relative; display: inline-block; }
/* The file input stays reachable by keyboard but never shows its "no file chosen" text. */
.mp-avatar__input, .mp-avatar__remove-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mp-avatar { position: relative; display: block; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: #f4f4f5; cursor: pointer; margin: 0; }
.mp-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-avatar__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #a1a1aa; font-size: 34px; }
.mp-avatar__edit { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(24, 24, 27, 0.55); color: #fff; font-size: 14px; transition: background 0.2s ease; }
.mp-avatar:hover .mp-avatar__edit { background: var(--tp-theme-1); }
.mp-avatar-box:has(.mp-avatar__input:focus-visible) .mp-avatar { outline: 2px solid var(--tp-theme-1); outline-offset: 2px; }
.mp-avatar__remove { position: absolute; top: -2px; right: -2px; width: 28px; height: 28px; margin: 0; border-radius: 50%; background: #fff; border: 1px solid #e4e4e7; color: #71717a; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.mp-avatar__remove:hover { color: var(--tp-theme-1); border-color: var(--tp-theme-1); }
/* Ticked, the picture fades out so the pending removal is visible before saving. */
.mp-avatar__remove-input:checked ~ .mp-avatar { opacity: 0.35; }
.mp-avatar__remove-input:checked ~ .mp-avatar__remove { background: var(--tp-theme-1); border-color: var(--tp-theme-1); color: #fff; }
.mp-badge { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; margin-left: 6px; }
.mp-badge--ok { background: #f0fdf4; color: #166534; }
.mp-badge--warn { background: #fef3c7; color: #92400e; }

/* Providers page: one card per kind of service provider, with the user's own rows under it. */
.mp-badge--danger { background: #fee2e2; color: #991b1b; }
.mp-badge--gray { background: #f4f4f5; color: #52525b; }
.mp-provider-card { position: relative; height: calc(100% - 30px); display: flex; flex-direction: column; padding: 36px 32px 32px; border: 1px solid #ebebeb; border-radius: 16px; background: #fff; transition: box-shadow .3s ease, transform .3s ease; }
.mp-provider-card:hover { box-shadow: 0 16px 40px rgba(17, 17, 17, 0.08); transform: translateY(-4px); }
.mp-provider-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 22px; border-radius: 50%; background: var(--tp-theme-1); color: #fff; font-size: 24px; }
.mp-provider-card__title { font-size: 24px; margin-bottom: 10px; }
.mp-provider-card__who { margin-bottom: 20px; }
.mp-provider-card__label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #71717a; margin-bottom: 8px; }
.mp-provider-card__needs { list-style: none; margin: 0 0 22px; padding: 0; }
.mp-provider-card__needs li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; font-size: 15px; }
.mp-provider-card__needs i { color: var(--tp-theme-1); margin-top: 5px; font-size: 12px; }
.mp-provider-card__mine { list-style: none; margin: 0 0 22px; padding: 0; }
.mp-provider-card__mine li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 10px 12px; margin-bottom: 8px; border-radius: 10px; background: #f7f9f9; font-size: 14px; }
.mp-provider-card__mine .mp-badge { margin-left: 0; }
.mp-provider-card__name { font-weight: 600; color: #111; }
.mp-provider-card__kind { color: #71717a; }
.mp-provider-card__panel { margin-left: auto; font-weight: 600; color: var(--tp-theme-1); white-space: nowrap; }
.mp-provider-card__panel i { font-size: 11px; margin-left: 3px; }
.mp-provider-card__closed { margin-left: auto; color: #991b1b; font-weight: 600; }
.mp-provider-card__action { margin-top: auto; }

/* Guides: the list's filter row, the cards, and the profile page. */
.mp-guide-filters .tp-label { font-size: 13px; font-weight: 600; }
.mp-guide-filters__price { display: flex; align-items: center; gap: 8px; }
.mp-guide-filters__price span { color: #a1a1aa; }
.mp-guide-filters__actions { display: flex; align-items: center; gap: 18px; }
.mp-guide-filters .tp-review-input > input.tp-input { display: block; width: 100%; }
.mp-guide-filters__reset { font-weight: 600; color: #71717a; }
.mp-guide-filters__reset:hover { color: var(--tp-theme-1); }
.mp-guide-filters__count { margin-left: auto; color: #71717a; font-size: 14px; }
.mp-guide-card .tp-team-thumb img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
.mp-guide-card__featured { position: absolute; top: 14px; left: 14px; padding: 4px 10px; border-radius: 999px; background: var(--tp-theme-1); color: #fff; font-size: 12px; font-weight: 600; }
.mp-guide-card__tagline { margin: 6px 0 12px; color: #52525b; font-size: 15px; }
.mp-guide-card__facts { list-style: none; margin: 0 0 14px; padding: 0; }
.mp-guide-card__facts li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: #52525b; margin-bottom: 4px; }
.mp-guide-card__facts i { color: var(--tp-theme-1); margin-top: 3px; font-size: 13px; }
.mp-guide-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mp-guide-card__price { font-weight: 700; color: #111; }
.mp-guide-card__price small { font-weight: 500; color: #71717a; }
.mp-guide-card__more { font-weight: 600; color: var(--tp-theme-1); white-space: nowrap; }
.mp-guide-card__more i { font-size: 11px; margin-left: 3px; }
.mp-guide-empty { padding: 60px 20px; }
.mp-guide-empty i { font-size: 42px; color: #d4d4d8; margin-bottom: 16px; }
.mp-guide-photo img { width: 100%; border-radius: 20px; object-fit: cover; }
.mp-company-logo img { object-fit: contain; background: #f7f9f9; aspect-ratio: 1; }
.mp-photo-wall { columns: 4 260px; column-gap: 16px; }
.mp-photo { break-inside: avoid; margin: 0 0 16px; background: #fff; border: 1px solid #ebebeb; border-radius: 14px; overflow: hidden; }
.mp-photo__link img { display: block; width: 100%; height: auto; }
.mp-photo__meta { padding: 10px 14px 12px; font-size: 14px; }
.mp-photo__caption { color: #111; }
.mp-photo__kind { color: #71717a; }
.mp-photo-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.mp-photo-strip__item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.mp-my-photos { list-style: none; margin: 0; padding: 0; }
.mp-interests { list-style: none; margin: 0; padding: 0; }
.mp-interest { padding: 16px 0; border-top: 1px solid #ebebeb; }
.mp-interest--history { opacity: .7; }
.mp-interest--reserved { background: #f7fbf9; border-left: 3px solid var(--tp-theme-1); padding-left: 14px; }
.mp-interest__head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.mp-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; background: #f4f4f5; color: #3f3f46; }
.mp-status--reserved { background: #dcfce7; color: #166534; }
.mp-status--open { background: #e0f2fe; color: #075985; }
.mp-status--booked { background: #ede9fe; color: #5b21b6; }
.mp-my-photo { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid #ebebeb; }
.mp-my-photo__thumb img { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; display: block; }
.mp-my-photo__body { flex: 1; }
.mp-company-card .tp-team-thumb img { object-fit: contain; background: #f7f9f9; aspect-ratio: 1; }
.mp-guide-book { padding: 24px; border: 1px solid #ebebeb; border-radius: 16px; background: #fff; }
.mp-guide-book__price { display: block; font-size: 26px; font-weight: 700; color: #111; line-height: 1.2; }
.mp-guide-book__unit { display: block; margin-bottom: 16px; color: #71717a; }
.mp-guide-tagline { font-size: 18px; color: #3f3f46; }
.mp-guide-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mp-guide-tags li a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #f7f9f9; color: #111; font-size: 14px; }
.mp-guide-tags li a:hover { background: var(--tp-theme-1); color: #fff; }
.mp-guide-tags li a i { font-size: 12px; }
.mp-guide-tags li a small { color: inherit; opacity: .7; }
.mp-guide-social a { margin-right: 10px; font-size: 18px; }

/* Guide availability: the answer line, the "more" link, the searched-dates note. */
.mp-guide-filters__dates { margin-top: 0; font-size: 14px; color: #3f3f46; }
.mp-guide-filters__dates i { color: var(--tp-theme-1); margin-right: 6px; }
.mp-guide-filters__trimmed { margin-left: 8px; color: #92400e; }
.mp-guide-availability__answer { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-weight: 500; }
.mp-guide-availability__answer.is-free { background: #f0fdf4; color: #166534; }
.mp-guide-availability__answer.is-busy { background: #fef2f2; color: #991b1b; }
.mp-guide-availability__answer i { margin-top: 3px; }
.mp-guide-availability__more { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--tp-theme-1); }
.mp-guide-availability__more i { font-size: 11px; margin-left: 4px; }

/* Guide availability answers: at once / on request / closed. */
.mp-guide-filters__instant { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #3f3f46; cursor: pointer; }
.mp-guide-filters__instant input { width: 16px; height: 16px; accent-color: var(--tp-theme-1); }
.mp-guide-card__availability { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.mp-guide-card__availability b { margin-left: auto; font-weight: 700; }
.mp-guide-card__availability.is-instant { background: #f0fdf4; color: #166534; }
.mp-guide-card__availability.is-request { background: #eff6ff; color: #1e40af; }
.mp-guide-card__availability.is-closed { background: #fef2f2; color: #991b1b; }
.mp-guide-availability__answer.is-instant { background: #f0fdf4; color: #166534; }
.mp-guide-availability__answer.is-request { background: #eff6ff; color: #1e40af; }
.mp-guide-availability__answer.is-closed { background: #fef2f2; color: #991b1b; }
.mp-guide-availability__answer b { display: block; margin-top: 4px; }

/* Booking: the form's quote, the traveller's list and one booking's page. */
.mp-book-guide { display: flex; gap: 16px; align-items: center; }
.mp-book-guide img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; }
.mp-book-quote { padding: 16px 18px; border-radius: 12px; background: #f7f9f9; }
.mp-book-quote.is-instant { background: #f0fdf4; }
.mp-book-quote.is-request { background: #eff6ff; }
.mp-book-quote.is-closed { background: #fef2f2; }
.mp-book-quote__status { font-weight: 600; margin-bottom: 10px; }
.mp-book-quote__lines { margin: 0 0 10px; }
.mp-book-quote__lines div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 3px 0; }
.mp-book-quote__lines dt { font-weight: 500; color: #52525b; }
.mp-book-quote__lines dd { margin: 0; }
.mp-book-quote__lines .is-total { border-top: 1px solid #e4e4e7; margin-top: 6px; padding-top: 8px; font-weight: 700; color: #111; }
.mp-booking-list { list-style: none; margin: 0; padding: 0; }
.mp-booking-list__item { border-top: 1px solid #ebebeb; }
.mp-booking-list__item:first-child { border-top: 0; }
.mp-booking-list__link { display: grid; grid-template-columns: 110px 1fr auto auto; gap: 8px 16px; align-items: center; padding: 14px 4px; color: #111; }
.mp-booking-list__link:hover { background: #f7f9f9; }
.mp-booking-list__no { font-weight: 700; }
.mp-booking-list__who { font-weight: 600; }
.mp-booking-list__when { grid-column: 2; font-size: 14px; color: #52525b; }
.mp-booking-list__amount { grid-column: 3; grid-row: 1 / span 2; font-weight: 600; }
.mp-booking-list__link .mp-badge { grid-column: 4; grid-row: 1 / span 2; margin: 0; }
@media (max-width: 575px) { .mp-booking-list__link { grid-template-columns: 1fr auto; } .mp-booking-list__when, .mp-booking-list__amount, .mp-booking-list__link .mp-badge { grid-column: auto; grid-row: auto; } }
.mp-booking-next { padding: 14px 16px; border-radius: 12px; background: #f7f9f9; }
.mp-booking-next.is-awaiting_payment, .mp-booking-next.is-requested { background: #eff6ff; }
.mp-booking-next.is-confirmed, .mp-booking-next.is-completed { background: #f0fdf4; }
.mp-booking-next.is-declined, .mp-booking-next.is-cancelled, .mp-booking-next.is-lost { background: #fef2f2; }
.mp-booking-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px 20px; margin: 0; }
.mp-booking-facts div.is-wide { grid-column: 1 / -1; }
.mp-booking-facts dt { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #71717a; }
.mp-booking-facts dd { margin: 2px 0 0; }
.mp-account-links a i { margin-right: 6px; }

/* Payment page (work G4): the QR, the bank apps, the clock */
.mp-pay { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
@media (max-width: 767px) { .mp-pay { grid-template-columns: 1fr; } }
.mp-pay__qr { border: 1px solid #ebebeb; border-radius: 14px; padding: 16px; text-align: center; background: #fff; }
.mp-pay__qr img { width: 100%; max-width: 228px; height: auto; display: block; margin: 0 auto; }
.mp-pay__qr code { display: block; margin-top: 10px; font-size: 11px; word-break: break-all; color: #71717a; }
.mp-pay__amount { font-size: 28px; font-weight: 700; margin: 0 0 4px; }
.mp-pay__clock { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-weight: 600; font-size: 14px; }
.mp-pay__clock.is-late { background: #fef2f2; color: #991b1b; }
.mp-pay__apps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mp-pay__apps a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #ebebeb; border-radius: 10px; color: #111; font-size: 13px; line-height: 1.2; }
.mp-pay__apps a:hover { border-color: #111; }
.mp-pay__apps img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex: 0 0 32px; }
.mp-pay__status { margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: #f7f9f9; font-size: 14px; }
.mp-pay__status.is-error { background: #fef2f2; color: #991b1b; }
.mp-pay__status.is-paid { background: #f0fdf4; color: #166534; }

/* Refunds and swaps on the booking page (work G4c) */
.mp-refund { padding: 10px 14px; border-radius: 10px; background: #fffbeb; color: #92400e; font-size: 14px; }
.mp-refund.is-paid { background: #f0fdf4; color: #166534; }
.mp-refund.is-cancelled { background: #f7f9f9; color: #52525b; }
.mp-swap { padding: 16px 18px; border-radius: 12px; border: 1px solid #fecaca; background: #fff7f7; }

/* Reviews (work G5): stars, the form, the list */
.mp-stars { display: inline-flex; align-items: center; gap: 2px; color: #d4d4d8; font-size: 14px; }
.mp-stars .is-on { color: #f59e0b; }
.mp-stars__count { margin-left: 8px; color: #52525b; font-size: 13px; }
.mp-stars-link { color: inherit; }
.mp-guide-card__rating .mp-stars { font-size: 12px; }
.mp-guide-reviews__summary { font-weight: 400; margin-left: 10px; }
.mp-stars-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; font-size: 26px; }
.mp-stars-input input { display: none; }
.mp-stars-input label { cursor: pointer; color: #d4d4d8; transition: color .1s; }
.mp-stars-input label:hover, .mp-stars-input label:hover ~ label, .mp-stars-input input:checked ~ label { color: #f59e0b; }
.mp-review-form { padding: 18px; border: 1px solid #ebebeb; border-radius: 12px; }
.mp-reviews { list-style: none; margin: 0; padding: 0; }
.mp-review { padding: 14px 0; border-top: 1px solid #ebebeb; }
.mp-reviews .mp-review:first-child { border-top: 0; padding-top: 0; }
.mp-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 6px; }
.mp-review__date { font-size: 13px; color: #71717a; }
.mp-review__reply { padding: 10px 14px; border-left: 3px solid #111; background: #f7f9f9; border-radius: 0 10px 10px 0; font-size: 14px; }

/* Payment method choice (work G4b) and the card page */
.mp-pay-methods__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mp-pay-methods__list.has-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 575px) { .mp-pay-methods__list, .mp-pay-methods__list.has-3 { grid-template-columns: 1fr; } }
.mp-pay-method { display: block; margin: 0; }
.mp-pay-method input { display: none; }
.mp-pay-method__box { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 14px 16px; border: 2px solid #ebebeb; border-radius: 12px; cursor: pointer; transition: border-color .15s; }
.mp-pay-method__box i { font-size: 22px; margin-bottom: 4px; }
.mp-pay-method__box small { font-size: 12px; color: #71717a; }
.mp-pay-method input:checked + .mp-pay-method__box { border-color: #111; background: #f7f9f9; }
.mp-pay--card { grid-template-columns: 220px 1fr; }
.mp-pay__steps { list-style: none; margin: 0; padding: 18px; border: 1px solid #ebebeb; border-radius: 14px; background: #f7f9f9; display: flex; flex-direction: column; gap: 14px; font-size: 14px; color: #111; }
.mp-pay__steps li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.mp-pay__steps li span { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: #111; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
@media (max-width: 767px) { .mp-pay--card { grid-template-columns: 1fr; } }

/* Places to stay (work 6): cards, filters, photos, units, facilities, map */
.mp-stay-card .tp-team-thumb img { aspect-ratio: 4 / 3; }
.mp-stay-card__chips { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mp-stay-card__chips li { padding: 4px 10px; border-radius: 999px; background: #f7f9f9; color: #3f3f46; font-size: 12px; }
.mp-stay-filters__facilities { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.mp-stay-filters__facility { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #3f3f46; cursor: pointer; margin: 0; }
.mp-stay-filters__facility input { width: 16px; height: 16px; accent-color: var(--tp-theme-1); }
.mp-stay-photos { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.mp-stay-photos__cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; display: block; }
.mp-stay-photos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mp-stay-photos__grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; }
@media (max-width: 767px) { .mp-stay-photos { grid-template-columns: 1fr; } .mp-stay-photos__grid { grid-template-columns: repeat(3, 1fr); } }
.mp-units { display: flex; flex-direction: column; gap: 14px; }
.mp-unit { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 16px; border: 1px solid #ebebeb; border-radius: 14px; }
.mp-unit:not(:has(.mp-unit__photo)) { grid-template-columns: 1fr; }
.mp-unit__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.mp-unit__name { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.mp-unit__name small { font-size: 13px; font-weight: 500; color: #71717a; margin-left: 6px; }
.mp-unit__facts { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: #52525b; }
.mp-unit__facts i { color: var(--tp-theme-1); margin-right: 4px; }
.mp-unit__prices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; margin: 0; }
.mp-unit__prices dt { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #71717a; }
.mp-unit__prices dd { margin: 2px 0 0; }
@media (max-width: 575px) { .mp-unit { grid-template-columns: 1fr; } }
.mp-facility-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px 24px; }
.mp-facility-group h4 { font-size: 14px; font-weight: 600; margin: 0 0 8px; color: #111; }
.mp-facility-group ul { list-style: none; margin: 0; padding: 0; }
.mp-facility-group li { font-size: 14px; color: #3f3f46; margin-bottom: 4px; }
.mp-facility-group li i { color: #16a34a; margin-right: 6px; font-size: 12px; }
.mp-plain-list { list-style: none; margin: 0; padding: 0; }
.mp-plain-list li { padding: 8px 0; border-top: 1px solid #f1f1f1; font-size: 14px; }
.mp-plain-list li:first-child { border-top: 0; }
.mp-plain-list .mp-coming { display: block; margin-top: 2px; }
.mp-map { border-radius: 14px; overflow: hidden; border: 1px solid #ebebeb; margin-bottom: 10px; }
.mp-map iframe { width: 100%; height: 260px; border: 0; display: block; }

/* Accommodation calendar (work 7a): unit type picker on the public page */
.mp-stay-calendar__unit select { min-width: 200px; }
.mp-stay-filters__facilities label { margin: 0; }

/* Password fields: the eye button sits inside the field, on the right. */
.mp-password { position: relative; }
.mp-password .tp-input { padding-right: 52px; }
.mp-password-toggle { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tp-text-2, #5f6b6d); font-size: 17px; line-height: 1; cursor: pointer; }
.mp-password-toggle:hover, .mp-password-toggle:focus-visible { color: var(--tp-theme-1); background: rgba(7, 21, 22, 0.05); outline: none; }
.mp-password-toggle[aria-pressed="true"] { color: var(--tp-theme-1); }


/* Buttons: one set of states for every theme button (hover comes from the theme). */
.tp-btn { position: relative; }
.tp-btn:active { transform: translateY(1px); }
.tp-btn:focus-visible { outline: 2px solid var(--tp-theme-1); outline-offset: 3px; }
.tp-btn:disabled, .tp-btn[aria-disabled="true"] { pointer-events: none; opacity: .75; cursor: default; }
/* The theme's .tp-btn-sm is an outline button with orange text; on a filled .tp-btn it hid the label. */
.tp-btn.tp-btn-sm:not(.tp-btn-border) { color: var(--tp-common-white); }

/* A form on its way: the pressed button keeps its size and shows a spinner instead of its text. */
.tp-btn.is-loading { color: transparent !important; }
.tp-btn.is-loading > * { visibility: hidden; }
.tp-btn.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: mp-spin .7s linear infinite; }
.tp-btn-border.is-loading::after, .tp-btn-white.is-loading::after, .tp-btn-sm.is-loading::after { border-color: rgba(7, 21, 22, .18); border-top-color: var(--tp-theme-1); }
.tp-btn.tp-btn-sm:not(.tp-btn-border).is-loading::after { border-color: rgba(255, 255, 255, .45); border-top-color: #fff; }
@keyframes mp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tp-btn.is-loading::after { animation-duration: 1.5s; } }

/* Footer payment marks (QPay, Visa, Mastercard): white chips of one height, like the theme's strip. */
.mp-payment-logos { gap: 8px; margin-left: 10px; }
.mp-payment-logo { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 10px; background: #fff; border: 1px solid rgba(7, 21, 22, .1); border-radius: 6px; }
.mp-payment-logo img { height: 18px; width: auto; display: block; }
/* Mastercard is its two circles alone (no wordmark), so it takes more height to read as large as the others. */
.mp-payment-logo--mastercard img { height: 24px; }
@media (max-width: 574.98px) { .mp-payment-logos { margin-left: 0; } }

/* Home page (2026-10-07): the four numbers keep to one row on a laptop; the hero's
   bird and lantern sit clear of the longer Mongolian title and subtitle. */
.mp-home-counter .tp-counter-count { font-size: clamp(40px, 4vw, 58px); }
@media (min-width: 575px) { .mp-home-counter .tp-counter-count-item:not(:last-child) { padding-right: 28px; margin-right: 28px; } }
@media (min-width: 1200px) {
    .tp-hero-3-shape-2 { top: 34px; right: 19%; }
    .tp-hero-3-shape-3 { top: 330px; right: 16%; }
}

/* Home banner slider (2026-10-07): slides keep one height; round arrows and dots under them. */
.mp-banner-swiper .swiper-slide { height: auto; }
.mp-banner-swiper .tp-offer-3-banner { min-height: 100%; }
.mp-banner-swiper__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(7, 21, 22, .12); background: #fff; color: var(--tp-common-black); display: inline-flex; align-items: center; justify-content: center; transition: all .3s ease; }
.mp-banner-swiper__arrow:hover { background: var(--tp-theme-1); border-color: var(--tp-theme-1); color: #fff; }
.mp-banner-swiper__arrow.swiper-button-disabled { opacity: .35; pointer-events: none; }
.mp-banner-swiper__dots { position: static; width: auto !important; display: flex; gap: 6px; }
.mp-banner-swiper__dots .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 !important; background: rgba(7, 21, 22, .25); opacity: 1; }
.mp-banner-swiper__dots .swiper-pagination-bullet-active { width: 22px; border-radius: 4px; background: var(--tp-theme-1); }
/* Everything fits on the screen: Swiper locks the dots, and the arrows go with them. */
.mp-banner-swiper__nav:has(.swiper-pagination-lock) { display: none !important; }

/* Home "about" block on small screens: the landscape doodle crowds the button, and the gap under it runs long. */
@media (max-width: 1199.98px) { .mp-home-about .tp-about-3-shape { display: none; } }
@media (max-width: 767.98px) { .mp-home-about { padding-bottom: 20px; } .mp-home-about .tp-about-3-content { margin-bottom: 0; } }

/* "About us" page (2026-10-07). */
.mp-about-story__img { border-radius: 16px; aspect-ratio: 4 / 3.4; object-fit: cover; }
.mp-about-lead { font-size: 17px; line-height: 1.7; }
.mp-about-facts .tp-counter-count { font-size: clamp(36px, 3.6vw, 52px); }
.mp-about-card { padding: 30px; }
.mp-about-card .mp-why-item__icon { display: inline-flex; }
.mp-about-note { font-weight: 600; color: var(--tp-common-black); }
.mp-about-note i { color: var(--tp-theme-1); margin-right: 6px; }
.mp-about-payment .mp-payment-logos { margin-left: 0; }
.mp-about-operator__logo { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 16px; object-fit: contain; background: #fff; box-shadow: 0 9px 20px rgba(7, 21, 22, .08); }
.mp-about-operator__role { display: inline-block; padding: 3px 12px; border-radius: 30px; background: #fff1ee; color: var(--tp-theme-1); font-size: 13px; font-weight: 600; line-height: 1.5; }
.mp-about-operator__soon { font-weight: 600; color: var(--tp-common-black); }
.mp-about-operator__soon i { color: var(--tp-theme-1); margin-right: 6px; }
.mp-about-reviews { background: #f7f9f9; }
.mp-about-review { background: #fff; }
.mp-about-review__text { font-size: 16px; line-height: 1.7; color: var(--tp-common-black); }
.mp-about-contact { font-weight: 600; color: var(--tp-common-black); }
.mp-about-contact i { color: var(--tp-theme-1); margin-right: 6px; }
.mp-about-contact:hover { color: var(--tp-theme-1); }
@media (max-width: 767.98px) { .mp-about-card { padding: 22px; } }

/* Footer columns (2026-10-07): the theme pushes columns 2-4 right by 40-112px, which wraps the
   longer Mongolian links; the grid widths alone space them. The email and phone keep to one line. */
@media (min-width: 1200px) { .tp-footer-two .tp-footer-col-2, .tp-footer-two .tp-footer-col-3, .tp-footer-two .tp-footer-col-4 { margin-left: 0; } }
.tp-footer-two .tp-footer-contact a.phone { white-space: nowrap; font-size: clamp(16px, 1.3vw, 20px); }

/* ===== /providers/intro: the introduction for service providers (2026-10-18). One column, no photos, prints as A4. ===== */
.mp-intro { font-size: 17px; line-height: 1.55; color: var(--tp-common-black); }
.mp-intro p { margin: 0; max-width: 62ch; }
.mp-intro__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-bottom: 22px; border-bottom: 1px solid var(--tp-border-1); }
.mp-intro__brand { font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.mp-intro__brand::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--tp-theme-1); margin-right: 10px; vertical-align: 1px; }
.mp-intro__kicker { color: var(--tp-grey-1); font-size: 14px; }
.mp-intro__print { margin-left: auto; border: 1px solid var(--tp-border-1); background: #fff; border-radius: 8px; padding: 6px 14px; font-size: 14px; font-weight: 600; color: var(--tp-common-black); }
.mp-intro__print:hover { border-color: var(--tp-theme-1); color: var(--tp-theme-1); }
.mp-intro__print i { margin-right: 6px; }
.mp-intro__hero { padding: 56px 0 44px; }
.mp-intro__eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-theme-1); margin-bottom: 12px; }
.mp-intro__title { font-size: clamp(34px, 5.2vw, 54px); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 18px; }
.mp-intro__lead { font-size: 20px; max-width: 48ch; }
.mp-intro__section { padding: 44px 0; border-top: 1px solid var(--tp-border-1); }
.mp-intro__h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 18px; }
.mp-intro__h3 { font-size: 19px; font-weight: 600; line-height: 1.25; margin: 0 0 8px; }
.mp-intro__muted { color: var(--tp-grey-1); margin-bottom: 18px !important; }
.mp-intro__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mp-intro__list li { position: relative; padding-left: 26px; max-width: 62ch; }
.mp-intro__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 2px; background: var(--tp-theme-1); }
.mp-intro__list--small { gap: 8px; }
.mp-intro__list--small li { font-size: 15px; }
.mp-intro__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-bottom: 18px; }
.mp-intro__step { padding: 22px; background: var(--tp-grey-3); border-radius: 10px; min-width: 0; }
.mp-intro__step p, .mp-intro__tile p { font-size: 16px; }
.mp-intro__step-n { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%; background: var(--tp-theme-1); color: #fff; font-weight: 700; font-size: 16px; }
.mp-intro__card { padding: 22px; border: 1px solid var(--tp-border-1); border-radius: 10px; min-width: 0; }
.mp-intro__card svg { width: 48px; height: 48px; margin-bottom: 12px; stroke: var(--tp-common-black); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mp-intro__who { font-size: 15px; color: var(--tp-grey-1); margin-bottom: 14px !important; }
.mp-intro__label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tp-grey-1); margin-bottom: 8px; }
.mp-intro__timeline { display: grid; margin: 6px 0 18px; }
.mp-intro__stop { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding-bottom: 26px; }
.mp-intro__stop > div { display: grid; gap: 4px; }
.mp-intro__stop b { font-weight: 600; }
.mp-intro__stop p { font-size: 16px; color: var(--tp-grey-1); }
.mp-intro__dot { position: relative; }
.mp-intro__dot::before { content: ""; position: absolute; left: 8px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--tp-theme-1); }
.mp-intro__dot::after { content: ""; position: absolute; left: 13px; top: 22px; bottom: -6px; width: 2px; background: var(--tp-border-1); }
.mp-intro__stop:last-child .mp-intro__dot::after { display: none; }
.mp-intro__stop.is-paid .mp-intro__dot::before { background: var(--tp-theme-1); }
.mp-intro__note { padding: 16px 20px; border-left: 3px solid var(--tp-theme-1); background: var(--tp-grey-3); border-radius: 0 8px 8px 0; font-size: 16px; max-width: none !important; }
.mp-intro__tile { padding: 22px; background: var(--tp-grey-3); border-radius: 10px; min-width: 0; }
.mp-intro__big { display: block; font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.mp-intro__big small { font-size: 16px; font-weight: 500; color: var(--tp-grey-1); letter-spacing: 0; margin-left: 6px; }
.mp-intro__cal { max-width: 440px; border: 1px solid var(--tp-border-1); border-radius: 12px; overflow: hidden; background: #fff; }
.mp-intro__cal-bar { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--tp-border-1); background: var(--tp-grey-3); }
.mp-intro__cal-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--tp-border-1); }
.mp-intro__cal-body { padding: 18px; }
.mp-intro__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mp-intro__days span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; font-size: 13px; color: var(--tp-grey-1); background: var(--tp-grey-3); font-variant-numeric: tabular-nums; }
.mp-intro__days span.is-booked, .mp-intro__key i.is-booked { background: var(--tp-theme-1); color: #fff; font-weight: 600; }
.mp-intro__days span.is-closed, .mp-intro__key i.is-closed { background: var(--tp-common-petals); color: #1d5a2a; font-weight: 600; }
.mp-intro__key { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 13px; color: var(--tp-grey-1); }
.mp-intro__key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--tp-grey-3); border: 1px solid var(--tp-border-1); }
.mp-intro__langs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.mp-intro__langs span { padding: 6px 12px; border: 1px solid var(--tp-border-1); border-radius: 999px; font-size: 15px; }
.mp-intro__invite { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: start; }
.mp-intro__download { display: grid; gap: 10px; justify-items: start; align-content: start; }
.mp-intro__download .tp-btn i { margin-right: 8px; }
.mp-intro__download-note { font-size: 14px; color: var(--tp-grey-1); }
.mp-intro__signup { margin-top: 6px; font-weight: 600; color: var(--tp-common-black); border-bottom: 2px solid var(--tp-theme-1); }
.mp-intro__signup i { font-size: 12px; margin-left: 4px; }
.mp-intro__foot { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 32px; border-top: 1px solid var(--tp-border-1); font-size: 14px; color: var(--tp-grey-1); }
@media (max-width: 640px) { .mp-intro { font-size: 16px; } .mp-intro__invite { grid-template-columns: 1fr; } }
/* The providers page: the way to the introduction (Mongolian only). */
.mp-providers-intro-link { display: inline-block; margin-top: 4px; font-weight: 600; color: var(--tp-theme-1); }
.mp-providers-intro-link i { font-size: 12px; margin-left: 4px; }
.mp-providers-intro-link--beside { margin-left: 18px; }

/* Printing the introduction: A4, the page alone, no header, footer or button. */
@media print {
    @page { size: A4; margin: 14mm 16mm; }
    body:has(.mp-intro) header, body:has(.mp-intro) footer, body:has(.mp-intro) .tp-offcanvas-area, body:has(.mp-intro) .back-to-top-wrapper, body:has(.mp-intro) #loading, body:has(.mp-intro) .mp-intro__print { display: none !important; }
    .mp-intro .wow { visibility: visible !important; opacity: 1 !important; animation: none !important; }
    .mp-intro { padding: 0 !important; font-size: 12pt; color: #000; }
    .mp-intro .container { max-width: none; padding: 0; }
    .mp-intro .col-xl-8 { flex: 0 0 100%; max-width: 100%; }
    .mp-intro__hero { padding: 28px 0 22px; }
    .mp-intro__section { padding: 22px 0; }
    .mp-intro__eyebrow, .mp-intro__h2, .mp-intro__h3 { break-after: avoid; }
    .mp-intro__h2, .mp-intro__cols, .mp-intro__timeline { break-before: avoid; }
    .mp-intro__step, .mp-intro__card, .mp-intro__tile, .mp-intro__stop, .mp-intro__note, .mp-intro__cal, .mp-intro__invite, .mp-intro__list li, .mp-intro__muted, .mp-intro__lead { break-inside: avoid; }
    .mp-intro__title { font-size: 30pt; }
    .mp-intro__h2 { font-size: 18pt; }
    .mp-intro__lead { font-size: 14pt; }
    .mp-intro__cols { grid-template-columns: repeat(3, 1fr); }
    .mp-intro__step, .mp-intro__tile, .mp-intro__note, .mp-intro__cal-bar, .mp-intro__days span { background: #f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .mp-intro__step-n, .mp-intro__days span.is-booked, .mp-intro__key i.is-booked { background: var(--tp-theme-1) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .mp-intro__days span.is-closed, .mp-intro__key i.is-closed { background: var(--tp-common-petals) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .mp-intro__invite { grid-template-columns: 1fr; }
    .mp-intro__download { display: none; }
}

/* Share bar under a news post (2026-10-20): the share links on the left, the site's own pages to follow on the right. */
.mp-share { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding: 18px 0; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; }
.mp-share__group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.mp-share__label { font-weight: 600; color: var(--tp-common-black); }
.mp-share .postbox-social { gap: 8px; }
.mp-share .postbox-social a, .mp-share .postbox-social button { width: 44px; height: 44px; padding: 0; border: 1px solid rgba(17, 17, 17, 0.1); border-radius: 60px; background: transparent; display: flex; align-items: center; justify-content: center; color: var(--tp-common-black); transition: background .2s, color .2s, border-color .2s; }
.mp-share .postbox-social a:hover, .mp-share .postbox-social button:hover { background: var(--tp-theme-1); border-color: var(--tp-theme-1); color: #fff; }
.mp-share__done { display: none; font-size: 14px; font-weight: 600; color: var(--tp-theme-1); }
.mp-share__group.is-copied .mp-share__done { display: inline; }