/* =====================================================================
   MyCar header - self-contained re-creation of the main site header
   (includes/new_menutop.php + main.css styling).
   Order: orange account strip (top) then black menubar (below).
   Scoped to .mch; link colors use !important to beat #mycar a{color:#fb7600}.
   ===================================================================== */
.mch, .mch * { box-sizing:border-box; }
.mch a { text-decoration:none; }
body { margin:0; }                            /* main site body reset: header spans 100% width at top:0 */
#mycar .mc-header { display:none; }           /* retire the old header if present */

/* orange account strip (nº1, on top) - same look as main site .flags_div */
.mch-orange { background:#fb7600; width:100%; padding-top:2px; }
.mch-orange .mch-inner { min-height:0; justify-content:flex-end; }
.mch-acct { display:flex; gap:16px; padding:2px 0; }
#mycar .mch-acct a, .mch-acct a { color:#fff !important; font:700 12px Tahoma,Geneva,sans-serif; }
.mch-acct a:hover { text-decoration:underline; }

/* black menubar (nº2, below) - same look as main site .menubar */
.mch-bar { background:#000; width:100%; }
.mch-inner { max-width:1170px; margin:0 auto; display:flex; align-items:center; gap:0; padding:0 10px; min-height:35px; position:relative; }
.mch-ham { display:none; cursor:pointer; }
.mch-ham img { display:block; }
.mch-logo { display:flex; align-items:center; flex:0 0 auto; }
.mch-logo img { display:block; height:20px; width:auto; }

.mch-brand { flex:0 0 auto; }
.mch-search { display:flex; align-items:center; position:relative; flex:0 0 auto; align-self:stretch; margin-left:10px; }
/* search box - same look as main site .ggsearch_input / .ggsearch_input_elem */
.mch-q { background:#aaa; color:#fff; border:0; height:35px; width:288px; padding:0 41px 0 19px; font:18px Arial,Helvetica,sans-serif; outline:0; }
.mch-search .mch-q { height:100%; }
.mch-q::placeholder { color:#eee; }
/* search button - same look as main site .search_button */
.mch-qbtn { position:absolute; right:10px; top:50%; transform:translateY(-50%); height:31px; width:31px; border:0; cursor:pointer; padding:0; background:url(/img/mobilesearch.png) 3px 0; background-size:31px 31px; }
.mch-msearch { display:none; }

.mch-menu { display:flex; align-items:center; }
#mycar .mch-brand .mc-brandsel-btn { border-radius:0; background:#a5a5a5; border:0; height:35px; color:#fff; }
#mycar .mch-brand .mc-brandsel-btn .mc-brandsel-name { color:#fff; }
#mycar .mch-brand .mc-brandsel-btn .mc-brandsel-ph { color:#eee; }
#mycar .mch-brand .mc-brandsel-panel .mc-brandsel-name { color:#000; }
#mycar .mch-brand .mc-brandsel-panel .mc-brandsel-ph { color:#333; }
/* menu items - same look as main site .top_menu_titles */
.mch-menu-item { display:block; font:700 12px Tahoma,Geneva,sans-serif; text-transform:uppercase; text-align:center; background:#ccc; height:37px; line-height:37px; padding:0 14px; }
#mycar .mch-menu-item, .mch-menu-item { color:#000 !important; }
.mch-menu-item:hover { text-decoration:underline; }
.mch-acct-mob { display:none; }
.mch-back { display:none; }
.mch-overlay { display:none; }

/* below 1336px the header switches to the main site mobile layout */
@media (max-width:1335px) {
    .mch-orange { display:none; }
    .mch-bar { position:fixed; top:0; left:0; right:0; z-index:1000; }
    body { padding-top:81px; }
    .mch-inner { flex-wrap:wrap; justify-content:flex-start; gap:0; padding:8px 10px 0; }
    .mch-ham { display:block; position:absolute; left:6px; top:8px; z-index:2; }
    .mch-logo { order:1; flex:0 0 100%; height:20px; margin:0 0 10px; padding:0; }
    .mch-logo img { position:absolute; left:50%; top:8px; transform:translateX(-50%); }
    .mch-brand { order:2; flex:0 0 100%; margin-top:6px; }
    .mch-brand .mc-brandsel, .mch-brand .mc-brandsel-btn { width:100%; }
    .mch-search { display:none; }
    .mch-msearch { display:block; }
    .mch-msearch form { display:flex; position:relative; }
    .mch-q { width:100%; font-size:14px; }
    /* slide-in drawer - same look as main site .menu */
    .mch-menu { position:fixed; top:0; left:-80%; width:80%; max-width:none; height:100vh; background:#fff; flex-direction:column; align-items:stretch; padding:25px; z-index:1002; transition:all .5s; overflow:auto; margin-left:0; }
    .mch-menu.open { left:0; -webkit-transition:all .5s; transition:all .5s; }
    /* back link that closes the drawer - same look as main site .backButton */
    .mch-back { display:block; font:700 13px Tahoma,Geneva,sans-serif; color:#000 !important; margin:0 0 12px; }
    .mch-menu-item { background:0 0; text-align:left; height:auto; line-height:1; padding:10px 0; }
    #mycar .mch-menu-item, .mch-menu-item { color:#444 !important; }
    .mch-menu-item:hover { color:#111 !important; font-size:11px; text-decoration:underline; }
    .mch-acct-mob { display:block; margin-top:8px; border-top:1px solid #000; padding-top:6px; }
    .mch-acct-mob a { display:block; font:700 12px Tahoma,Geneva,sans-serif; text-transform:uppercase; padding:10px 0; }
    #mycar .mch-acct-mob a, .mch-acct-mob a { color:#444 !important; }
    .mch-acct-mob a:hover { color:#111 !important; text-decoration:underline; }
    /* overlay - same look as main site .menuOverLay */
    .mch-overlay { display:block; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1001; opacity:0; visibility:hidden; transition:opacity .3s ease; }
    .mch-overlay.open { opacity:1; visibility:visible; }
}