/* =================================================================
   PALAZZO AMAZIGH — booking-engine restyle
   Matches the brand identity of https://palazzoamazigh.it
   (fonts + colours taken from dist/tailwind.base.css)
   -----------------------------------------------------------------
   HOW TO USE
   Paste this whole block at the very END of
   https://resx.octorate.com/octobook/resources/reservation/css/reservation.min.css
   (the only file you can edit). It is appended last and uses
   !important + high specificity (#SiteMain / body), so it wins over
   the provider's theme2 stylesheets that load after it.

   FONTS
   La Luxes Serif + League Spartan are loaded straight from the main
   site. Their server already sends
   `Access-Control-Allow-Origin: https://book.octorate.com`,
   so the @font-face files load on the live booking page.

   WHAT IT DOES
   - Hides every room photo / slider / zoom trigger.
   - Re-skins header, cards, details, buttons & footer into the
     beige + teal-green + ocher boutique identity of the main site.
   ================================================================= */

/* ---------- brand fonts (from palazzoamazigh.it) ------------- */
@font-face{
    font-family:'La Luxes Serif';
    src:url('https://palazzoamazigh.it/themes/custom/palazzo_amazigh/assets/fonts/LaLuxesSerif.woff2') format('woff2');
    font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
    font-family:'League Spartan';
    src:url('https://palazzoamazigh.it/themes/custom/palazzo_amazigh/assets/fonts/LeagueSpartan-Regular.woff2') format('woff2');
    font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
    font-family:'League Spartan';
    src:url('https://palazzoamazigh.it/themes/custom/palazzo_amazigh/assets/fonts/LeagueSpartan-Medium.woff2') format('woff2');
    font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
    font-family:'League Spartan';
    src:url('https://palazzoamazigh.it/themes/custom/palazzo_amazigh/assets/fonts/LeagueSpartan-SemiBold.woff2') format('woff2');
    font-weight:600; font-style:normal; font-display:swap;
}

