/* =========================================
   SEARCH BOX (global component)
   ========================================= */
.search-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0, 0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 5000;
    display: flex; align-items: flex-start; justify-content: center;
    opacity: 0; pointer-events: none; transition: 0.3s ease; padding-top: 120px;
}
.search-overlay.active { opacity: 1; pointer-events: all; }
.search-box {
    width: 90%; max-width: 600px; background: #111; border: 1px solid #333;
    border-radius: 12px; padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    position: relative; display: flex; flex-direction: column;
}
.search-close-btn { position: absolute; top: 15px; right: 15px; font-size: 20px; color: #666; cursor: pointer; }
.search-close-btn:hover { color: #fff; }
.search-input-field {
    width: 100%; background: transparent; border: none; border-bottom: 1px solid #333;
    font-size: 18px; color: #fff; padding: 15px 0; outline: none; transition: 0.3s;
}
.search-input-field:focus { border-color: var(--accent-gold); }
.search-results-list {
    display: flex; flex-direction: column; gap: 10px; margin-top: 20px; width: 100%;
    max-height: 50vh; overflow-y: auto;
}
.s-item {
    display: flex; align-items: center; gap: 15px; padding: 10px; border-radius: 8px;
    border: 1px solid transparent; background: #0a0a0a; cursor: pointer; transition: 0.2s;
}
.s-item:hover { border-color: #333; background: #151515; }
.s-img { width: 50px; height: 50px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.s-info { flex: 1; }
.s-name { font-size: 14px; font-weight: 500; color: #fff; }
.s-price { font-size: 13px; color: var(--accent-gold); font-weight: 500; margin-top: 2px; }

/* =========================================
   AUTH MODAL (global component)
   ========================================= */
.login-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0, 0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    z-index: 6000; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: 0.3s;
}
.login-overlay.active { opacity: 1; pointer-events: all; }
.login-box {
    background: #111; border: 1px solid #333; padding: 30px; border-radius: 12px;
    width: 100%; max-width: 400px; position: relative; box-shadow: 0 30px 60px rgba(0,0,0,0.8);
}

.auth-tabs { display: flex; align-items: center; border-bottom: 1px solid #333; margin-bottom: 25px; gap: 20px; }
.auth-tab { font-size: 15px; font-weight: 500; color: #666; padding: 10px 0; cursor: pointer; position: relative; transition: 0.3s; }
.auth-tab:hover { color: #fff; }
.auth-tab.active { color: var(--accent-gold); }
.auth-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: var(--accent-gold); }

.auth-input { width: 100%; background: transparent; border: 1px solid #333; padding: 16px; color: #fff; border-radius: 6px; margin-bottom: 15px; font-size: 15px; transition: 0.3s; outline: none; }
.auth-input:focus { border-color: var(--accent-gold); }
.auth-error { color: #ef5350; font-size: 13px; margin: -8px 0 15px; min-height: 16px; }
.btn-auth { width: 100%; background: var(--accent-gold); color: #000; padding: 16px; border-radius: 6px; font-weight: 500; font-size: 16px; border: none; cursor: pointer; transition: 0.3s; margin-bottom: 15px; }
.btn-auth:hover { background: var(--accent-gold-hover); transform: translateY(-2px); }
.auth-forgot { display: block; text-align: center; color: var(--accent-gold); font-size: 13px; margin-bottom: 25px; text-decoration: none; transition: 0.3s; }
.auth-forgot:hover { color: #fff; }
.btn-social-auth { width: 100%; background: transparent; border: 1px solid #333; color: #fff; padding: 15px; border-radius: 6px; font-size: 15px; font-weight: 500; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 10px; cursor: pointer; transition: 0.3s; outline: none; }
.btn-social-auth i { position: absolute; left: 20px; font-size: 18px; color: #fff; }
.btn-social-auth:hover { background: #151515; border-color: #555; }

/* =========================================
   CART (global component)
   ========================================= */
.cart-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    z-index: 4000; opacity: 0; visibility: hidden; transition: 0.4s;
    display: flex; justify-content: center; align-items: flex-start;
    overflow-y: auto; padding: 60px 20px;
}
.cart-overlay.active { opacity: 1; visibility: visible; }
.cart-container {
    width: 100%; max-width: 800px; background: #101010; border: 1px solid #333;
    border-radius: 4px; box-shadow: 0 30px 60px rgba(0,0,0,0.9); position: relative;
    transform: translateY(20px); transition: 0.4s; display: flex; flex-direction: column; margin: auto 0;
}
.cart-overlay.active .cart-container { transform: translateY(0); }
.cart-header { padding: 25px 40px; border-bottom: 1px solid #222; display: flex; justify-content: space-between; align-items: center; }
.cart-title-l { font-size: 32px; font-weight: 400; color: #fff; letter-spacing: 1px; }
.cart-content { padding: 40px; }

.c-row { display: grid; grid-template-columns: 80px 1fr auto auto; grid-template-rows: auto auto; gap: 10px 20px; align-items: center; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #222; position: relative; user-select: none; -webkit-user-select: none; }
.c-img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; background: #000; grid-column: 1; grid-row: 1 / 3; align-self: center; }
.c-details { display: contents; }
.c-name { grid-column: 2 / 5; grid-row: 1; font-size: 16px; font-weight: 500; color: #fff; line-height: 1.4; padding-right: 30px; align-self: end; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; }
.c-weight-row { grid-column: 2; grid-row: 2; display: flex; gap: 5px; align-self: center; }
.c-price { grid-column: 4; grid-row: 2; min-width: 80px; text-align: right; align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.c-price-val { font-size: 18px; font-weight: 500; color: #fff; }
.c-tea-tag { font-size: 10px; font-weight: 500; color: var(--accent-gold); text-transform: uppercase; letter-spacing: 0.5px; cursor: default; }
.c-qty-wrapper { grid-column: 3; grid-row: 2; display: flex; align-items: center; gap: 8px; align-self: center; }
.c-qty-box { display: flex; align-items: center; border: 1px solid #333; border-radius: 4px; height: 36px; width: 100px; background: #0a0a0a; overflow: hidden; }
.c-divider { display: none; }
.cw-btn { font-size: 11px; padding: 6px 10px; border-radius: 4px; background: transparent; color: #777; border: 1px solid #333; cursor: pointer; transition: 0.2s; font-weight: 500; }
.cw-btn:hover { color: #fff; border-color: #555; }
.cw-btn.active { color: var(--accent-gold); border-color: var(--accent-gold); background: transparent; }
.c-q-btn { width: 30px; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #999; transition: 0.2s; font-size: 16px; background: transparent; }
.c-q-btn:hover { color: #fff; background: #1a1a1a; }
.c-q-val { flex: 1; text-align: center; color: #fff; font-size: 14px; font-weight: 500; height: 100%; display: flex; align-items: center; justify-content: center; }
.c-remove { position: absolute; top: 0; right: 0; color: #555; cursor: pointer; font-size: 16px; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; transition: 0.2s; }
.c-remove:hover { color: #ff4444; }

.cart-summary { display: flex; justify-content: flex-end; align-items: center; gap: 30px; margin-bottom: 40px; padding-top: 10px; }
.cs-label { font-size: 14px; text-transform: uppercase; color: #666; letter-spacing: 1px; }
.cs-val { font-size: 26px; font-weight: 500; color: #fff; }
.cart-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px; }
.btn-back { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 14px; cursor: pointer; transition: 0.3s; }
.btn-back:hover { color: var(--accent-gold); }
.btn-checkout { background: var(--accent-gold); color: #000; padding: 12px 24px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; border-radius: 2px; transition: 0.3s; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-checkout:hover { background: #fff; }
.btn-checkout.disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }

#checkoutForm { max-height: 0; overflow: hidden; opacity: 0; transition: 0.4s ease; margin-bottom: 0; background: #0a0a0a; padding: 0; border-radius: 4px; }
#checkoutForm.visible { max-height: 400px; opacity: 1; padding: 30px; margin-bottom: 30px; border: 1px solid #222; }
.input-capsule { width: 100%; background: transparent; border: 1px solid #333; padding: 16px; color: #fff; margin-bottom: 15px; border-radius: 6px; outline: none; font-size: 15px; transition: 0.3s; }
.input-capsule:focus { border-color: var(--accent-gold); }
.input-capsule.field-invalid { border-color: #d9534f; }

/* Phone: country-code select + digits-only input, side by side. The
   select carries data-digits on each <option> — cart-ui.js reads the
   selected option's data-digits to know exactly how many digits that
   country's number should have (varies per country, so this can't be a
   single fixed maxlength). */
.phone-input-row { display: flex; gap: 8px; margin-bottom: 15px; }
.phone-input-row .input-capsule { margin-bottom: 0; }
.phone-code-select {
    flex: 0 0 100px;
    width: auto;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 7px;
    padding-right: 26px;
}
.phone-code-select option { background: #0a0a0a; color: #fff; }
.phone-number-input { flex: 1; min-width: 0; }

/* Telegram: "@" rendered as a static, unremovable prefix (rather than
   trying to intercept backspace inside the value itself, which is fragile
   on mobile/paste) — the input only ever holds the bare username. The "@"
   and the input text are true flex siblings centered together by
   align-items: center, rather than an absolutely-positioned "@" centered
   independently against the input's own centered text — two independently
   centered boxes can drift apart because the "@" glyph's cap-height differs
   from the surrounding lowercase text, which read as "crooked". The row
   itself now carries the visual capsule (border/background/radius); the
   input sits flush inside it, borderless. */
.tg-input-row {
    display: flex;
    align-items: center;
    background: transparent;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 0 16px;
    margin-bottom: 15px;
    transition: 0.3s;
}
.tg-input-row:focus-within { border-color: var(--accent-gold); }
.tg-input-row:has(.tg-input.field-invalid) { border-color: #d9534f; }
.tg-prefix { color: #999; font-size: 15px; flex-shrink: 0; pointer-events: none; }
.tg-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 15px;
    padding: 16px 0 16px 2px;
    margin-bottom: 0;
}

/* CART RECOMMENDATIONS */
.cart-recommendations { margin-top: 20px; padding-top: 20px; border-top: 1px solid #222; }
.cart-recommendations h3 { color: #fff; font-size: 16px; margin-bottom: 15px; font-weight: 500; }
.reco-scroll-wrap { position: relative; display: flex; align-items: center; }
.reco-track { display: flex; align-items: stretch; gap: 15px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding-bottom: 15px; padding-top: 10px; touch-action: pan-x; }
.reco-track::-webkit-scrollbar { display: none; }

.reco-track .app-card { flex: 0 0 200px; height: auto; align-self: stretch; cursor: pointer; border-radius: 4px; }
.reco-track .app-card:hover { border-radius: 4px; border-color: var(--accent-gold); box-shadow: 0 5px 15px rgba(0,0,0,0.5); z-index: 1; }
.reco-track .hover-dropdown { display: none !important; }
.reco-track .mobile-cart-btn { display: flex !important; }
.reco-track .card-wishlist-btn { display: none !important; }

.reco-scroll-btn { position: absolute; z-index: 10; width: 32px; height: 32px; background: rgba(255,255,255,0.03); color: #999; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.25s; border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(4px); }
.reco-scroll-btn:hover { background: rgba(194,160,93,0.1); color: var(--accent-gold); border-color: var(--accent-gold); }

/* Mobile-only "this scrolls" hint is driven from JS (see startSwipeHint()
   in js/components/cart-ui.js) rather than a CSS transform: .reco-track is
   itself the overflow-x:auto scroll container, so transform-animating it
   just slides the already-visible cards sideways as one rigid block —
   the clipping edge moves with them, so the next card never actually
   comes into view. Real scrollBy() on the element's genuine scroll
   position is what's needed to reveal it, hence JS-driven native smooth
   scrolling instead of a keyframe animation here. */
.reco-left { left: -15px; }
.reco-right { right: -15px; }

/* =========================================
   MULTI-LEVEL MOBILE MENU OVERLAY (global component)
   ========================================= */
.mobile-menu-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0, 0.85); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    z-index: 8000; opacity: 0; pointer-events: none; transition: 0.3s ease;
}
.mobile-menu-overlay.active { opacity: 1; pointer-events: all; }
.mobile-menu-drawer { position: absolute; top: 0; left: 0; width: 360px; max-width: 85vw; height: 100vh; background: #0a0a0a; border-right: 1px solid #222; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; overflow: hidden; }
.mobile-menu-overlay.active .mobile-menu-drawer { transform: translateX(0); }
.mm-panel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0a0a0a; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); visibility: hidden; overflow: hidden; }
.mm-panel.active { transform: translateX(0); visibility: visible; }
.mm-panel.prev { transform: translateX(-30%); visibility: hidden; opacity: 0; }
.mm-header { display: flex; align-items: center; justify-content: center; position: relative; padding: 0 24px; border-bottom: 1px solid #1a1a1a; font-size: 16px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #fff; min-height: 70px; flex-shrink: 0; }
.mm-back { position: absolute; left: 24px; font-size: 20px; color: #999; cursor: pointer; padding: 10px; margin-left: -10px;}
.mm-list { padding: 0; flex-grow: 1; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.mm-item { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; color: #fff; font-size: 17px; border-bottom: 1px solid #151515; cursor: pointer; text-decoration: none; }
.mm-item:active { background: #111; }
.mm-item i.fa-chevron-right { font-size: 15px; color: #666; }