/*
 * M-Talii site chrome: the utility bar, header, logo, primary nav and buttons.
 *
 * WHY THIS FILE EXISTS
 *
 * These rules used to live in three stylesheets at once -- mtalii-global.css,
 * mtalii-home.css and mtalii-home-fixes.css -- loaded in that order. Because
 * they collided at equal specificity, the file NAMED global lost every tie,
 * and every header change had to be written as header.mt-header (0,2,1) to
 * beat a plain .mt-header sitting in a later file. That cost three separate
 * rounds of debugging in one day: a distorted radio on the partner form, a
 * mobile menu rendering under the page tabs, and a header button that pushed
 * the hamburger off the screen.
 *
 * There is now exactly one owner. This file is linked LAST, so a plain class
 * selector here beats anything of equal weight elsewhere, and the order of
 * rules within it is the only thing that decides a tie.
 *
 * Blocks appear below in their original load order, so the cascade resolves
 * exactly as it did before the extraction. Nothing here is a rewrite.
 *
 * RULE: chrome selectors belong here and nowhere else.
 * tests/Feature/AssetCacheBustingTest.php fails if they reappear elsewhere.
 */

/* ORDER MATTERS, TWICE OVER:
   - base rules first, then media blocks. A media query adds NO specificity,
     so a base rule placed after one silently beats it.
   - media blocks widest-first, so the narrowest breakpoint that applies is
     the last one written and therefore the one that wins a tie.
   Both inversions happened while merging these out of three files. */

/* Base rules first, then every media block, each group in its original
   relative order. Media queries add no specificity, so a base rule sitting
   after a media block silently beats it -- which is exactly what happened
   when these were merged out of three files. */