:root{
    --pz-bg:        #FBF8F4;  /* .bg-beige  — page          */
    --pz-surface:   #FFFFFF;  /* card                       */
    --pz-surface-2: #FBF8F4;  /* inset boxes (beige)        */
    --pz-ink:       #313536;  /* charcoal — primary text    */
    --pz-muted:     #5F6B69;  /* derived sage — body 2ndary */
    --pz-faint:     #8EA2A2;  /* sage — labels              */
    --pz-line:      #DBD7CF;  /* .bg-sand — hairline border */
    --pz-green:     #395D5A;  /* .bg-green — primary brand  */
    --pz-green-d:   #2C4A47;  /* green darker               */
    --pz-green-l:   #5A726E;  /* green lighter — button hover */
    --pz-ocher:     #C0976C;  /* .bg-ocher — accent         */
    --pz-ocher-d:   #A87E54;  /* ocher hover                */
    --pz-serif:     'La Luxes Serif', Georgia, 'Times New Roman', serif;
    --pz-sans:      'League Spartan', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- page shell --------------------------------------- */
/* keep the root at the browser default so 1rem === 16px (no 62.5% trick) */
html{ font-size: 100% !important; }
html body.SiteBackground,
html body{
    background: var(--pz-bg) !important;
    color: var(--pz-ink) !important;
    font-family: var(--pz-sans) !important;
    -webkit-font-smoothing: antialiased !important;
}
body #SiteMain.SiteMain{ background: transparent !important; box-shadow: none !important; }

/* force League Spartan everywhere text is set explicitly by the provider
   (PrimeFaces puts its own font on every .ui-widget; some buttons use "Mulish").
   Icon fonts (.fa / .ui-icon / .pi / flaticon) are NOT .ui-widget, so their
   glyph fonts are left intact. */
html body,
body .ui-widget,
body .ui-widget .ui-widget,
body .ui-widget input,
body .ui-widget select,
body .ui-widget textarea,
body .ui-widget button,
body .ui-inputfield,
body input, body select, body textarea, body button{
    font-family: var(--pz-sans) !important;
}
/* calendar day numbers use a provider font -> League Spartan */
#SiteMain .customDayCalendar .datetheme2 big,
#SiteMain section.room div.calendar ul li .datetheme2 big,
body .customDayCalendar .datetheme2 big,
body section.room div.calendar ul li .datetheme2 big{
    font-family: var(--pz-sans) !important;
}
/* room detail paragraphs -> default body font */
#SiteMain section.room div.details p,
body section.room div.details p{
    font-family: var(--pz-sans) !important;
}

/* ---------- room photos (visible — provider's native layout) - */
/* photos are shown again; provider keeps its photo + info layout */
#SiteMain section.room div.label{ display: none !important; }
/* kill the white shimmer "bar" that sweeps across the photo (.AnimBar::before) */
#SiteMain .AnimBar:before, .AnimBar:before{ content: none !important; display: none !important; animation: none !important; }

/* ---------- sticky header ------------------------------------ */
body header{ background: transparent !important; }
/* hide the sticky cart/amount panel entirely */
#SiteMain #stickyPanel, body #stickyPanel{ display: none !important; }
#SiteMain .text1SubHeader   { color: var(--pz-muted) !important; font-size: 1rem !important; }
#SiteMain .textBoldSubHeader{ color: var(--pz-ink) !important; font-weight: 600 !important; }

/* ---------- results container -------------------------------- */
#SiteMain .SiteContent{ padding-top: 1.25rem !important; }
#SiteMain .HotelResults{ max-width: 1080px !important; margin: 0 auto !important; padding: 1.5rem 1.25rem 0 !important; }

/* ---------- room card ---------------------------------------- */
#SiteMain .RoomSection{
    background: var(--pz-surface) !important;
    border: 1px solid var(--pz-line) !important; border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(57, 93, 90, .06) !important;
    overflow: hidden !important; margin: 0 0 1.75rem !important;
    transition: box-shadow .25s ease, transform .25s ease !important;
}
#SiteMain .RoomSection.BoxHover:hover{
    box-shadow: 0 12px 34px rgba(57, 93, 90, .12) !important; transform: translateY(-2px) !important;
}
#SiteMain section.room{ padding: 0 !important; margin: 0 !important; }
#SiteMain .RoomHeader{ padding: 0 !important; border: none !important; }
#SiteMain .RoomInfo,
#SiteMain .RoomInfo.Padding20{ padding: 2rem 2.25rem 1.25rem !important; }

/* title + size line */
#SiteMain .RoomInfo h1{
    font-family: var(--pz-serif) !important; font-size: 2.7rem !important;
    font-weight: normal !important; line-height: 1.05 !important;
    letter-spacing: .5px !important; color: var(--pz-green) !important;
    margin: 0 0 .35rem !important; text-transform: none !important;
}
#SiteMain .RoomInfo > svg{ vertical-align: middle !important; opacity: .55 !important; }
#SiteMain .RoomInfo h1 + svg + span{ color: var(--pz-muted) !important; font-size: 1rem !important; }

/* amenities row -> pill chips, icons hidden */
#SiteMain .RoomInfo .DispFlex.FlexWrap{
    gap: .6rem !important; margin-top: 1rem !important;
}
#SiteMain .RoomInfo .DispFlex.FlexWrap > span{
    background: var(--pz-surface-2) !important; border: 1px solid var(--pz-line) !important;
    border-radius: 999px !important; padding: .5rem 1rem !important;
    font-size: 1rem !important; line-height: 1.3 !important; color: var(--pz-ink) !important;
    margin: 0 !important; gap: 0 !important;
}
#SiteMain .RoomInfo .DispFlex.FlexWrap > span object{ display: none !important; }

/* short (teaser) description */
#SiteMain .shortDesc,
#SiteMain .shortDesc *{ color: var(--pz-muted) !important; font-size: 1rem !important; line-height: 1.6 !important; background: transparent !important; }
#SiteMain .shortDesc{ margin-top: 1rem !important; }

/* expanded description / features */
#SiteMain .RoomBottom.roominfo,
#SiteMain .RoomBottom.roominfo *{ color: var(--pz-muted) !important; line-height: 1.7 !important; background: transparent !important; }
#SiteMain .RoomBottom.roominfo{ font-size: 1rem !important; margin-top: .5rem !important; }
#SiteMain .RoomBottom strong, #SiteMain .RoomBottom b{ color: var(--pz-ink) !important; }
#SiteMain .RoomBottom ul{ padding-left: 1.2rem !important; margin: .5rem 0 !important; }
#SiteMain .RoomBottom li{ margin: .25rem 0 !important; }
#SiteMain .RoomBottom .fa-map-marker{ color: var(--pz-ocher) !important; }

