/* Qura Customer Platform — presentation layer
   Non-invasive: keeps existing Core DOM/logic and adds responsive UX. */
:root {
  --qura-orange: #D97706;
  --qura-orange-2: #F59E0B;
  --qura-brown: #3B2415;
  --qura-cream: #FFF7E6;
  --qura-ink: #1F2937;
  --qura-white: #FFFFFF;
  --qura-line: #E5E7EB;
  --qura-muted: #9CA3AF;
  --qura-success: #22C55E;
  --qura-danger: #EF4444;
  --qura-shadow: 0 14px 36px rgba(59, 36, 21, .10);
  --qura-radius: 20px;
}

html { scroll-behavior: smooth; }
body { background: var(--qura-cream) !important; color: var(--qura-ink); padding-bottom: 90px; }
header { position: sticky; top: 0; z-index: 1000; background: rgba(255,247,230,.94) !important; backdrop-filter: blur(18px); border-bottom: 1px solid rgba(59,36,21,.08) !important; }
header .container.top { min-height: 70px; gap: 16px; }
.brand { min-width: 0; }
.logo-image { max-height: 44px; width: auto; object-fit: contain; }
.brand-text strong { color: var(--qura-brown) !important; }
.brand-text small { color: #7A6253 !important; }
.header-actions { gap: 8px !important; align-items: center; }
.header-actions > button { border: 1px solid rgba(59,36,21,.10) !important; background: var(--qura-white) !important; color: var(--qura-brown) !important; min-height: 42px; border-radius: 14px !important; box-shadow: 0 4px 16px rgba(59,36,21,.05); }
.header-actions > button:hover { transform: translateY(-1px); }
body[data-qura-surface="customer"] > header .header-actions { display: none !important; }
#customerSupportBtn { display: none !important; }

.qura-customer-context { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; margin: 14px 0 8px; }
.qura-context-card { display:flex; align-items:center; gap:10px; min-width:0; padding: 11px 13px; background: var(--qura-white); border: 1px solid rgba(59,36,21,.08); border-radius: 16px; box-shadow: 0 5px 18px rgba(59,36,21,.05); cursor: pointer; }
.qura-context-icon { width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#FFF1D6;flex:0 0 auto; }
.qura-context-copy { min-width:0; }
.qura-context-copy strong,.qura-context-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qura-context-copy strong{font-size:13px;color:var(--qura-brown);}
.qura-context-copy small{font-size:11px;color:#846F61;margin-top:2px;}
.qura-context-actions{display:flex;gap:8px;}
.qura-context-chip{ border:1px solid rgba(59,36,21,.10);background:var(--qura-white);color:var(--qura-brown); border-radius:16px;padding:10px 12px;font-weight:900;cursor:pointer;white-space:nowrap; }
.qura-context-chip.active{background:var(--qura-orange);color:#fff;border-color:var(--qura-orange);}

.qura-top-search { margin-top: 8px !important; }
.search-wrap { background: var(--qura-white) !important; border: 1px solid rgba(59,36,21,.10) !important; border-radius: 18px !important; min-height: 52px; box-shadow: 0 8px 24px rgba(59,36,21,.06); }
.search-wrap:focus-within { border-color: rgba(217,119,6,.45) !important; box-shadow: 0 10px 26px rgba(217,119,6,.12); }
.search-wrap input::placeholder { color: #9B8B7F; }

.qura-entry-section { margin: 14px 0 18px; }
.qura-entry-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.qura-entry-card { position:relative;overflow:hidden;text-align:right;cursor:pointer; padding:17px;border-radius:22px;border:1px solid rgba(59,36,21,.08); background:var(--qura-white);box-shadow:var(--qura-shadow);transition:.18s ease; }
.qura-entry-card:hover{transform:translateY(-2px);}
.qura-entry-card.primary{background:linear-gradient(135deg,#D97706,#B45A02);color:#fff;border-color:#D97706;}
.qura-entry-card .qura-entry-icon{font-size:26px;display:block;margin-bottom:10px;}
.qura-entry-card strong{display:block;font-size:17px;}
.qura-entry-card small{display:block;margin-top:4px;line-height:1.5;opacity:.82;}
.qura-entry-card.primary small{color:#fff;}

.qura-plus-hero { margin: 12px 0 18px; border-radius: 24px; padding: 18px; color: #fff; background: linear-gradient(135deg,#3B2415,#6B3D21 54%,#D97706); box-shadow: 0 18px 42px rgba(59,36,21,.18); position:relative;overflow:hidden; }
.qura-plus-hero::after{content:"";position:absolute;inset:auto -30px -50px auto;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.08);}
.qura-plus-hero-grid{display:flex;justify-content:space-between;align-items:center;gap:14px;position:relative;z-index:1;}
.qura-plus-hero h2{margin:0;font-size:22px;}
.qura-plus-hero p{margin:6px 0 0;opacity:.9;line-height:1.55;font-size:13px;}
.qura-plus-hero .qura-plus-open-btn{border:0;background:#fff;color:var(--qura-brown);border-radius:14px;padding:11px 14px;font-weight:900;cursor:pointer;white-space:nowrap;}
.qura-plus-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px;}
.qura-plus-tags span{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.16);padding:6px 9px;border-radius:999px;font-size:11px;}

.qura-categories-section{margin-top:12px;}
.qura-category-card,.cat.qura-category-card{border-radius:17px !important;background:#fff !important;border-color:rgba(59,36,21,.08) !important;}
.qura-category-card.selected{background:#FFF1D6 !important;border-color:#F3B75D !important;box-shadow:0 5px 18px rgba(217,119,6,.12);}
.section-heading h2{color:var(--qura-brown) !important;font-weight:950;}
.section-block{margin-top:20px;}

.qura-bottom-nav{ position:fixed;left:50%;bottom:12px;transform:translateX(-50%); width:min(620px,calc(100% - 18px)); display:grid;grid-template-columns:repeat(4,1fr);gap:6px; padding:7px;background:rgba(255,255,255,.96);backdrop-filter:blur(18px); border:1px solid rgba(59,36,21,.10);border-radius:22px;box-shadow:0 18px 46px rgba(59,36,21,.18); z-index:9998; }
.qura-bottom-nav button{border:0;background:transparent;color:#7C6A5E;border-radius:16px;padding:9px 6px 8px;display:flex;flex-direction:column;gap:4px;align-items:center;font-weight:850;cursor:pointer;}
.qura-bottom-nav button span{font-size:19px;line-height:1;}
.qura-bottom-nav button small{font-size:10px;}
.qura-bottom-nav button.active{background:#FFF1D6;color:var(--qura-orange);}
.qura-bottom-nav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);}
.qura-bottom-nav .qura-bottom-utility{position:relative;min-width:0;}
#quraBottomNav :is(#cartCount,#notificationCount){top:0!important;right:calc(50% - 26px)!important;left:auto!important;min-width:17px!important;width:auto!important;height:17px!important;padding:0 3px!important;font-size:9px!important;border:1px solid white!important;box-shadow:none;}
#quraBottomNav :is(#cartCount,#notificationCount)[hidden]{display:none!important;}
html.qura-login-visible #quraBottomNav{display:none!important;}

.qura-wallet-overlay{position:fixed;inset:0;background:rgba(31,24,18,.48);z-index:10001;display:none;align-items:flex-end;justify-content:center;padding:10px;}
.qura-wallet-overlay.show{display:flex;}
.qura-wallet-panel{width:min(620px,100%);background:#fff;border-radius:28px 28px 16px 16px;overflow:hidden;box-shadow:0 28px 70px rgba(0,0,0,.22);}
.qura-wallet-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #eee8e2;}
.qura-wallet-head h2{margin:0;color:var(--qura-brown);font-size:19px;}
.qura-wallet-close{border:0;background:#F5F0EB;color:var(--qura-brown);width:38px;height:38px;border-radius:50%;font-size:22px;cursor:pointer;}
.qura-wallet-balance{margin:16px;background:linear-gradient(135deg,#3B2415,#D97706);color:#fff;border-radius:22px;padding:18px;}
.qura-wallet-balance small{display:block;opacity:.78;}
.qura-wallet-balance strong{display:block;font-size:29px;margin-top:7px;}
.qura-wallet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px 16px;}
.qura-wallet-tile{padding:13px;border:1px solid #eee4dc;border-radius:16px;background:#fff7ef;}
.qura-wallet-tile strong{display:block;color:var(--qura-brown);font-size:13px;}
.qura-wallet-tile small{display:block;margin-top:4px;color:#806E62;line-height:1.45;}
.qura-wallet-note{margin:0 16px 18px;padding:12px 13px;border-radius:15px;background:#FAF7F4;color:#76665C;font-size:12px;line-height:1.65;}

#quraPlusEntry{display:none !important;}
#qplusHomeEntry{display:none !important;}
.qplus-overlay{background:rgba(26,17,12,.58) !important;}
.qplus-modal{border-radius:26px !important;}
.qplus-head h2{color:var(--qura-brown) !important;}
.qpost{border-radius:20px !important;}
.qpost-actions button{border-radius:13px !important;}
.qpost-main{background:var(--qura-orange) !important;}
.qpost-follow{color:var(--qura-brown) !important;}

.qura-context-support{display:inline-flex !important; margin-top:12px; width:100%; align-items:center; justify-content:center;}

.qura-customer-toast{position:fixed;left:50%;bottom:102px;transform:translate(-50%,12px);opacity:0;pointer-events:none;z-index:10005;background:#1F2937;color:#fff;padding:11px 15px;border-radius:14px;box-shadow:0 12px 34px rgba(0,0,0,.18);font-size:13px;font-weight:800;transition:.2s ease;max-width:min(90vw,520px);text-align:center;}
.qura-customer-toast.show{opacity:1;transform:translate(-50%,0);}
.qura-customer-toast[data-tone="error"]{background:#991B1B;}
.qura-customer-toast[data-tone="success"]{background:#166534;}

@media (max-width: 760px){
  body{padding-bottom:92px;}
  header .container.top{padding:8px 12px;}
  .brand-text{display:none !important;}
  .logo-image{max-height:40px;}
  .header-actions > button{font-size:0;min-width:42px;padding:0 10px !important;}
  .header-actions > button .button-icon{font-size:18px;}
  .header-actions > button span[id$="Count"]{font-size:9px;}
  .header-actions{gap:6px !important;}
  .qura-customer-context{grid-template-columns:1fr;}
  .qura-context-actions{display:grid;grid-template-columns:1fr 1fr;}
  .qura-context-chip{width:100%;}
  .qura-entry-grid{grid-template-columns:1fr 1fr;}
  .qura-plus-hero-grid{align-items:flex-start;}
  .qura-plus-hero .qura-plus-open-btn{padding:10px 11px;}
}
@media (max-width: 430px){
  .qura-entry-card{padding:14px;}
  .qura-entry-card strong{font-size:15px;}
  .qura-plus-hero{padding:16px;}
  .qura-plus-hero h2{font-size:20px;}
  .qura-bottom-nav{bottom:8px;}
  .qura-wallet-grid{grid-template-columns:1fr;}
}
@media (min-width: 900px){
  .qura-bottom-nav{bottom:18px;}
  .qura-entry-grid{max-width:760px;}
}