/* Customer storefront visual layer — intentionally presentation-only. */
:root { --brand: #f45472; --blush: #ffd6e6; --ink: #272126; --paper: #fffafb; --line: rgba(244,84,114,.16); }
html { background: var(--paper); }
body { color: var(--ink); background: var(--paper); line-height: 1.65; }
body, button, input, select, textarea { font-family: "Inter", sans-serif; }
html[lang="ar"] body, html[lang="ar"] button, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea { font-family: "Cairo", sans-serif; }

/* Navigation */
.navbar.light-bg { min-height: 78px; padding: .4rem clamp(1rem,4vw,4.5rem)!important; background: rgba(255,214,230,.94)!important; box-shadow: 0 7px 24px rgba(99,35,51,.09); position: relative; z-index: 20; }
.navbar-brand img { width: 78px!important; height: auto; transition: transform .25s ease; }
.navbar-brand:hover img { transform: scale(1.04); }
.top-nav-link { border: 0!important; color: var(--brand)!important; font-weight: 700; padding: .65rem .8rem!important; position: relative; transition: color .2s ease, transform .2s ease; }
.top-nav-link::after { content: ""; position:absolute; height:2px; bottom:4px; left:.8rem; right:.8rem; background:var(--brand); transform:scaleX(0); transition:transform .22s ease; }
.top-nav-link:hover { color: var(--brand)!important; transform:translateY(-1px); }
.top-nav-link:hover::after { transform:scaleX(1); }
.circle { background: var(--brand); color:#fff; width:18px; height:18px; top:5px; right:0; box-shadow: 0 2px 6px rgba(244,84,114,.35); }
.circle p { margin:0; line-height:18px; text-align:center; }
.lang-button { width:88px; border-color:var(--brand); padding:.18rem .45rem; background:#fff; box-shadow:0 3px 10px rgba(244,84,114,.12); }
.lang-text { font-size:.8rem; line-height:1.6; }
.navbar-toggler { border: 1px solid rgba(244,84,114,.35)!important; border-radius:10px; padding:.45rem .55rem; }

/* Typography, controls and reusable surfaces */
.modern-font, .header-section { letter-spacing: -.02em; }
.header-section { color:var(--brand); font-size:clamp(2rem,3.4vw,3rem); font-style:normal; margin-bottom:1.5rem; }
.header-section::after { content:""; display:block; width:42px; height:3px; background:var(--brand); border-radius:99px; margin:.35rem auto 0; }
.btn { border-radius:12px; font-weight:700; padding:.65rem 1.15rem; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform:translateY(-2px); box-shadow:0 9px 18px rgba(244,84,114,.23)!important; }
.dark-bg, .btn.dark-bg { background:#f45472!important; }
.form-control, .custom-select, .bootstrap-select .dropdown-toggle { min-height:46px; border:1px solid var(--line)!important; border-radius:11px!important; background:#fff!important; box-shadow:none!important; padding:.65rem .9rem; }
.form-control:focus, .custom-select:focus, .bootstrap-select .dropdown-toggle:focus { border-color:var(--brand)!important; box-shadow:0 0 0 .2rem rgba(244,84,114,.13)!important; }
.card, .modal-content { border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 30px rgba(73,25,40,.07); overflow:hidden; }

/* Catalog cards */
.shop-container { max-width:1280px; }
.shop-card { width:17.5rem; margin:12px; border:1px solid var(--line)!important; border-radius:18px!important; background:#fff; box-shadow:0 7px 20px rgba(67,31,42,.06); transition:transform .25s ease, box-shadow .25s ease; }
.shop-card:hover { top:auto; transform:translateY(-7px); box-shadow:0 16px 32px rgba(67,31,42,.14); }
.card-bg { height:245px; max-height:none; padding:22px; object-fit:contain; background:radial-gradient(circle at 50% 35%, #fff 25%, var(--blush)); }
.shop-card .card-body { min-height:150px; }
.shop-card .btn { border-radius:0; padding:.72rem; }
.card-name { font-size:1rem; font-weight:800; color:var(--brand); margin:.15rem 0; }
.card-text { font-size:.84rem; color:#675b61; line-height:1.55; }
.card-heart { z-index:2; top:12px; right:13px; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--brand); box-shadow:0 3px 12px rgba(67,31,42,.12); }
.sell { top:17px; left:-41px; z-index:1; padding:4px 46px; font-size:.76rem; font-weight:800; box-shadow:0 3px 8px rgba(67,31,42,.12); }
.color-card { bottom:160px; right:13px; padding:5px; background:rgba(255,255,255,.82); border-radius:16px; }
.icon-background { width:128px; height:128px; padding:12px; display:grid; place-items:center; background:#fff; box-shadow:0 7px 20px rgba(67,31,42,.08); transition:transform .25s ease, background .25s ease; }
.icon-background img { object-fit:cover; }
.icon-background:hover { background:var(--blush); transform:translateY(-4px); }
.left-scroll, .right-scroll { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:#fff; box-shadow:0 5px 15px rgba(67,31,42,.14); font-size:1.55rem; }
.owl-theme .owl-dots .owl-dot span { background:var(--blush); }
.owl-theme .owl-dots .owl-dot.active span { background:var(--brand); }

/* Page-level polish for product, cart, checkout, account and content pages */
.free-ship.is-bar { background:var(--brand)!important; padding:.75rem 1rem!important; font-weight:700!important; box-shadow:none!important; }
.container-fluid > .row[style*="radial-gradient"] { min-height:280px; align-items:center; padding:2rem 0; }
.container-fluid > .row[style*="radial-gradient"] img { object-fit:contain; }
.table { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 5px 20px rgba(67,31,42,.05); }
.table thead th { background:var(--blush); color:var(--brand); border:0; font-weight:800; }
.table td, .table th { vertical-align:middle; border-color:var(--line); padding:.9rem; }
.pagination .page-link { color:var(--brand); border-color:var(--line); margin:0 3px; border-radius:8px!important; }
.pagination .page-item.active .page-link { background:var(--brand); border-color:var(--brand); }
.qtySelector, .input-group { border-radius:11px; }
.alert { border-radius:12px; border:0; }
.deposit-option { padding:1rem; border:1px solid var(--line); border-radius:13px; background:linear-gradient(135deg, #fff, #fff7fa); }
.deposit-toggle { display:flex; align-items:center; gap:.8rem; margin:0; cursor:pointer; }
.deposit-toggle input { width:19px; height:19px; accent-color:var(--brand); }
.deposit-toggle strong, .deposit-toggle small { display:block; }
.deposit-toggle small { color:#756870; margin-top:.1rem; }
.deposit-upload label { display:block; margin-bottom:.4rem; color:var(--brand); font-weight:700; }
.deposit-upload .form-control-file { border:1px dashed rgba(244,84,114,.45); border-radius:9px; background:#fff; padding:.6rem; width:100%; }
#footer { margin-top:4rem; padding:2.5rem clamp(1rem,4vw,4rem) 1.5rem; background:#f45472!important; }
#footer img { max-width:120px!important; margin-bottom:.75rem; }
#footer h5 { font-weight:800; letter-spacing:.01em; }
#footer a { transition:opacity .18s ease; }
#footer a:hover { color:#fff!important; opacity:.78; }

@media (max-width: 991.98px) { .navbar.light-bg { min-height:66px; } .small-nav { gap:.5rem; padding:.75rem 0; align-items:flex-start!important; flex-direction:column; } .small-nav .navbar-nav { width:100%!important; gap:.15rem; } .top-nav-link { padding:.45rem .2rem!important; } .card-bg { height:215px; } }
@media (max-width: 575.98px) { .navbar-brand img { width:62px!important; } .navbar.light-bg { padding:.35rem 1rem!important; } .shop-card { width:calc(100vw - 2rem); margin:.6rem auto; } .card-bg { height:250px; } .header-section { font-size:2rem; } .icon-background { width:105px; height:105px; } #footer { margin-top:2.5rem; } }