/* show / hide details links */
#SiteMain .getinfo{ margin: 1rem 0 .25rem !important; }
#SiteMain .getinfo a.Blue,
#SiteMain a.ShowDetails,
#SiteMain a.HideDetails{
    color: var(--pz-ocher) !important; font-weight: 500 !important; font-size: 1rem !important;
    text-decoration: none !important; cursor: pointer !important;
    border-bottom: 1px solid rgba(192, 151, 108, .4) !important; padding-bottom: 1px !important;
}
#SiteMain .getinfo a.Blue:hover,
#SiteMain a.ShowDetails:hover,
#SiteMain a.HideDetails:hover{ color: var(--pz-ocher-d) !important; border-bottom-color: var(--pz-ocher-d) !important; }

/* ---------- check-in / out + guest / policy boxes ------------ */
#SiteMain .view{ margin-top: 1.4rem !important; }
#SiteMain .view .flex{ gap: .75rem !important; }
#SiteMain .box{
    background: var(--pz-surface-2) !important; border: 1px solid var(--pz-line) !important;
    border-radius: 12px !important; padding: .95rem 1.15rem !important; box-shadow: none !important;
}
#SiteMain .box h6,
#SiteMain h6{
    font-family: var(--pz-sans) !important; text-transform: uppercase !important;
    letter-spacing: 1.6px !important; font-size: 1rem !important; font-weight: 600 !important;
    color: var(--pz-faint) !important; margin: 0 0 .35rem !important;
}
#SiteMain .box h6.red{ color: var(--pz-ocher) !important; }
/* hide the "Room only" detail box */
#SiteMain #otherDetail .box.size,
#SiteMain .view .box.size{ display: none !important; }
/* big check-in/out date numbers — scoped to .view so cart/payment .box are untouched */
#SiteMain .view .box strong{
    font-family: var(--pz-sans) !important; font-size: 1.85rem !important;
    font-weight: 600 !important; color: var(--pz-ink) !important; line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
}
#SiteMain .view .box p{ color: var(--pz-faint) !important; font-size: 1rem !important; margin: .15rem 0 0 !important; }
#SiteMain .view .box svg, #SiteMain .view .box svg use{ fill: var(--pz-green) !important; opacity: .9 !important; }

/* ---------- availability / "not available" footer of card ---- */
#SiteMain .RoomSection .details > .PriceChange{
    display: block !important; margin: .5rem 0 0 !important;
    padding: 1.25rem 2.25rem 2rem !important;
    border-top: 1px solid var(--pz-line) !important; background: transparent !important;
}
#SiteMain .RoomSection .details > .PriceChange > .PriceChange{
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    flex-wrap: wrap !important; gap: 1.25rem !important; width: 100% !important;
}
#SiteMain .offert{ flex: 1 1 auto !important; }
#SiteMain .offert .box{ background: transparent !important; border: none !important; padding: 0 !important; text-align: left !important; }
#SiteMain .offert .Orange{
    color: var(--pz-ocher) !important; font-family: var(--pz-serif) !important;
    font-size: 1.6rem !important; font-weight: normal !important;
}
#SiteMain .offert .Gray{ color: var(--pz-faint) !important; }
#SiteMain .offert .MarTop10{ color: var(--pz-muted) !important; font-size: 1rem !important; }

/* ---------- buttons ------------------------------------------ */
/* one consistent pill: brand green, white text, lighter-green on hover.
   Overrides the provider's bright-green fill, dark border, the inner
   span.ui-button-text background, and the .BounceColor ::before overlay. */