/* ---- from mtalii-global.css ---- */
.mt-utility-contact,.mt-utility-actions{display:flex;align-items:center;gap:22px;height:100%}
.mt-utility-contact a,.mt-utility-actions>a{display:inline-flex;align-items:center;gap:7px;color:#dceaff;font-size:11px;font-weight:600;text-decoration:none;white-space:nowrap}
.mt-utility-contact a:hover,.mt-utility-actions>a:hover{color:#fff}
.mt-utility-contact i,.mt-utility-actions>a i{color:#ff9137;font-size:14px}
.mt-utility-actions{margin-left:auto}
.mt-utility-bar .mt-preference-controls{height:100%;gap:3px}
.mt-utility-bar .mt-pref-switcher summary{min-height:28px;padding:4px 8px;border-color:rgba(255,255,255,.18);border-radius:7px;background:rgba(255,255,255,.08);color:#fff;font-size:10px}
.mt-utility-bar .mt-pref-switcher summary>i:first-child{color:#ff9b4a}
.mt-utility-bar .mt-pref-switcher summary:hover,.mt-utility-bar .mt-pref-switcher[open] summary{border-color:#ff9b4a;background:rgba(255,255,255,.13);box-shadow:none}
.mt-utility-bar .mt-pref-menu{top:calc(100% + 5px)}
.mt-preference-controls{display:flex;align-items:center;gap:7px;flex:0 0 auto;font-family:Montserrat,Arial,sans-serif}
.mt-pref-switcher{position:relative}
.mt-pref-switcher summary{list-style:none;display:flex;align-items:center;gap:6px;min-height:38px;padding:7px 10px;border:1px solid #dce6f2;border-radius:10px;background:#fff;color:#062d62;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:.18s}
.mt-pref-switcher summary::-webkit-details-marker{display:none}
.mt-pref-switcher summary:hover,.mt-pref-switcher[open] summary{border-color:#ff8a21;box-shadow:0 5px 16px rgba(7,43,88,.1)}
.mt-pref-switcher summary>i:first-child{font-size:16px;color:#1478ee}
.mt-pref-switcher summary>i:last-child{font-size:10px;transition:transform .18s}
.mt-pref-switcher[open] summary>i:last-child{transform:rotate(180deg)}
.mt-pref-menu{position:absolute;top:calc(100% + 9px);left:0;z-index:1100;min-width:150px;padding:8px;background:#fff;border:1px solid #dce6f2;border-radius:13px;box-shadow:0 16px 40px rgba(7,43,88,.18)}
.mt-pref-menu-right{left:auto;right:0}
.mt-pref-menu small{display:block;padding:5px 9px 7px;color:#718097;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.mt-pref-menu a{display:flex;align-items:center;gap:8px;padding:9px;border-radius:8px;color:#17345d;font-size:12px;font-weight:600;text-decoration:none}
.mt-pref-menu a:hover{background:#edf5ff}
.mt-pref-menu a.is-selected{background:#fff3e8;color:#c95700}
.mt-pref-menu a i:last-child{margin-left:auto;color:#ff7200}
.mt-pref-menu .flag-icon,.mt-pref-switcher summary .flag-icon{flex:0 0 auto;border-radius:2px}
.mt-utility-actions .is-current{opacity:1;font-weight:700}
/* ---- from mtalii-home.css ---- */
.mt-header{height:88px;padding:12px clamp(24px,3.4vw,54px);display:flex;align-items:center;gap:36px;background:#fff;position:relative;z-index:20}
.mt-logo{width:250px;flex:0 0 auto;height:62px;overflow:hidden;display:flex;align-items:center}
.mt-logo img{width:100%;height:100%;object-fit:contain}
.mt-nav{display:flex;gap:34px;margin:auto}
.mt-nav>a,.mt-header-actions>a{color:var(--mt-navy);font-weight:600;font-size:14px;white-space:nowrap}
.mt-nav i{font-size:11px;margin-left:3px}
.mt-header-actions{display:flex;align-items:center;gap:22px}
.mt-header-actions>a:not(.mt-btn) i{font-size:20px;margin-right:5px}
.mt-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:10px;padding:15px 21px;font-weight:700;transition:.2s transform,.2s box-shadow}
.mt-btn:hover{transform:translateY(-2px)}
.mt-btn-dark{background:var(--mt-navy);color:#fff!important;box-shadow:0 8px 24px rgba(7,43,88,.14)}
.mt-btn-orange{background:var(--mt-orange);color:#fff!important;box-shadow:0 10px 25px rgba(255,122,0,.2)}
.mt-menu-toggle{display:none;background:none;border:0;color:var(--mt-navy);font-size:26px}
/* ---- from mtalii-home-fixes.css ---- */
.mt-nav{ overflow: visible; }
.mt-nav-item{ position: relative; }
.mt-nav-trigger{
    padding: 14px 2px;
    border: 0;
    background: transparent;
    color: #072b58;
    font: 600 14px Montserrat,sans-serif;
    white-space: nowrap;
    cursor: pointer;
}
.mt-nav-trigger i{ display: inline-block; margin-left: 4px; font-size: 11px; transition: transform .2s ease; }
.mt-nav-item.is-open .mt-nav-trigger i{ transform: rotate(180deg); }
.mt-nav-trigger:hover,.mt-nav-trigger:focus-visible{ color: #ff7a00; outline: none; }
.mt-dropdown{
    position: absolute;
    top: calc(100% + 13px);
    left: -18px;
    width: 360px;
    padding: 13px;
    border: 1px solid #dfe6ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(7,43,88,.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .18s ease,transform .18s ease,visibility .18s;
}
.mt-nav-item.is-open .mt-dropdown{ opacity: 1; visibility: visible; transform: translateY(0); }
.mt-nav-mega .mt-dropdown{ left: -190px; width: 760px; padding: 20px 22px 14px; }
.mt-dropdown-right{ left: auto; right: -18px; }
.mt-destination-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.mt-destination-grid>div{ display: flex; flex-direction: column; gap: 3px; }
.mt-destination-grid p{ margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid #e5ebf2; color: #072b58; font-size: 12px; font-weight: 800; }
.mt-destination-grid p .flag-icon{ margin-right: 6px; border-radius: 2px; }
.mt-destination-grid a{ padding: 6px 3px; color: #526178; font-size: 12px; font-weight: 500; border-radius: 6px; }
.mt-destination-grid a:hover{ padding-left: 8px; color: #0062c6; background: #f2f7fd; }
.mt-dropdown-all{ margin-top: 12px; padding: 11px 8px 3px; border-top: 1px solid #e5ebf2; display: flex; justify-content: space-between; color: #0062c6!important; font-size: 12px!important; font-weight: 700!important; }
.mt-dropdown-list{ display: grid; gap: 3px; }
.mt-dropdown-list>a{ padding: 10px; border-radius: 10px; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; color: #072b58; }
.mt-dropdown-list>a:hover,.mt-dropdown-list>a:focus-visible{ background: #f2f7fd; outline: none; }
.mt-dropdown-list>a>i{ color: #0062c6; font-size: 21px; text-align: center; }
.mt-dropdown-list>a>span{ display: flex; flex-direction: column; }
.mt-dropdown-list b{ font-size: 12px; line-height: 1.35; }
.mt-dropdown-list small{ margin-top: 2px; color: #738096; font-size: 9px; }
/* ---- second pass: from mtalii-global.css ---- */
/* Shared M-Talii navigation for every internal customer-facing page. */
.mt-utility-bar{height:38px;padding:0 clamp(24px,3.4vw,54px);display:flex;align-items:center;justify-content:space-between;gap:24px;background:#062d62;color:#fff;font-family:Montserrat,Arial,sans-serif;position:relative;z-index:1200}
.mt-internal-header{font-family:Montserrat,Arial,sans-serif;border-bottom:1px solid #e7eef7;box-shadow:0 6px 22px rgba(7,43,88,.06);position:relative;z-index:1050}
.mt-internal-header .mt-nav-trigger{border:0;background:transparent;color:var(--mt-navy);font:600 14px Montserrat;cursor:pointer;padding:24px 0;white-space:nowrap}
.mt-internal-header .mt-nav-item{position:relative}
.mt-internal-header .mt-nav-item.is-current>.mt-nav-trigger{color:var(--mt-orange)}
.mt-internal-header .mt-nav-item.is-current>.mt-nav-trigger:after{content:"";position:absolute;height:3px;border-radius:3px;background:var(--mt-orange);left:0;right:0;bottom:8px}
.mt-internal-header .mt-dropdown{top:calc(100% - 3px)}
/* ---- Header: account, trip and the supply-side link ------------------------
   Account and trip sit in the utility bar because .mt-header-actions is
   display:none below 780px, which left a phone with no route to either. */
.mt-utility-trip{position:relative}
.mt-trip-count{
  position:absolute;top:-4px;right:-9px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:var(--mt-orange,#F47A00);color:#fff;
  font:700 10px/16px Montserrat,system-ui,sans-serif;font-style:normal;
  text-align:center;letter-spacing:0;
}
/* Quiet by design: two competing buttons in one corner means neither reads. */
.mt-list-business{
  color:var(--mt-navy,#062D61);font-weight:600;font-size:14px;white-space:nowrap;
  border-bottom:2px solid transparent;padding-bottom:2px;
}
.mt-list-business:hover{border-bottom-color:var(--mt-orange,#F47A00)}
/* Only in the mobile menu — on desktop the header link above carries it. */
.mt-nav-list-business{display:none}
/* ---- second pass: from mtalii-cart.css ---- */
@media print{
.mt-utility-bar,.mt-internal-header,.mt-receipt-status,.mt-receipt-actions,.footer,.bravo_footer,.debugbar{display:none!important}
}
/* ============================================================================
   SITE OVERRIDES — last in the last chrome file, so plain class selectors win.
   ============================================================================

   Everything above is the extracted cascade, kept in its original order so the
   refactor changed nothing. Anything you want to WIN goes below this line, at
   whatever specificity reads most clearly. No header.mt-header (0,2,1) tricks
   are needed down here, and their absence is the point: if a rule in this
   section does not take effect, something is wrong beyond the cascade.
   ========================================================================= */

/* The open mobile menu rendered UNDER the listing page's sticky section tabs:
   .mt-header creates a stacking context at z-index 20 that its children cannot
   escape, so the header itself has to rise. */
@media(max-width:780px){
    
  /* "Plan a trip" is the primary call to action on a site that sells travel,
     and it was display:none below 780px. Bringing it back costs ~97px, which
     pushed the hamburger off a 375px screen, so the logo gives up the room. */
  /* .mt-header .mt-logo, not .mt-logo. Nothing to do with file order this
     time: an @media(max-width:1400px) block above sets `.mt-header .mt-logo`
     at (0,2,0), and a media query adds NO specificity -- so that rule is live
     at 375px too and beats a plain class here whatever the order. Matching its
     shape is the honest fix. */
            
  /* On a phone this link lives in the menu, where there is room for words. */
  }

@media(max-width:1400px){
.mt-header{gap:18px}
.mt-header .mt-logo{width:190px}
.mt-header .mt-nav{gap:18px}
.mt-header-actions{gap:12px}
.mt-utility-bar .mt-pref-switcher summary{width:auto}
.mt-utility-bar .mt-pref-switcher summary span:not(.flag-icon){display:inline}
.mt-utility-bar .mt-pref-switcher summary>i:last-child{display:inline-block}
}

@media(max-width:1100px){
.mt-nav{gap:17px}
.mt-header-actions>a:not(.mt-btn){display:none}
.mt-logo{width:200px}
}

@media (max-width: 1100px) and (min-width: 781px){
.mt-nav-trigger{ font-size: 12px; }
.mt-nav-mega .mt-dropdown{ left: -150px; width: 680px; }
}

@media(max-width:780px){
.mt-utility-bar{height:34px;padding:0 14px}
.mt-utility-contact{gap:12px}
.mt-utility-contact a:last-child{display:none}
.mt-utility-contact a span{font-size:10px}
.mt-utility-actions{gap:10px}
.mt-utility-actions>a span{display:none}
.mt-utility-bar .mt-pref-switcher summary span:not(.flag-icon){display:none}
.mt-utility-bar .mt-pref-switcher summary{width:30px;min-height:26px;justify-content:center;padding:3px}
.mt-utility-bar .mt-pref-switcher summary>i:last-child{display:none}
.mt-preference-controls{margin-left:auto}
.mt-menu-toggle{order:3;margin-left:auto}
.mt-pref-menu{position:fixed;top:36px;left:auto;right:12px}
.mt-currency-switcher .mt-pref-menu{right:50px}
}

@media(max-width:780px){
.mt-nav-list-business{
    display:flex;align-items:center;gap:10px;margin-top:6px;padding:12px 4px 4px;
    border-top:1px solid var(--mt-line,#DCE3EC);
    color:var(--mt-navy,#062D61);font-weight:700;font-size:14px;
  }
}

@media(max-width:780px){
.mt-header{height:74px;padding:8px 18px}
.mt-logo{width:174px;height:56px}
.mt-menu-toggle{display:block;margin-left:auto}
.mt-nav{display:none;position:absolute;left:16px;right:16px;top:70px;background:#fff;border-radius:14px;padding:12px;box-shadow:0 12px 40px rgba(7,43,88,.18);flex-direction:column}
.mt-nav.is-open{display:flex}
.mt-header-actions{display:none}
}

@media (max-width: 780px){
.mt-nav-item{ width: 100%; }
.mt-nav-trigger{ width: 100%; padding: 10px 8px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.mt-dropdown,.mt-nav-mega .mt-dropdown,.mt-dropdown-right{ position: static; width: 100%; max-height: 0; padding: 0 10px; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; overflow: hidden; transition: max-height .25s ease,padding .25s ease; }
.mt-nav-item.is-open .mt-dropdown{ max-height: 560px; padding: 8px 10px 12px; }
.mt-destination-grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
.mt-destination-grid a{ padding: 4px 3px; }
.mt-dropdown-list>a{ padding: 8px; }
}

@media(max-width:780px){
.mt-internal-header{position:relative}
.mt-internal-header .mt-nav{top:72px;max-height:calc(100vh - 90px);overflow:auto}
.mt-internal-header .mt-nav-trigger{padding:10px 4px;text-align:left;width:100%;display:flex;justify-content:space-between}
.mt-internal-header .mt-dropdown{position:static;box-shadow:none;border:0;padding:8px;margin-top:2px}
.mt-internal-header .mt-destination-grid{grid-template-columns:1fr 1fr}
.mt-internal-header .mt-header-actions{display:none}
}

@media(max-width:780px){
/* The open menu sat UNDER the listing page's sticky section tabs, so half
     of it was covered by "Overview / Rooms / Amenities / Reviews". Pre-dates
     this change; visible the moment anyone opens the menu on a phone.
     Raising .mt-nav alone does nothing: .mt-header sets z-index:20, which
     creates a stacking context its children cannot escape, and the tab bar
     sits at the same level later in the document. The header itself has to
     rise. */
  /* header.mt-internal-header (0,1,1), not .mt-internal-header (0,1,0):
     mtalii-home.css sets .mt-header{z-index:20}
at equal specificity and
     loads afterwards, so the plain class selector loses on source order.
     Same trap as the partner-form radio. */
  header/* The trip count must survive when the labels drop to icons. */
  .mt-utility-actions>a.mt-utility-trip span{display:none}
.mt-trip-count{top:-2px;right:-7px}
/* The email is the lowest-value item in the strip and was already hidden
     here; keeping it hidden is what makes room for account and trip. */
  .mt-utility-contact a.mt-utility-email{display:none}
/*
     "Plan a trip" is the primary call to action on a site that sells travel,
     and it was display:none on a phone -- unreachable without opening a menu
     that did not contain it either. It comes back here, compact, beside the
     hamburger.

     header.mt-header (0,2,1) rather than .mt-header-actions (0,1,0): both
     mtalii-global.css and mtalii-home.css set the display:none at the lower
     specificity, and mtalii-home.css loads afterwards, so nothing weaker wins.
  */
  /* Bringing the button back costs ~97px, which pushed the hamburger off the
     right edge (measured at x=377 in a 375px viewport). The logo gives the
     room up: header.mt-header .mt-logo (0,2,1) because mtalii-home.css sets
     .mt-logo at 174px in its own 780px query and loads afterwards. */
  header/* Its home on a phone is the menu, where there is room for the words. */
  header}

/* ============================================================================
   SITE OVERRIDES — deliberately the last block in the last chrome stylesheet.
   ============================================================================
   Everything above is the merged cascade from the three files this replaced.
   Anything that must WIN goes here. Selectors match the shape of what they
   beat: .mt-internal-header .x (0,2,0), because the rules being overridden are
   themselves descendant selectors, and a media query adds no specificity.
   ========================================================================= */
@media(max-width:780px){
  /* The open menu rendered UNDER the listing page's sticky section tabs:
     .mt-header creates a stacking context at z-index 20 that its children
     cannot escape, so the header itself has to rise. */
  .mt-internal-header{z-index:90}
  .mt-internal-header .mt-nav.is-open{z-index:80}

  /* "Plan a trip" is the primary call to action on a site that sells travel
     and it was hidden below 780px -- by TWO separate rules, one written
     .mt-header-actions and one .mt-internal-header .mt-header-actions.
     Bringing it back costs ~97px, which pushed the hamburger off a 375px
     screen, so the logo gives up the room. */
  .mt-internal-header{gap:10px}
  .mt-internal-header .mt-logo{width:148px}
  .mt-internal-header .mt-header-actions{display:flex;margin-left:auto;gap:10px}
  .mt-internal-header .mt-header-actions .mt-btn{padding:10px 14px;font-size:13px;gap:7px}
  .mt-internal-header .mt-header-actions .mt-btn i{display:none}
  .mt-internal-header .mt-menu-toggle{order:3;margin-left:10px}

  /* On a phone this link lives in the menu, where there is room for words. */
  .mt-internal-header .mt-list-business{display:none}
}

/* Self-drive driver details on the car booking form. Asked for only when
   somebody is driving the vehicle away themselves. */
.mt-self-drive{border:1px solid #e1eaf3;border-radius:14px;padding:18px 16px 14px;background:#f8fbff}
.mt-self-drive-why{font-size:12.5px;color:#5d6b7f;line-height:1.55;margin:0 0 12px}
.mt-self-drive-rules{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.mt-self-drive-rules span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:#41536b;background:#fff;border:1px solid #dbe6f2;border-radius:999px;padding:5px 10px}
.mt-self-drive-rules i{color:#f07d20;font-size:13px}
.mt-self-drive-rules b{color:#17304f}
.mt-sd-field{display:block;margin-bottom:11px;font-size:12px;color:#41536b;font-weight:600;width:100%}
.mt-sd-field input,.mt-sd-field select{display:block;width:100%;margin-top:4px;padding:9px 11px;border:1px solid #dbe6f2;border-radius:9px;font-size:13.5px;font-weight:400;color:#17304f;background:#fff}
.mt-sd-field input:focus,.mt-sd-field select:focus{outline:none;border-color:#f07d20}
.mt-sd-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mt-sd-check{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:#41536b;line-height:1.5;margin-bottom:9px;font-weight:400}
.mt-sd-check input{margin-top:2px;flex:0 0 auto}
@media(max-width:480px){.mt-sd-row{grid-template-columns:1fr}}