/* =========================
   THEKROCHET BRAND LAYER - FINAL FULL VERSION
========================= */

:root{
  --radius-xl:24px; --radius-lg:18px; --radius-md:14px;
  --ease:cubic-bezier(.4,0,.2,1);
  
  /* DEFAULT LIGHT MODE COLORS */
  --bg:#faf7f2; --text:#2f2f2f; --card:#ffffff;
  --nav:rgba(255, 255, 255, 0.95); --shadow:rgba(0,0,0,0.08);
  --primary:#d4a373; --primary-dark:#b8895b;
  --success:#27ae60; --danger:#e74c3c; --gray:#e0e0e0;
  
  /* INPUT COLORS (Light) */
  --input-bg: #ffffff;
  --input-border: rgba(0,0,0,0.1);
}

body.dark {
  /* DARK MODE COLORS */
  --bg:#121212; --text:#f1f1f1; --card:#1e1e1e;
  --nav:rgba(26, 26, 26, 0.95); --shadow:rgba(0,0,0,0.6);
  --gray:#333;
  
  /* INPUT COLORS (Dark) */
  --input-bg: #2b2b2b; 
  --input-border: rgba(255,255,255,0.1);
}

/* GLOBAL RESETS */
*{ transition: background-color .3s, color .3s; }
h1,h2,h3{letter-spacing:.3px} 
p{line-height:1.7}

/* =========================
   MASTER NAVBAR & FOOTER
========================= */
nav{ position:sticky; top:0; z-index:100; background:var(--nav); backdrop-filter:blur(10px); padding:10px 0; box-shadow:0 4px 20px var(--shadow); display:flex; flex-direction:column; gap:8px; }
.nav-top{ text-align:center; } 
.nav-links{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }
.nav-links a{ text-decoration:none; color:var(--text); font-weight:500; position:relative; }
.nav-links a.active{ color:var(--primary); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--primary); transition:.3s; }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

footer { background:#1a1a1a; color:#888; text-align:center; padding:25px; font-size:0.9rem; margin-top:auto; }

/* CARD ANIMATIONS */
.card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.15); }

/* =========================================
   🚀 PROFILE SYSTEM (SIDEBAR, MODALS, TRACKING)
   ========================================= */

/* BACKGROUND OVERLAY */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 2999; opacity: 0; pointer-events: none; transition: 0.3s; backdrop-filter: blur(3px); }
.overlay.active { opacity: 1; pointer-events: auto; }

/* SIDEBAR */
.sidebar { position: fixed; top: 0; right: -320px; width: 320px; height: 100%; background: var(--card); z-index: 3000; box-shadow: -10px 0 30px rgba(0,0,0,0.3); transition: right 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; flex-direction: column; }
.sidebar.active { right: 0; }

.sidebar-header { padding: 30px 20px; background: var(--primary); color: #fff; display: flex; align-items: center; gap: 15px; }
.user-avatar { width: 50px; height: 50px; background: #fff; border-radius: 50%; color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.5rem; }
.user-info h4 { font-size: 1rem; margin-bottom: 2px; } .user-info p { font-size: 0.8rem; opacity: 0.9; }

.sidebar-body { padding: 20px; flex: 1; overflow-y: auto; }
.sidebar-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); font-weight: 700; margin-bottom: 10px; border-bottom: 1px solid var(--gray); padding-bottom: 5px; margin-top: 20px; }