#SiteMain .customButtonGreenOffert,
#SiteMain .customButtonBlueOffert,
#SiteMain .customButtonGreen,
#SiteMain .RoomSection button.ui-button,
#SiteMain .offert .button,
#SiteMain #confirmButton2,
#SiteMain .confirm button.button,
#SiteMain .BounceColor,
body .ui-dialog .customButtonGreen,
body .ui-dialog .BounceColor{
    background: var(--pz-green) !important; background-color: var(--pz-green) !important;
    background-image: none !important; border: none !important; color: #fff !important;
    font-family: var(--pz-sans) !important; font-weight: 600 !important;
    letter-spacing: 1.2px !important; text-transform: uppercase !important; font-size: 1rem !important;
    width: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
    padding: .95rem 2.25rem !important; margin: 0 !important; border-radius: 999px !important; overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(57, 93, 90, .2) !important; cursor: pointer !important;
    transition: background-color .25s ease, transform .2s ease, box-shadow .2s ease !important;
}
/* inner text span (provider repeats the bright-green bg here) */
#SiteMain .customButtonGreenOffert .ui-button-text,
#SiteMain .customButtonBlueOffert .ui-button-text,
#SiteMain .customButtonGreen .ui-button-text,
#SiteMain .RoomSection button.ui-button .ui-button-text,
#SiteMain .offert .button .ui-button-text,
#SiteMain #confirmButton2 .ui-button-text,
#SiteMain .BounceColor .ui-button-text,
body .ui-dialog .ui-button .ui-button-text{
    background: transparent !important; background-color: transparent !important;
    border: none !important; color: #fff !important;
}
/* kill the BounceColor / BounceColorInverted ::before sweep overlay */
#SiteMain .BounceColor:before, #SiteMain .BounceColor .ui-button-text:before,
#SiteMain .BounceColorInverted:before, #SiteMain .BounceColorInverted .ui-button-text:before,
body .ui-dialog .BounceColor:before, body .ui-dialog .BounceColor .ui-button-text:before,
body .ui-dialog .BounceColorInverted:before, body .ui-dialog .BounceColorInverted .ui-button-text:before{
    content: none !important; display: none !important; transform: scaleX(0) !important; background: transparent !important;
}
/* hover -> lighter green (incl. PrimeFaces .ui-state-hover) */
#SiteMain .customButtonGreenOffert:hover, #SiteMain .customButtonGreenOffert.ui-state-hover,
#SiteMain .customButtonBlueOffert:hover, #SiteMain .customButtonBlueOffert.ui-state-hover,
#SiteMain .customButtonGreen:hover, #SiteMain .customButtonGreen.ui-state-hover,
#SiteMain .RoomSection button.ui-button:hover,
#SiteMain .offert .button:hover,
#SiteMain #confirmButton2:hover,
#SiteMain .confirm button.button:hover,
#SiteMain .BounceColor:hover, #SiteMain .BounceColor.ui-state-hover,
body .ui-dialog .customButtonGreen:hover, body .ui-dialog .BounceColor:hover{
    background: var(--pz-green-l) !important; background-color: var(--pz-green-l) !important;
    color: #fff !important; transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(57, 93, 90, .28) !important;
}
#SiteMain .customButtonGreenOffert:hover .ui-button-text, #SiteMain .customButtonGreenOffert.ui-state-hover .ui-button-text,
#SiteMain .BounceColor:hover .ui-button-text, #SiteMain .BounceColor.ui-state-hover .ui-button-text,
#SiteMain #confirmButton2:hover .ui-button-text{
    background: transparent !important; background-color: transparent !important; color: #fff !important;
}

/* secondary / grey button (e.g. dialog "Close", BounceColorInverted) */
body .ui-dialog .customButtonGrey, body .ui-dialog .BounceColorInverted{
    background: var(--pz-surface-2) !important; background-color: var(--pz-surface-2) !important;
    color: var(--pz-ink) !important; border: 1px solid var(--pz-line) !important; border-radius: 999px !important;
    box-shadow: none !important; text-transform: uppercase !important; letter-spacing: 1.2px !important;
    font-size: 1rem !important; padding: .95rem 2.25rem !important; font-weight: 600 !important; overflow: hidden !important;
}
body .ui-dialog .customButtonGrey .ui-button-text, body .ui-dialog .BounceColorInverted .ui-button-text{
    background: transparent !important; background-color: transparent !important; color: var(--pz-ink) !important;
}
body .ui-dialog .customButtonGrey:hover, body .ui-dialog .BounceColorInverted:hover{ background: var(--pz-line) !important; background-color: var(--pz-line) !important; }

