/* Roham pieces every header design shares: the mobile bar, the drawer host and
   the bottom navigation, in the colours chosen in Themes > Header. Light (the
   default) adds nothing. */
.roham-theme .chrome-mobile-bar[data-chrome-scheme]:not([data-chrome-scheme="light"]) .header-bottom{background:var(--chrome-h-bg,#fff);color:var(--chrome-h-text,#424750)}
.roham-theme .chrome-mobile-bar[data-chrome-scheme]:not([data-chrome-scheme="light"]) .header-bottom .search-box form{background:color-mix(in srgb,var(--chrome-h-text,#424750) 12%,var(--chrome-h-bg,#fff))!important}
.roham-theme .chrome-mobile-bar[data-chrome-scheme]:not([data-chrome-scheme="light"]) .header-bottom .search-box form input{color:var(--chrome-h-text,#424750)!important}
.roham-theme .chrome-mobile-bar[data-chrome-scheme]:not([data-chrome-scheme="light"]) .header-bottom .search-box form input::placeholder,
.roham-theme .chrome-mobile-bar[data-chrome-scheme]:not([data-chrome-scheme="light"]) .header-bottom .search-box form i{color:color-mix(in srgb,var(--chrome-h-text,#424750) 70%,transparent)!important}
.roham-theme .chrome-mobile-bar[data-chrome-scheme]:not([data-chrome-scheme="light"]) .roham-delivery-bar,
.roham-theme .chrome-mobile-bar[data-chrome-scheme]:not([data-chrome-scheme="light"]) .roham-delivery-trigger{background:var(--chrome-h-nav-bg,var(--chrome-h-bg,#fff));color:var(--chrome-h-nav-text,var(--chrome-h-text,#424750))!important;border-color:var(--chrome-h-border,#f0f0f1)}
.roham-theme .chrome-mobile-bar[data-chrome-scheme]:not([data-chrome-scheme="light"]) .roham-mheader-logo strong{color:var(--chrome-h-text,#424750)}
.roham-theme .roham-bottom-nav[data-chrome-scheme]:not([data-chrome-scheme="light"]) ul{background:color-mix(in srgb,var(--chrome-h-bg,#fff) 86%,transparent);border-color:color-mix(in srgb,var(--chrome-h-text,#424750) 18%,transparent);box-shadow:0 6px 24px rgba(15,23,42,.22)}
.roham-theme .roham-bottom-nav[data-chrome-scheme]:not([data-chrome-scheme="light"]) a,
.roham-theme .roham-bottom-nav[data-chrome-scheme]:not([data-chrome-scheme="light"]) .roham-bnav-ico{color:color-mix(in srgb,var(--chrome-h-text,#62666d) 80%,transparent)!important}
.roham-theme .roham-bottom-nav[data-chrome-scheme]:not([data-chrome-scheme="light"]) a.active,
.roham-theme .roham-bottom-nav[data-chrome-scheme]:not([data-chrome-scheme="light"]) a.active .roham-bnav-ico,
.roham-theme .roham-bottom-nav[data-chrome-scheme]:not([data-chrome-scheme="light"]) a.active .roham-bnav-label{color:var(--chrome-h-accent,var(--ds-color-primary))!important}
.roham-theme .chrome-mobile-bar[data-chrome-scheme]:not([data-chrome-scheme="light"]) .roham-delivery-trigger *{color:inherit!important}

/* The drawer every mobile menu design opens in: its frame, head, back and search. */
body.roham-theme.roham-mcat-open {
    overflow: hidden !important;
    touch-action: none;
}
.roham-mcat {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #fff;
}
.roham-mcat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
    border-bottom: 1px solid #f0f0f1;
    flex-shrink: 0;
    background: #fff;
}
.roham-mcat-back {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0c0c0c;
    font-size: 22px;
    flex-shrink: 0;
    cursor: pointer;
}
.roham-mcat-back:active {
    background: #f0f0f1;
}
.roham-mcat-search {
    flex: 1;
    min-width: 0;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: #f0f0f1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    color: #a1a3a8;
    font-size: 12px;
    cursor: pointer;
    text-align: right;
}
.roham-mcat-search i {
    font-size: 18px;
    color: #81858b;
    flex-shrink: 0;
}
.roham-mcat-search span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (min-width: 992px) {
.roham-mcat {
        display: none !important;
    }
}

/* Pages and extra links under the categories, in every drawer design. */
.chrome-mlinks{padding:14px 16px 4px}
.chrome-mlinks-title{margin:0 0 6px;font-size:12px;font-weight:700;color:#a1a3a8}
.chrome-mlinks ul{list-style:none;margin:0;padding:0}
.chrome-mlinks a{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:13px;color:#424750!important;text-decoration:none!important;border-bottom:1px solid #f5f5f6}
.chrome-mlinks a i{font-size:18px;color:#81858b}
.chrome-msg .chrome-mlinks{padding-inline:0}

/* Search as an icon button: shared by headers and the minimal footer. */
.roham-theme .chrome-icon-btn{width:42px;height:42px;border:0;border-radius:12px;background:transparent;color:var(--hb-text,#424750);display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease}
.roham-theme .chrome-icon-btn:hover,.roham-theme .chrome-icon-btn:focus-visible{background:color-mix(in srgb,var(--hb-text,#424750) 9%,transparent);color:var(--hb-accent,var(--ds-color-primary,#ef394e))}

/* ------------------------------------------------------------------
   Trust seals (e-Namad, Samandehi, payment badges), in every footer.
   The owner pastes the issuer's code as is: a link around an image, a
   bare image with onclick, wrappers around several. Wrappers are
   unwrapped and every seal becomes one tile of the same size, whatever
   size the issuer's image or inline style says. Doubled selectors beat
   the older .trust-symbol rules (v2/custom.css, roham-ui.css).
   ------------------------------------------------------------------ */
.roham-theme .chrome-trust-wrap{display:flex;flex-direction:column;gap:8px;min-width:0}
.roham-theme .chrome-trust-wrap--center{align-items:center;text-align:center}
.roham-theme .chrome-trust-wrap--end{align-items:flex-end}
.roham-theme .chrome-trust-title{font-size:12px;font-weight:700;color:var(--f-heading,#23254e)}
.roham-theme .chrome-trust.chrome-trust{--seal:76px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:0;justify-content:flex-start}
.roham-theme .chrome-trust-wrap--center .chrome-trust.chrome-trust{justify-content:center}
.roham-theme .chrome-trust-wrap--end .chrome-trust.chrome-trust{justify-content:flex-end}
.roham-theme .chrome-trust.chrome-trust--sm{--seal:56px;gap:8px}
.roham-theme .chrome-trust.chrome-trust--lg{--seal:92px;gap:12px}
/* Wrappers the issuers' snippets come in: their children are the seals. */
.roham-theme .chrome-trust.chrome-trust :is(p,div,span,center,section,figure):not(:has(> img:only-child)):not(:has(> iframe:only-child)){display:contents}
.roham-theme .chrome-trust.chrome-trust :is(br,script,style,noscript){display:none!important}
/* One tile per seal: a link (or wrapper) around an image or frame, or a bare image. */
.roham-theme .chrome-trust.chrome-trust :is(a,p,div,span,center,figure):has(> img:only-child, > iframe:only-child),
.roham-theme .chrome-trust.chrome-trust img:not(a img):not(:is(p,div,span,center,figure) > img:only-child){
    box-sizing:border-box!important;display:inline-grid!important;place-items:center;flex:0 0 auto;
    width:var(--seal)!important;height:var(--seal)!important;margin:0!important;padding:6px!important;
    background:#fff!important;border:1px solid rgba(17,24,39,.09)!important;border-radius:14px!important;
    box-shadow:0 1px 2px rgba(17,24,39,.04);overflow:hidden;cursor:pointer;
    transition:box-shadow .15s ease,transform .15s ease}
.roham-theme .chrome-trust.chrome-trust :is(a,p,div,span,center,figure):has(> img:only-child, > iframe:only-child):hover,
.roham-theme .chrome-trust.chrome-trust img:not(a img):hover{box-shadow:0 6px 16px rgba(17,24,39,.1);transform:translateY(-1px)}
.roham-theme .chrome-trust.chrome-trust :is(a,p,div,span,center,figure) > img:only-child{
    display:block!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;
    margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;object-fit:contain}
.roham-theme .chrome-trust.chrome-trust img:not(a img):not(:is(p,div,span,center,figure) > img:only-child){object-fit:contain}
.roham-theme .chrome-trust.chrome-trust iframe{width:100%!important;height:100%!important;border:0!important}
@media (max-width:991.98px){
    .roham-theme .chrome-trust-wrap{align-items:center;text-align:center}
    .roham-theme .chrome-trust.chrome-trust{--seal:68px;justify-content:center}
    .roham-theme .chrome-trust.chrome-trust--sm{--seal:52px}
}
@media (prefers-reduced-motion:reduce){
    .roham-theme .chrome-trust.chrome-trust *{transition:none!important}
}

/* ------------------------------------------------------------------
   Phone bottom bar: readable over anything.
   The bar is frosted glass floating over the page, so its contrast
   depends on what scrolls under it - a dark footer or banner made it
   unreadable. It is more opaque now, and chrome.js looks at what is
   under it (colour, gradient, picture) and switches it to dark glass
   over dark content (.is-over-dark) or to nearly solid over pictures
   (.is-over-media). Only for the light scheme: the dark and brand
   schemes are opaque already.
   ------------------------------------------------------------------ */
.roham-theme .roham-bottom-nav[data-chrome-scheme="light"] ul,
.roham-theme .roham-bottom-nav:not([data-chrome-scheme]) ul{
    background:rgba(255,255,255,.84);
    border-color:rgba(17,24,39,.08);
    box-shadow:0 8px 28px rgba(15,23,42,.14),0 1px 0 rgba(255,255,255,.7) inset;
    transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease}
.roham-theme .roham-bottom-nav a:not(.active){color:#5f636b!important}
.roham-theme .roham-bottom-nav a:not(.active) .roham-bnav-ico{color:#4b4f57}
.roham-theme .roham-bottom-nav a,.roham-theme .roham-bottom-nav .roham-bnav-ico{transition:color .25s ease,background .2s ease}
/* The active pill (its colour-mix in roham-ui.css does not parse). */
.roham-theme .roham-bottom-nav a.active .roham-bnav-ico{background:color-mix(in srgb,var(--ds-color-primary,#ef394e) 13%,transparent)}
.roham-theme .roham-bottom-nav.is-over-media[data-chrome-scheme="light"] ul,
.roham-theme .roham-bottom-nav.is-over-media:not([data-chrome-scheme]) ul{background:rgba(255,255,255,.94)}
.roham-theme .roham-bottom-nav.is-over-dark[data-chrome-scheme="light"] ul,
.roham-theme .roham-bottom-nav.is-over-dark:not([data-chrome-scheme]) ul{
    background:rgba(17,24,39,.72);border-color:rgba(255,255,255,.16);
    box-shadow:0 10px 30px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.08) inset}
.roham-theme .roham-bottom-nav.is-over-dark a,
.roham-theme .roham-bottom-nav.is-over-dark .roham-bnav-label,
.roham-theme .roham-bottom-nav.is-over-dark a .roham-bnav-ico{color:#e5e7eb!important}
.roham-theme .roham-bottom-nav.is-over-dark a.active,
.roham-theme .roham-bottom-nav.is-over-dark a.active .roham-bnav-label{color:#fff!important}
.roham-theme .roham-bottom-nav.is-over-dark a.active .roham-bnav-ico{background:rgba(255,255,255,.16);color:#fff}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .roham-theme .roham-bottom-nav ul{background:#fff!important}
    .roham-theme .roham-bottom-nav.is-over-dark ul{background:#111827!important}
}
@media (prefers-reduced-transparency:reduce){
    .roham-theme .roham-bottom-nav ul{background:#fff!important;-webkit-backdrop-filter:none;backdrop-filter:none}
    .roham-theme .roham-bottom-nav.is-over-dark ul{background:#111827!important}
}