/* ============================================================
   LensLend — Apple-Inspired Design System
   Reference: apple.com — clean light UI, dark hero sections,
   precise typography, SF Pro-class spacing
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* Apple exact palette */
  --bg:            #f5f5f7;
  --bg-card:       #ffffff;
  --bg-dark:       #000000;
  --bg-dark-2:     #1d1d1f;
  --bg-mid:        #fbfbfd;

  --text:          #1d1d1f;
  --text-sub:      #6e6e73;
  --text-muted:    #86868b;
  --text-dim:      #ababab;
  --text-on-dark:  #f5f5f7;
  --text-on-dark-sub: #a1a1a6;

  --accent:        #0071e3;
  --accent-hover:  #0077ed;
  --accent-dark:   #2997ff;

  --border:        rgba(0,0,0,0.08);
  --border-dark:   rgba(255,255,255,0.12);
  --border-card:   rgba(0,0,0,0.06);

  --shadow-xs: 0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 4px 16px rgba(0,0,0,0.08),0 2px 4px rgba(0,0,0,0.04);
  --shadow-md: 0 12px 40px rgba(0,0,0,0.1),0 4px 12px rgba(0,0,0,0.05);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.12),0 8px 24px rgba(0,0,0,0.06);

  --green:  #28cd41;
  --amber:  #ff9f0a;
  --red:    #ff3b30;

  --r:     10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  font-family:'Inter',-apple-system,'SF Pro Text','Helvetica Neue',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  overflow-x:hidden;
}

a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:-0.025em;color:var(--text);line-height:1.18}

/* NAVBAR */
.navbar{
  background:rgba(245,245,247,0.88)!important;
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border);
  padding:0;height:52px;
  position:sticky;top:0;z-index:1000;
}
.navbar-brand{font-size:1rem;font-weight:700;color:var(--text)!important;letter-spacing:-0.025em;padding:0;display:flex;align-items:center;gap:0.3rem}
.brand-dot{color:var(--accent);font-size:1.05rem}
.nav-link{color:var(--text-sub)!important;font-size:0.82rem;font-weight:500;padding:0.3rem 0.75rem!important;border-radius:var(--r);transition:color 0.15s,background 0.15s}
.nav-link:hover{color:var(--text)!important;background:rgba(0,0,0,0.04)}
.navbar-toggler{border:1px solid var(--border);background:transparent;padding:0.3rem 0.45rem}
.navbar-toggler-icon{width:18px;height:18px}

/* LAYOUT */
main.container{padding-top:0;padding-bottom:5rem}