/* ---------- confirmation dialog ------------------------------ */
body .ui-dialog{
    border: 1px solid var(--pz-line) !important; border-radius: 16px !important;
    box-shadow: 0 18px 50px rgba(49, 53, 54, .2) !important;
}
body .ui-dialog .ui-dialog-titlebar{
    background: var(--pz-surface) !important; border: none !important;
    border-bottom: 1px solid var(--pz-line) !important;
}
body .ui-dialog .ui-dialog-title,
body .ui-dialog h1{ font-family: var(--pz-serif) !important; color: var(--pz-green) !important; font-weight: normal !important; }

/* ---------- back-to-top button ------------------------------- */
body #toTop{
    background: var(--pz-green) !important; color: #fff !important; border-radius: 50% !important;
    width: 42px !important; height: 42px !important; line-height: 42px !important;
    box-shadow: 0 4px 14px rgba(57, 93, 90, .3) !important;
}

/* ---------- footer ------------------------------------------- */
body footer{ background: transparent !important; padding: 2.5rem 1rem 3rem !important; text-align: center !important; color: var(--pz-faint) !important; }
body footer p{ color: var(--pz-faint) !important; font-size: 1rem !important; margin: .2rem 0 !important; }
body footer p.bold{ font-family: var(--pz-serif) !important; font-size: 1.3rem !important; font-weight: normal !important; color: var(--pz-green) !important; }


/* =================================================================
   CHECKOUT / CONFIRM PAGE (cart, guest list, extras, payment,
   confirm reservation) — removes the orange/blue/red provider colours
   ================================================================= */

/* recolour the provider's orange & blue helper classes site-wide */
#SiteMain .Orange{ color: var(--pz-ocher-d) !important; }
#SiteMain .Blue, #SiteMain a.ui-link, #SiteMain .help{ color: var(--pz-ocher) !important; }
#SiteMain a.ui-link:hover, #SiteMain .help:hover{ color: var(--pz-ocher-d) !important; }

/* each checkout step becomes a calm white card on the beige page */
#SiteMain section.checkout{
    background: transparent !important; border: none !important;
    max-width: 1080px !important; margin: 1.5rem auto !important; padding: 0 1.25rem !important;
}
#SiteMain section.checkout > .content{
    background: var(--pz-surface) !important; border: 1px solid var(--pz-line) !important;
    border-radius: 16px !important; padding: 2rem 2.25rem !important;
    box-shadow: 0 6px 24px rgba(57, 93, 90, .06) !important;
}
/* section headings — La Luxes Serif, brand green */
#SiteMain section.checkout h1{
    font-family: var(--pz-serif) !important; font-weight: normal !important;
    font-size: 2.1rem !important; line-height: 1.1 !important; letter-spacing: .5px !important;
    color: var(--pz-green) !important; margin: 0 0 .35rem !important; text-transform: none !important;
}
#SiteMain section.checkout > .content > p,
#SiteMain section.checkout .content > p{ color: var(--pz-muted) !important; }

/* Guest List / Guest Information +/- counter buttons */
#SiteMain section.guest .ui-button.ui-button-icon-only,
#SiteMain .ui-spinner-button{
    background: var(--pz-green) !important; color: #fff !important;
    border: none !important; border-radius: 8px !important; box-shadow: none !important;
}
#SiteMain section.guest .ui-button.ui-button-icon-only:hover,
#SiteMain .ui-spinner-button:hover{ background: var(--pz-green-d) !important; }
#SiteMain section.guest .ui-button.ui-button-icon-only .ui-icon{ color: #fff !important; }
#SiteMain .ui-inputnumber input, #SiteMain .ui-spinner-input{
    border: 1px solid var(--pz-line) !important; border-radius: 8px !important; color: var(--pz-ink) !important;
}

