/**
 * Mobile Drawer — App-style Off Canvas menu
 *
 * Uses Ratna Gems design tokens (--rg-*) for brand colors.
 * Pure white background in light mode; dark mode via design-tokens.
 *
 * @package Ratna_Gems
 */

/* -------------------------------------------------------------------------
   No outer paddings/margins around drawer; full-height chain to prevent
   white strip below on mobile (all wrappers must fill viewport)
   ------------------------------------------------------------------------- */
.ast-mobile-popup-content:has(.rg-drawer) {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
}

.ast-mobile-popup-content:has(.rg-drawer) .ast-builder-layout-element,
.ast-mobile-popup-content:has(.rg-drawer) .ast-header-html,
.ast-mobile-popup-content:has(.rg-drawer) .ast-builder-html-element {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    align-self: stretch !important;
    background: var(--rg-surface-page, #ffffff);
}

/* -------------------------------------------------------------------------
   Base container (lives inside .ast-mobile-popup-content)
   Fallbacks for when design-tokens.css is not loaded
   ------------------------------------------------------------------------- */
/* Popup inner must be flex column so content flex:1 works */
.ast-header-break-point .ast-mobile-popup-inner:has(.rg-drawer) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
}

.rg-drawer {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    background: var(--rg-surface-page, #ffffff);
    color: var(--rg-text-secondary, #1f2937);
}

.rg-drawer__header {
    flex-shrink: 0;
    padding: 20px 16px;
    text-align: center;
    border-bottom: 1px solid var(--rg-border-subtle, #d1d5db);
}

.rg-drawer__logo-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.rg-drawer__logo-link,
.rg-drawer__logo-text {
    display: inline-block;
    color: var(--rg-text-primary, #111827);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.25rem;
}

.rg-drawer__logo-link:hover,
.rg-drawer__logo-link:focus-visible,
.rg-drawer__logo-text:hover,
.rg-drawer__logo-text:focus-visible {
    color: var(--rg-link, #005f99);
    text-decoration: none;
}

/* Logo ~1.5x bigger: 180×42 */
.rg-drawer__logo-img {
    height: 42px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

/* -------------------------------------------------------------------------
   Body (scrollable)
   ------------------------------------------------------------------------- */
.rg-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
}

/* -------------------------------------------------------------------------
   Section headers (Shop Categories, Information)
   ------------------------------------------------------------------------- */
.rg-drawer__section {
    margin-bottom: 0;
}

.rg-drawer__section-title {
    margin: 0;
    padding: 12px 16px 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--rg-link, #005f99);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* -------------------------------------------------------------------------
   Category list
   ------------------------------------------------------------------------- */
.rg-drawer__category-list,
.rg-drawer__link-list,
.rg-drawer__sublink-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rg-drawer__category-item {
    margin: 0;
}

/* Expandable rows (category with children, More section) */
.rg-drawer__expand-trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    margin: 0;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    color: var(--rg-text-primary, #111827);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

.rg-drawer__expand-trigger:hover,
.rg-drawer__expand-trigger:focus-visible {
    background: var(--rg-surface-card-strong, #f1f5f9);
    color: var(--rg-link, #005f99);
    outline: none;
}

.rg-drawer__expand-trigger .rg-drawer__icon:last-child {
    margin-left: auto;
    flex-shrink: 0;
}

/* Expand content (hidden by default, shown via JS) */
.rg-drawer__expand-content {
    padding-bottom: 8px;
}

.rg-drawer__expand-content[hidden] {
    display: none !important;
}

.rg-drawer__expand-content:not([hidden]) {
    display: block;
}

/* Category trigger styling */
.rg-drawer__category-trigger {
    min-height: 52px;
}

/* Category thumbnails: 4:3 aspect ratio (matches product/category images) */
.rg-drawer__cat-thumb {
    flex-shrink: 0;
    width: 48px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
}

.rg-drawer__cat-thumb--small {
    width: 32px;
    height: 24px;
    border-radius: 4px;
}

.rg-drawer__cat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 36px;
    color: var(--rg-text-muted, #4b5563);
}

.rg-drawer__cat-icon--small {
    width: 32px;
    height: 24px;
}

.rg-drawer__cat-name {
    flex: 1;
    min-width: 0;
    text-transform: none;
}

/* Category link (no children) */
.rg-drawer__category-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    min-height: 52px;
    color: var(--rg-text-primary, #111827);
    font-weight: 500;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

.rg-drawer__category-link:hover,
.rg-drawer__category-link:focus-visible {
    background: var(--rg-surface-card-strong, #f1f5f9);
    color: var(--rg-link, #005f99);
}

.rg-drawer__category-link .rg-drawer__icon:last-child {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--rg-text-muted, #4b5563);
}

/* View All + subcategories */
.rg-drawer__view-all {
    display: block;
    padding: 10px 16px 10px 68px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--rg-link, #005f99);
    text-decoration: none;
    transition: color 0.15s ease;
}

.rg-drawer__view-all:hover,
.rg-drawer__view-all:focus-visible {
    color: var(--rg-link-hover, #003e6b);
    text-decoration: underline;
}

.rg-drawer__subcat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 68px;
    font-size: 0.9375rem;
    color: var(--rg-text-secondary, #1f2937);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

.rg-drawer__subcat:hover,
.rg-drawer__subcat:focus-visible {
    background: var(--rg-surface-card-strong, #f1f5f9);
    color: var(--rg-link, #005f99);
}

/* Information links */
.rg-drawer__link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    min-height: 52px;
    color: var(--rg-text-secondary, #1f2937);
    font-weight: 500;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

.rg-drawer__link:hover,
.rg-drawer__link:focus-visible {
    background: var(--rg-surface-card-strong, #f1f5f9);
    color: var(--rg-link, #005f99);
}

.rg-drawer__link--icon .rg-drawer__icon {
    flex-shrink: 0;
    color: var(--rg-text-muted, #4b5563);
}

/* More section sublinks */
.rg-drawer__sublink-list {
    padding-left: 50px;
}

.rg-drawer__sublink {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--rg-text-secondary, #1f2937);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

.rg-drawer__sublink:hover,
.rg-drawer__sublink:focus-visible {
    background: var(--rg-surface-card-strong, #f1f5f9);
    color: var(--rg-link, #005f99);
}

.rg-drawer__sublink .rg-drawer__icon {
    color: var(--rg-text-muted, #4b5563);
}

/* Divider */
.rg-drawer__divider {
    margin: 12px 16px;
    border: none;
    border-top: 1px solid var(--rg-border-subtle, #d1d5db);
}

/* Chevron rotates when expanded (.rg-drawer__category-trigger inherits this) */
.rg-drawer__expand-trigger[aria-expanded="true"] .rg-drawer__icon:last-child {
    transform: rotate(180deg);
}

/* -------------------------------------------------------------------------
   Device dark mode: same black background for drawer + popup inner
   Higher specificity to override Astra/design-tokens
   ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    body:not(.rg-force-light-mode) .ast-header-break-point .ast-mobile-popup-inner,
    body:not(.rg-force-light-mode) .ast-header-break-point .ast-mobile-popup-inner .ast-mobile-popup-header,
    body:not(.rg-force-light-mode) .ast-header-break-point .ast-mobile-popup-inner .ast-mobile-popup-content,
    body:not(.rg-force-light-mode) .ast-header-break-point .ast-mobile-popup-content .ast-builder-layout-element,
    body:not(.rg-force-light-mode) .ast-header-break-point .ast-mobile-popup-content .ast-header-html,
    body:not(.rg-force-light-mode) .ast-header-break-point .ast-mobile-popup-content .ast-builder-html-element,
    body:not(.rg-force-light-mode) .ast-header-break-point .ast-mobile-popup-inner .rg-drawer {
        background-color: #0b1220 !important;
        background: #0b1220 !important;
    }
}

body.rg-device-dark-mode .ast-header-break-point .ast-mobile-popup-inner,
body.rg-device-dark-mode .ast-header-break-point .ast-mobile-popup-inner .ast-mobile-popup-header,
body.rg-device-dark-mode .ast-header-break-point .ast-mobile-popup-inner .ast-mobile-popup-content,
body.rg-device-dark-mode .ast-header-break-point .ast-mobile-popup-content .ast-builder-layout-element,
body.rg-device-dark-mode .ast-header-break-point .ast-mobile-popup-content .ast-header-html,
body.rg-device-dark-mode .ast-header-break-point .ast-mobile-popup-content .ast-builder-html-element,
body.rg-device-dark-mode .ast-header-break-point .ast-mobile-popup-inner .rg-drawer,
body.astra-dark-mode-enable .ast-header-break-point .ast-mobile-popup-inner,
body.astra-dark-mode-enable .ast-header-break-point .ast-mobile-popup-inner .ast-mobile-popup-header,
body.astra-dark-mode-enable .ast-header-break-point .ast-mobile-popup-inner .ast-mobile-popup-content,
body.astra-dark-mode-enable .ast-header-break-point .ast-mobile-popup-content .ast-builder-layout-element,
body.astra-dark-mode-enable .ast-header-break-point .ast-mobile-popup-content .ast-header-html,
body.astra-dark-mode-enable .ast-header-break-point .ast-mobile-popup-content .ast-builder-html-element,
body.astra-dark-mode-enable .ast-header-break-point .ast-mobile-popup-inner .rg-drawer {
    background-color: #0b1220 !important;
    background: #0b1220 !important;
}

/* Logo visible on dark background (invert dark logos to light) */
@media (prefers-color-scheme: dark) {
    body:not(.rg-force-light-mode) .ast-mobile-popup-header .rg-drawer__logo-img {
        filter: brightness(0) invert(1);
    }
    body:not(.rg-force-light-mode) .ast-mobile-popup-header .rg-drawer__logo-text {
        color: #f8fafc !important;
    }
    body:not(.rg-force-light-mode) .ast-mobile-popup-header .rg-drawer__logo-link {
        color: #f8fafc !important;
    }
}

body.rg-device-dark-mode .ast-mobile-popup-header .rg-drawer__logo-img,
body.astra-dark-mode-enable .ast-mobile-popup-header .rg-drawer__logo-img {
    filter: brightness(0) invert(1);
}

body.rg-device-dark-mode .ast-mobile-popup-header .rg-drawer__logo-text,
body.rg-device-dark-mode .ast-mobile-popup-header .rg-drawer__logo-link,
body.astra-dark-mode-enable .ast-mobile-popup-header .rg-drawer__logo-text,
body.astra-dark-mode-enable .ast-mobile-popup-header .rg-drawer__logo-link {
    color: #f8fafc !important;
}

/* Header empty after logo moved: hide it */
.rg-drawer__header:empty {
    display: none;
}

/* Logo in ast-mobile-popup-header (moved via JS): centered, 1.25x bigger
   Logo is position:absolute (out of flow); close button is the only in-flow child.
   Use flex-end so the button stays right—center would wrongly center the button. */
.ast-header-break-point .ast-mobile-popup-header {
    position: relative;
    justify-content: flex-end;
}

.ast-header-break-point .ast-mobile-popup-header .rg-drawer__logo-block {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex: none;
    margin: 0;
    flex-direction: row;
    align-items: center;
}

.ast-header-break-point .ast-mobile-popup-header .rg-drawer__logo-img {
    height: 45px;
    max-width: 188px;
}

.ast-header-break-point .ast-mobile-popup-header .rg-drawer__logo-text {
    font-size: 1.25rem;
}