/* HERO - dark full bleed like Apple product page */
.hero{
  background:var(--bg-dark);
  color:var(--text-on-dark);
  padding:5.5rem 0 5rem;
  margin-left:calc(-50vw + 50%);
  margin-right:calc(-50vw + 50%);
  padding-left:calc(50vw - 50%);
  padding-right:calc(50vw - 50%);
  margin-bottom:4rem;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  top:-200px;left:50%;transform:translateX(-50%);
  width:900px;height:700px;
  background:radial-gradient(ellipse at 50% 40%,rgba(0,113,227,0.18) 0%,rgba(0,113,227,0.06) 35%,transparent 65%);
  pointer-events:none;
}
.hero .container{position:relative;z-index:1}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:0.45rem;
  font-size:0.72rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--accent-dark);background:rgba(41,151,255,0.1);
  border:1px solid rgba(41,151,255,0.2);border-radius:100px;
  padding:0.28rem 0.9rem;margin-bottom:1.75rem;
}
.hero-eyebrow::before{
  content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--accent-dark);box-shadow:0 0 8px var(--accent-dark);
}
.hero-title{
  font-size:clamp(2.8rem,6vw,4.2rem);font-weight:800;letter-spacing:-0.048em;
  line-height:1.05;color:#f5f5f7;margin-bottom:1.5rem;
}
.hero-title .hl{
  background:linear-gradient(120deg,var(--accent-dark) 0%,#5e5ce6 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-lead{font-size:1.05rem;color:var(--text-on-dark-sub);max-width:500px;line-height:1.75;font-weight:400;margin-bottom:2.5rem}

.pricing-pills{display:flex;flex-wrap:wrap;gap:0.5rem}
.pricing-pill{
  display:inline-flex;align-items:center;gap:0.4rem;
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);
  border-radius:100px;padding:0.3rem 1rem;font-size:0.8rem;font-weight:500;
  color:var(--text-on-dark-sub);transition:border-color 0.2s,color 0.2s,background 0.2s;
}
.pricing-pill:hover{border-color:rgba(41,151,255,0.4);background:rgba(41,151,255,0.1);color:var(--accent-dark)}
.pricing-pill .dot{width:5px;height:5px;border-radius:50%;background:var(--accent-dark);box-shadow:0 0 6px rgba(41,151,255,0.8)}

/* SECTION DIVIDER */
.section-divider{display:flex;align-items:center;gap:1rem;margin-bottom:2.25rem}
.section-divider-label{font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.section-divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* CARDS */
.card{
  background:var(--bg-card);border:1px solid var(--border-card);
  border-radius:var(--r-xl);color:var(--text);
  transition:box-shadow 0.3s ease,transform 0.3s ease;
  overflow:hidden;box-shadow:var(--shadow-xs);
}
.card:hover{box-shadow:var(--shadow-md)}
.card-header{
  background:#fafafa!important;border-bottom:1px solid var(--border);
  color:var(--text-muted);font-weight:600;font-size:0.72rem;
  letter-spacing:0.08em;text-transform:uppercase;padding:1rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;
}
.card-body{padding:1.5rem}
.card-footer{background:#fafafa!important;border-top:1px solid var(--border)}

/* CAMERA PLACEHOLDER */
.camera-placeholder{
  height:260px;
  background:linear-gradient(160deg,#1a1a2e 0%,#0f0f1a 50%,#16213e 100%);
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.camera-placeholder::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:40px 40px;
}
.camera-placeholder::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:80px;
  background:linear-gradient(transparent,#ffffff);
}
.camera-placeholder svg{position:relative;z-index:1}

/* CAMERA CARD */
.camera-card{
  background:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--r-xl);
  overflow:hidden;transition:box-shadow 0.35s ease,transform 0.35s ease;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
}
.camera-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.camera-card .card-body{padding:1.4rem 1.6rem;flex:1;display:flex;flex-direction:column}
.camera-card .card-title{font-size:1.05rem;font-weight:700;letter-spacing:-0.02em;color:var(--text);margin-bottom:0.45rem}
.camera-card .card-text{font-size:0.84rem;color:var(--text-muted);line-height:1.65;flex:1}
.camera-card .card-footer{padding:1rem 1.6rem;background:#fafafa!important;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}

.price-tag{display:flex;align-items:baseline;gap:0.2rem}
.price-tag .amount{font-size:1.2rem;font-weight:700;letter-spacing:-0.03em;color:var(--text)}
.price-tag .unit{font-size:0.78rem;color:var(--text-muted);font-weight:500}

/* BUTTONS */
.btn{font-weight:600;font-size:0.875rem;border-radius:980px;transition:all 0.2s ease;border:none;padding:0.55rem 1.25rem}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover,.btn-primary:focus{background:var(--accent-hover);color:#fff;box-shadow:0 4px 20px rgba(0,113,227,0.35)}
.btn-primary:active{background:#005fbe;transform:scale(0.98)}
.btn-primary:disabled,.btn-primary.disabled{background:var(--text-dim);color:#fff;box-shadow:none;transform:none;opacity:1}
.btn-outline-secondary{border:1.5px solid var(--border);color:var(--text-sub);background:transparent}
.btn-outline-secondary:hover{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.15);color:var(--text)}
.btn-lookup{
  background:rgba(0,113,227,0.07);border:1.5px solid rgba(0,113,227,0.2);border-left:none;
  color:var(--accent);font-weight:600;font-size:0.8rem;padding:0 1.1rem;
  border-radius:0 var(--r) var(--r) 0;transition:all 0.15s;white-space:nowrap;cursor:pointer;
}
.btn-lookup:hover{background:rgba(0,113,227,0.13)}

/* FORM CONTROLS */
.form-control,.form-select{
  background:var(--bg-card);border:1.5px solid rgba(0,0,0,0.12);
  color:var(--text);border-radius:var(--r);font-size:0.9rem;
  transition:border-color 0.15s,box-shadow 0.15s;padding:0.6rem 0.9rem;
}
.form-control:focus,.form-select:focus{
  background:var(--bg-card);border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,113,227,0.12);color:var(--text);
}
.form-control::placeholder{color:var(--text-dim)}
.form-select{background-color:var(--bg-card)}
.form-label{font-size:0.75rem;font-weight:600;letter-spacing:0.04em;color:var(--text-sub);margin-bottom:0.4rem}
.form-text{color:var(--text-muted);font-size:0.78rem}
.input-group .form-control{border-right:none;border-radius:var(--r) 0 0 var(--r)}

/* ALERTS */
.alert{border-radius:var(--r-lg);font-size:0.875rem;border:1px solid}
.alert-success{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.alert-danger{background:#fff1f0;border-color:#fecaca;color:#991b1b}
.alert-warning{background:#fffbeb;border-color:#fde68a;color:#92400e}
.alert-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.btn-close{filter:none;opacity:0.5}

/* BREADCRUMB */
.breadcrumb{background:none;padding:1rem 0 0;font-size:0.8rem;margin-bottom:1.5rem}
.breadcrumb-item+.breadcrumb-item::before{color:var(--text-dim)}
.breadcrumb-item a{color:var(--accent)}
.breadcrumb-item.active{color:var(--text-muted)}

/* TABLES */
.table{color:var(--text);border-color:var(--border);font-size:0.875rem}
.table th{color:var(--text-muted);font-weight:600;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;border-color:var(--border);padding:0.9rem 1rem;background:var(--bg)}
.table td{border-color:var(--border);vertical-align:middle;padding:0.9rem 1rem}
.table-hover>tbody>tr:hover>*{background-color:rgba(0,0,0,0.02)}

/* BADGES */
.badge{font-size:0.7rem;font-weight:600;letter-spacing:0.03em;padding:0.3em 0.7em;border-radius:6px}
.bg-success{background:#dcfce7!important;color:#16a34a!important}
.bg-primary{background:#dbeafe!important;color:#1d4ed8!important}
.bg-warning{background:#fef9c3!important;color:#a16207!important}
.bg-danger{background:#fee2e2!important;color:#dc2626!important}
.bg-secondary{background:rgba(0,0,0,0.06)!important;color:var(--text-muted)!important}

/* SPEC BLOCK */
.spec-block{
  background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-lg);
  padding:1.25rem 1.5rem 1.25rem 1.8rem;font-size:0.82rem;color:var(--text-sub);
  line-height:1.95;font-family:'SF Mono','Consolas','Liberation Mono',Menlo,monospace;
  white-space:pre-wrap;position:relative;overflow:hidden;
}
.spec-block::before{
  content:'';position:absolute;top:0;left:0;width:3px;height:100%;
  background:var(--accent);border-radius:3px 0 0 3px;opacity:0.6;
}

/* PRICE SUMMARY */
#priceSummary{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.15rem 1.3rem;font-size:0.875rem}
#priceSummary .total-row{padding-top:0.7rem;border-top:1.5px solid var(--border);margin-top:0.4rem;font-weight:700;font-size:1rem;color:var(--text)}

/* BOOKING PANEL */
.booking-panel.card{background:var(--bg-card);box-shadow:var(--shadow-md);border:1px solid var(--border-card)}
.booking-panel>.card-header{background:#f9f9fb!important;border-bottom:1px solid var(--border)}

/* SECTION LABEL */
.section-label{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);margin-bottom:0.5rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border);display:block}

/* ADDRESS SECTION */
#addressSection{animation:fadeDown 0.25s cubic-bezier(0.4,0,0.2,1)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

.postcode-result{background:#eff6ff;border:1px solid #bfdbfe;border-radius:var(--r);padding:0.65rem 1rem;font-size:0.8rem;color:var(--text-muted);display:flex;align-items:center;gap:0.5rem}
.postcode-result .loc{color:var(--accent);font-weight:600}

/* AUTH PAGES */
.auth-wrap{min-height:calc(100vh - 200px);display:flex;align-items:center;justify-content:center;padding:2rem 0;background:var(--bg)}
.auth-box{width:100%;max-width:420px}
.auth-box .card{border-radius:var(--r-2xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-card)}
.auth-logo{font-size:2rem;color:var(--accent);text-align:center;margin-bottom:0.5rem;line-height:1}
.auth-title{font-size:1.6rem;font-weight:800;letter-spacing:-0.035em;text-align:center;color:var(--text);margin-bottom:0.25rem}
.auth-sub{text-align:center;color:var(--text-muted);font-size:0.85rem;margin-bottom:1.75rem}

/* CHECKBOX */
.form-check-input{background-color:var(--bg-card);border-color:rgba(0,0,0,0.2)}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.form-check-label{color:var(--text-sub);font-size:0.83rem}

/* LIST GROUP */
.list-group-item{background:var(--bg-card)!important;border-color:var(--border)!important;color:var(--text);font-size:0.85rem}

/* FLATPICKR */
.flatpickr-calendar{background:var(--bg-card)!important;border:1px solid var(--border)!important;border-radius:var(--r-xl)!important;box-shadow:var(--shadow-lg)!important}
.flatpickr-day{color:var(--text)!important;border-radius:var(--r)!important}
.flatpickr-day:hover{background:var(--bg)!important}
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}
.flatpickr-day.inRange{background:rgba(0,113,227,0.1)!important;border-color:transparent!important}
.flatpickr-day.disabled,.flatpickr-day.disabled:hover{background:#fff1f0!important;color:#ef4444!important;text-decoration:line-through;border-color:transparent!important}
.flatpickr-months .flatpickr-month,.flatpickr-current-month,.flatpickr-weekday,.flatpickr-weekdays{background:var(--bg-card)!important;color:var(--text-muted)!important}
.flatpickr-prev-month svg,.flatpickr-next-month svg{fill:var(--text-muted)!important}
.flatpickr-day.flatpickr-today{border-color:var(--accent)!important}

/* FOOTER - dark like Apple */
footer{background:var(--bg-dark-2)!important;border-top:none;color:var(--text-on-dark-sub);font-size:0.8rem}
footer a{color:var(--text-on-dark-sub)}
footer a:hover{color:var(--text-on-dark)}

/* MISC */
hr{border-color:var(--border);opacity:1}
.text-danger,.errorlist{color:var(--red)!important;font-size:0.8rem}
.text-success{color:var(--green)!important}
.text-muted{color:var(--text-muted)!important}
.spinner-border-sm{width:0.9rem;height:0.9rem;border-width:0.15em}
.option-toggle{background:var(--bg-raised);color:var(--text);border:1px solid var(--border)}
.btn-check:checked+.option-toggle{background:var(--accent);border-color:var(--accent);color:#fff}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.18);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.28)}

/* ORDER STATUS */
.order-status-pending,.order-status-pending_payment{background:#fef9c3;color:#a16207;border:1px solid #fde68a}
.order-status-paid{background:#dcfce7;color:#16a34a;border:1px solid #bbf7d0}
.order-status-dispatched{background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe}
.order-status-returned{background:#fef3c7;color:#b45309;border:1px solid #fde68a}
.order-status-purchased{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.order-status-completed{background:rgba(0,0,0,0.05);color:var(--text-muted);border:1px solid var(--border)}
.order-status-cancelled{background:#fee2e2;color:#dc2626;border:1px solid #fecaca}
[class^="order-status-"]{font-size:0.7rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;border-radius:6px;padding:0.25em 0.7em}

/* TOTAL ROW */
.card-body .total-row{padding-top:0.7rem;border-top:1.5px solid var(--border);margin-top:0.4rem;font-weight:700;font-size:1rem;color:var(--text);display:flex;justify-content:space-between}

/* ORDER TIMELINE */
.order-timeline{position:relative;padding-left:1.4rem}
.order-timeline::before{content:'';position:absolute;left:0.34rem;top:0.5rem;bottom:0.5rem;width:1px;background:var(--border)}
.timeline-item{position:relative;padding-bottom:1.5rem;display:flex;gap:0.9rem;align-items:flex-start}
.timeline-item:last-child{padding-bottom:0}
.timeline-dot{width:8px;height:8px;border-radius:50%;background:var(--text-dim);flex-shrink:0;margin-top:0.3rem;position:absolute;left:-1.3rem;z-index:1}
.timeline-item.done .timeline-dot{background:var(--accent);box-shadow:0 0 0 3px rgba(0,113,227,0.15),0 0 10px rgba(0,113,227,0.35)}
.timeline-label{margin:0;font-size:0.84rem;font-weight:600;color:var(--text)}
.timeline-date{margin:0.1rem 0 0;font-size:0.75rem;color:var(--text-muted)}

/* DARK TABLE */
.table.table-dark{--bs-table-bg:transparent;--bs-table-border-color:var(--border);color:var(--text)}
.table.table-dark th{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted);border-bottom:1.5px solid var(--border);padding:0.75rem 1.25rem;background:var(--bg)}
.table.table-dark td{padding:0.9rem 1.25rem;vertical-align:middle;border-color:var(--border);color:var(--text);background:var(--bg-card)}
.table.table-dark tbody tr:hover>td{background:var(--bg)}

/* TRUST STRIP */
.trust-item{
  text-align:center;
  padding:1.6rem 1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5rem;
}
.trust-icon{
  width:28px;height:28px;
  color:var(--accent);
  flex-shrink:0;
  stroke-width:1.4;
}
.trust-title{font-size:0.8rem;font-weight:600;color:var(--text);margin:0;line-height:1.3}
.trust-sub{font-size:0.74rem;color:var(--text-muted);margin:0;line-height:1.4}