/* ✅ ADDRESS BOX FIX (Uses Theme Variables) */
.saved-address { 
  font-size: 0.9rem; line-height: 1.5; 
  background: var(--input-bg) !important; 
  color: var(--text) !important; 
  padding: 15px; border-radius: 12px; border: 1px solid var(--input-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* ORDER CARD */
.order-item { background: var(--bg); padding: 15px; border-radius: 15px; margin-bottom: 15px; border: 1px solid var(--input-border); display: flex; flex-direction: column; gap: 10px; }
.order-top { display: flex; justify-content: space-between; align-items: center; }
.order-id { font-weight: 700; font-size: 1rem; } .order-price { font-weight: 700; color: var(--primary-dark); }
.order-date { font-size: 0.8rem; opacity: 0.6; }

/* ✅ TRACK BUTTON FIX (Solid Color) */
.track-btn {
  background: var(--primary); color: #fff; border: none;
  padding: 8px 20px; border-radius: 50px; font-size: 0.8rem; cursor: pointer; 
  font-weight: 600; margin-left: auto; display: block; width: fit-content;
}
.track-btn:hover { background: var(--primary-dark); transform: scale(1.05); }

.logout-btn { width: 100%; padding: 14px; background: #ffebee; color: #c62828; border: none; font-weight: 600; cursor: pointer; border-radius: 12px; margin-bottom: 20px; }

/* MODALS */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:4000; background:rgba(0,0,0,0.6); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; pointer-events: none; transition: 0.3s; }
.modal.active{ opacity: 1; visibility: visible; pointer-events: auto; }
.modal-box{ background: var(--card); width:90%; max-width:400px; padding:30px; border-radius:24px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); transform: scale(0.95); transition: 0.3s; }
.modal.active .modal-box{ transform: scale(1); }
.modal-box h3{ text-align:center; font-family:'Playfair Display',serif; color: var(--primary-dark); margin-bottom: 20px; font-size: 1.5rem; }

/* ✅ INPUTS & TEXTAREAS (Dark Mode Compatible) */
.modal-box input, .modal-box textarea { 
  width:100%; padding:14px; border-radius: 12px; 
  border: 1px solid var(--input-border); 
  background: var(--input-bg); 
  color: var(--text); 
  outline:none; margin-bottom: 12px; font-family: 'Poppins',sans-serif; 
}
.modal-box input:focus, .modal-box textarea:focus { border-color: var(--primary); }

.error-msg { color: #d32f2f; font-size: 0.9rem; text-align: center; margin-top: 10px; display: none; font-weight: 500; background: #ffebee; padding: 10px; border-radius: 8px; }

/* TIMELINE */
.timeline-container { position: relative; padding-left: 20px; margin-top: 20px; }
.timeline-step { position: relative; padding-bottom: 25px; padding-left: 20px; border-left: 2px solid var(--gray); }
.timeline-step:last-child { border-left: none; }
.timeline-dot { position: absolute; left: -9px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--gray); border: 2px solid var(--card); transition: 0.3s; }
.timeline-step.active .timeline-dot { background: var(--success); border-color: var(--success); box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.2); }
.timeline-step.active { border-left-color: var(--success); }
.timeline-content h4 { font-size: 0.95rem; margin: 0; font-weight: 600; }
.timeline-content p { font-size: 0.75rem; opacity: 0.7; margin: 2px 0 0; }

/* =========================
   ✅ PAYMENT, QR & SUCCESS STYLES
========================= */

/* Payment App Buttons */
.pay-app-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 15px; border-radius: 16px; border: 1px solid var(--input-border);
  background: var(--card); cursor: pointer; transition: all 0.2s ease;
  gap: 8px;
}
.pay-app-btn:hover {
  border-color: var(--primary); transform: translateY(-3px);
  box-shadow: 0 5px 15px var(--shadow);
}

/* Payment Logos */
.pay-app-img {
  height: 35px; width: auto; object-fit: contain;
  transition: filter 0.3s ease;
}
/* Other UPI Icon */
.pay-app-icon { font-size: 32px; }

/* DARK MODE: Make logos white (except colored icons) */
body.dark .pay-app-img,
body.dark .pay-app-btn .pay-app-icon {
  filter: brightness(0) invert(1);
}
body.dark .pay-app-btn:last-child .pay-app-icon {
    filter: none; color: #f1c40f;
}

.pay-app-name { font-size: 0.9rem; font-weight: 500; color: var(--text); }

/* QR Code */
.qr-container {
  background: #fff; /* Always white for scanning contrast */
  padding: 15px; border-radius: 12px;
  display: inline-block; margin: 10px auto 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.qr-img {
  width: 180px; height: 180px; object-fit: contain; display: block;
}

/* Success Modal Animation */
.success-icon {
  font-size: 60px; margin-bottom: 15px;
  animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }

.modal-box p { opacity: 0.8; margin-bottom: 25px; line-height: 1.5; }

/* ✅ ACTION BUTTON (Paid? / Continue) - FINAL FIX */
/* Forces buttons to be solid brown/gold */
button.confirm-btn {
  width: 100% !important;
  padding: 14px !important;
  border: none !important;
  border-radius: 12px !important;
  background: var(--primary) !important; /* Brown Color */
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  margin-top: 20px !important;
  box-shadow: 0 4px 15px rgba(212, 163, 115, 0.4) !important;
  transition: transform 0.2s ease !important;
  opacity: 1 !important;
}

button.confirm-btn:active { transform: scale(0.98) !important; }
button.confirm-btn:hover { background: var(--primary-dark) !important; }

/* Secondary/Cancel Button Style */
.modal-box button:not(.confirm-btn) {
  width: 100%; padding: 12px; background: transparent; border: none; color: var(--text); opacity: 0.6; margin-top: 10px; cursor: pointer;
}