/* Extras accordion — red bar becomes brand green */
#SiteMain .CustomAccordionPanel .ui-accordion-header,
#SiteMain .ui-accordion-header.ui-state-active{
    background: var(--pz-green) !important; background-image: none !important;
    color: #fff !important; border: none !important; border-radius: 10px !important;
}
#SiteMain .ui-accordion-header .ui-icon, #SiteMain .ui-accordion-header .filterBrt{ color: #fff !important; }
#SiteMain .ui-accordion-content{
    background: var(--pz-surface-2) !important; border: 1px solid var(--pz-line) !important;
    border-top: none !important; color: var(--pz-muted) !important;
    border-radius: 0 0 10px 10px !important;
}

/* google / secondary outline button */
#SiteMain .OrangeButton{
    background: transparent !important; border: 1px solid var(--pz-ocher) !important;
    color: var(--pz-ocher-d) !important; border-radius: 10px !important; box-shadow: none !important;
    text-transform: none !important;
}
#SiteMain .OrangeButton .ui-button-text, #SiteMain .OrangeButton .ui-icon{ color: var(--pz-ocher-d) !important; }
#SiteMain .OrangeButton .fa{ color: var(--pz-ocher-d) !important; }
/* hide the "Use Google to fill the data" button */
#SiteMain #googleSignIn, body #googleSignIn{ display: none !important; }

/* coupon arrow / generic green button -> brand green */
#SiteMain .GreenButton, #SiteMain .Green{ background: var(--pz-green) !important; color: #fff !important; }

/* form inputs (Guest Information) */
#SiteMain .customInput,
#SiteMain .ui-inputtext,
#SiteMain .ui-selectonemenu{
    background: #fff !important; border: 1px solid var(--pz-line) !important;
    border-radius: 8px !important; color: var(--pz-ink) !important; box-shadow: none !important;
}
#SiteMain .customInput:focus,
#SiteMain .ui-inputtext:focus,
#SiteMain .ui-selectonemenu.ui-state-focus{
    border-color: var(--pz-green) !important; box-shadow: 0 0 0 2px rgba(57, 93, 90, .15) !important;
}
#SiteMain .ui-outputlabel, #SiteMain .group label{ color: var(--pz-muted) !important; }
#SiteMain .ui-outputlabel sup, #SiteMain .group sup{ color: var(--pz-ocher) !important; }

/* radio buttons (payment mode) + privacy checkbox -> brand green */
#SiteMain .ui-radiobutton-box.ui-state-active,
#SiteMain .ui-chkbox-box.ui-state-active{
    background: var(--pz-green) !important; border-color: var(--pz-green) !important;
}
#SiteMain .ui-radiobutton-box.ui-state-active .ui-icon,
#SiteMain .ui-chkbox-box.ui-state-active .ui-icon{ color: #fff !important; background: var(--pz-green) !important; }
#SiteMain .ui-radiobutton-box, #SiteMain .ui-chkbox-box{ border: 1px solid var(--pz-line) !important; }
/* selected payment tile */
#SiteMain .payments label.box{ border: 1px solid var(--pz-line) !important; }
/* hide the big decorative credit-card background watermark */
#SiteMain section.checkout svg.backgraound,
#SiteMain section.checkout svg.background,
section.checkout svg.backgraound,
section.checkout svg.background{ display: none !important; }

/* (confirm-reservation button is handled by the unified pill button rule above) */

/* cart-summary panels (sidebar + sticky) */
#SiteMain .CartSummaryItemsExternalRow,
#SiteMain .total > .box{
    background: var(--pz-surface-2) !important; border: 1px solid var(--pz-line) !important;
    border-radius: 12px !important;
}
#SiteMain .CartSummaryItems strong, #SiteMain .total strong{ color: var(--pz-ink) !important; }
#SiteMain .CartSummaryItems .Leaden, #SiteMain .total .Leaden{ color: var(--pz-faint) !important; }

/* ---------- dropdown widgets (SelectOneMenu) ----------------- */
/* closed box + trigger (lives inside #SiteMain) */
#SiteMain .ui-selectonemenu{
    background: #fff !important; border: 1px solid var(--pz-line) !important;
    border-radius: 8px !important; box-shadow: none !important; overflow: hidden !important;
}
#SiteMain .ui-selectonemenu .ui-selectonemenu-label{
    color: var(--pz-ink) !important; font-family: var(--pz-sans) !important;
    font-size: 1rem !important; padding: .65rem .85rem !important; border: none !important;
}
#SiteMain .ui-selectonemenu .ui-selectonemenu-trigger{
    background: var(--pz-surface-2) !important; color: var(--pz-muted) !important;
    border: none !important; border-left: 1px solid var(--pz-line) !important; width: 2.4rem !important;
}
#SiteMain .ui-selectonemenu.ui-state-focus{
    border-color: var(--pz-green) !important; box-shadow: 0 0 0 2px rgba(57, 93, 90, .15) !important;
}

/* the OPEN overlay panel is appended to <body> — do NOT scope to #SiteMain */
.ui-selectonemenu-panel{
    background: #fff !important; border: 1px solid var(--pz-line) !important;
    border-radius: 10px !important; box-shadow: 0 12px 32px rgba(49, 53, 54, .16) !important;
    overflow: hidden !important; padding: .25rem !important;
}
.ui-selectonemenu-panel .ui-selectonemenu-item,
.ui-selectonemenu-panel .ui-selectonemenu-list .ui-selectonemenu-item{
    color: var(--pz-ink) !important; background: #fff !important;
    font-family: var(--pz-sans) !important; font-size: 1rem !important;
    padding: .6rem .85rem !important; margin: 0 !important; border: none !important; border-radius: 7px !important;
}
/* selected + hovered item -> brand green (was red) */
.ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-highlight,
.ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-active,
.ui-selectonemenu-panel .ui-selectonemenu-item:hover,
.ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-hover{
    background: var(--pz-green) !important; color: #fff !important;
}

/* phone-prefix country picker (table layout + flags) -> simple clean menu */
/* filter box at the top of the panel */
.ui-selectonemenu-panel .ui-selectonemenu-filter-container{ padding: .4rem !important; }
.ui-selectonemenu-panel .ui-selectonemenu-filter{
    width: 100% !important; border: 1px solid var(--pz-line) !important; border-radius: 8px !important;
    background: #fff !important; color: var(--pz-ink) !important; font-size: 1rem !important;
    padding: .55rem .75rem .55rem 2rem !important; box-shadow: none !important;
}
.ui-selectonemenu-panel .ui-selectonemenu-filter-container .ui-icon-search{ color: var(--pz-faint) !important; }
/* flat table rows, normal height, hairline separators */
.ui-selectonemenu-panel .ui-selectonemenu-table,
.ui-selectonemenu-panel .ui-selectonemenu-table tbody{ background: #fff !important; border: none !important; }
.ui-selectonemenu-panel .ui-selectonemenu-row{ background: #fff !important; border: none !important; }
.ui-selectonemenu-panel .ui-selectonemenu-row td{
    background: transparent !important; border: none !important;
    padding: .45rem .7rem !important; vertical-align: middle !important;
    color: var(--pz-ink) !important; font-size: 1rem !important; line-height: 1.3 !important; text-align: left !important;
}
/* shrink the giant 48px flag down to a small inline chip */
.ui-selectonemenu-panel .ui-selectonemenu-row .fi{
    width: 22px !important; height: 16px !important; font-size: 0 !important;
    border-radius: 2px !important; display: inline-block !important; vertical-align: middle !important;
}
.ui-selectonemenu-panel .ui-selectonemenu-row td:first-child{ width: 34px !important; padding-right: 0 !important; }
/* selected / hovered row -> brand green (row + its cells), was red */
.ui-selectonemenu-panel .ui-selectonemenu-row.ui-state-highlight,
.ui-selectonemenu-panel .ui-selectonemenu-row.ui-state-active,
.ui-selectonemenu-panel .ui-selectonemenu-row:hover,
.ui-selectonemenu-panel .ui-selectonemenu-row.ui-state-hover,
.ui-selectonemenu-panel .ui-selectonemenu-row.ui-state-highlight td,
.ui-selectonemenu-panel .ui-selectonemenu-row.ui-state-active td,
.ui-selectonemenu-panel .ui-selectonemenu-row:hover td,
.ui-selectonemenu-panel .ui-selectonemenu-row.ui-state-hover td{
    background: var(--pz-green) !important; color: #fff !important;
}

/* ---------- always hide the bottom notification bar ---------- */
body .ui-notificationbar,
.ui-notificationbar{ display: none !important; }