/*
 * common.css — global styles for every storefront page.
 * Design language taken from the prototype homepage (index.html):
 *   Archivo · navy #1A2B4A + magenta #E91E8C + cyan #00AEEF + yellow #F5D800
 *   on white / off-white #F4F6F9 · rounded corners · light shadows ·
 *   full-colour photography with dark gradient overlays · Lucide line icons.
 * Built by skinning Bootstrap 5. Page-specific CSS lives in
 * public/css/{path}/{name}.css.
 */

/* ------------------------------------------------------------------ tokens */
:root {
    --dpd-navy:       #1A2B4A;
    --dpd-navy-900:   #0F1E35;
    --dpd-magenta:    #E91E8C;
    --dpd-magenta-700:#D0177D;
    --dpd-cyan:       #00AEEF;
    --dpd-cyan-700:   #009BD6;
    --dpd-yellow:     #F5D800;
    --dpd-green:      #16A34A;
    --dpd-offwhite:   #F4F6F9;
    --dpd-border:     #DDE1E8;
    --dpd-border-2:   #EEF1F5;
    --dpd-muted:      #5E6E8A;
    --dpd-label:      #94A3B8;

    /* Map Bootstrap 5 onto the palette */
    --bs-body-bg:          #ffffff;
    --bs-body-color:       var(--dpd-navy);
    --bs-body-font-family: 'Archivo', system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-font-size:   .95rem;
    --bs-body-font-weight: 400;
    --bs-emphasis-color:   var(--dpd-navy);
    --bs-heading-color:    var(--dpd-navy);
    --bs-primary:          #E91E8C;
    --bs-primary-rgb:      233, 30, 140;
    --bs-link-color:       var(--dpd-cyan);
    --bs-link-color-rgb:   0, 174, 239;
    --bs-link-hover-color: var(--dpd-cyan-700);
    --bs-border-color:     var(--dpd-border);
    --bs-border-radius:     .5rem;   /* 8px */
    --bs-border-radius-sm:  .375rem;
    --bs-border-radius-lg:  .875rem; /* 14px cards */
    --bs-border-radius-xl:  1rem;
    --bs-border-radius-pill: 999px;

    --dpd-shadow-sm: 0 1px 4px rgba(0,0,0,.07);
    --dpd-shadow-md: 0 8px 28px rgba(0,0,0,.12);
    --dpd-shadow-lg: 0 24px 60px rgba(0,0,0,.16);
    --dpd-section-x: clamp(16px, 4vw, 48px);
}

/* -------------------------------------------------------------------- base */
body {
    background: #fff;
    color: var(--dpd-navy);
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
    color: var(--dpd-navy);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.1;
}

a { color: var(--dpd-cyan); text-decoration: none; }
a:hover { color: var(--dpd-cyan-700); }

img { max-width: 100%; height: auto; }
::selection { background: rgba(233,30,140,.20); }

:focus-visible { outline: 2px solid var(--dpd-magenta); outline-offset: 2px; }

/* Lucide inline-SVG icons */
.dpd-i { width:1.15em; height:1.15em; display:inline-block; vertical-align:-.15em; flex:none; }
.dpd-i--sm { width:.95em; height:.95em; }
.dpd-i--lg { width:1.5em; height:1.5em; }
.dpd-i--xl { width:2rem; height:2rem; }

/* --------------------------------------------------------- layout helpers */
.dpd-shell   { max-width: 1600px; margin-inline: auto; padding-inline: var(--dpd-section-x); }
.dpd-shell--narrow { max-width: 1200px; }
.dpd-shell--tight  { max-width: 860px; }
.dpd-section { padding-block: 64px; }

/* Mobile: .g-5 rows pull out 24px per side, wider than the 16px page gutter —
   shrink them so no row causes horizontal scroll (UI rules §8 R2). */
@media (max-width: 575.98px) {
    .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}
.dpd-section--lg { padding-block: 72px; }

.bg-offwhite { background: var(--dpd-offwhite) !important; }
.bg-navy     { background: var(--dpd-navy) !important;    color: #fff; }
.bg-navy-900 { background: var(--dpd-navy-900) !important; color: #fff; }
.bg-magenta  { background: var(--dpd-magenta) !important; color: #fff; }
.text-magenta{ color: var(--dpd-magenta) !important; }
.text-cyan   { color: var(--dpd-cyan) !important; }
.text-navy   { color: var(--dpd-navy) !important; }
.text-muted-2{ color: var(--dpd-muted) !important; }

/* Uppercase magenta eyebrow / kicker */
.dpd-eyebrow {
    display: inline-block;
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dpd-magenta);
    margin-bottom: .6rem;
}
.dpd-eyebrow--onDark { color: var(--dpd-cyan); }

.dpd-h2 { font-size: clamp(1.55rem, 3.4vw, 2.5rem); }
.dpd-lead { color: var(--dpd-muted); font-size: 1.02rem; line-height: 1.65; }

/* ---------------------------------------------------------------- buttons */
.btn {
    --bs-btn-border-radius: .5rem;
    font-weight: 700;
    font-size: .92rem;
    padding: .8rem 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-width: 2px;
    line-height: 1.2;
}
.btn i, .btn svg { width: 1.05em; height: 1.05em; }
.btn-lg { padding: 1.05rem 2.1rem; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-magenta {
    --bs-btn-color:#fff; --bs-btn-bg:var(--dpd-magenta); --bs-btn-border-color:var(--dpd-magenta);
    --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--dpd-magenta-700); --bs-btn-hover-border-color:var(--dpd-magenta-700);
    --bs-btn-active-bg:var(--dpd-magenta-700); --bs-btn-active-border-color:var(--dpd-magenta-700);
}
.btn-navy {
    --bs-btn-color:#fff; --bs-btn-bg:var(--dpd-navy); --bs-btn-border-color:var(--dpd-navy);
    --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--dpd-navy-900); --bs-btn-hover-border-color:var(--dpd-navy-900);
    --bs-btn-active-bg:var(--dpd-navy-900);
}
.btn-ghost {
    --bs-btn-color:var(--dpd-navy); --bs-btn-bg:var(--dpd-offwhite); --bs-btn-border-color:var(--dpd-offwhite);
    --bs-btn-hover-color:var(--dpd-navy); --bs-btn-hover-bg:#e7ebf1; --bs-btn-hover-border-color:#e7ebf1;
}
.btn-outline-navy {
    --bs-btn-color:var(--dpd-navy); --bs-btn-border-color:var(--dpd-border);
    --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--dpd-navy); --bs-btn-hover-border-color:var(--dpd-navy);
    --bs-btn-active-bg:var(--dpd-navy); background:#fff;
}
.btn-outline-light-navy {
    --bs-btn-color:#fff; --bs-btn-border-color:rgba(255,255,255,.35);
    --bs-btn-hover-color:var(--dpd-navy); --bs-btn-hover-bg:#fff; --bs-btn-hover-border-color:#fff;
}

/* ------------------------------------------------------------------- pills */
.dpd-pill {
    display:inline-flex; align-items:center; gap:.35rem;
    border-radius:999px; font-weight:800; font-size:.72rem;
    padding:.32rem .7rem; line-height:1;
}
.dpd-pill--cyan   { background:var(--dpd-cyan);    color:#fff; }
.dpd-pill--magenta{ background:var(--dpd-magenta); color:#fff; }
.dpd-badge {
    display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.05em;
    text-transform:uppercase; padding:.22rem .45rem; border-radius:4px; color:#fff;
}
.dpd-badge--magenta{background:var(--dpd-magenta);} .dpd-badge--cyan{background:var(--dpd-cyan);}
.dpd-badge--navy{background:var(--dpd-navy);} .dpd-badge--yellow{background:var(--dpd-yellow);color:var(--dpd-navy);}

/* ------------------------------------------------------------------- cards */
.dpd-card {
    background:#fff; border:1px solid var(--dpd-border); border-radius:var(--bs-border-radius-lg);
    box-shadow:var(--dpd-shadow-sm); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow:hidden;
}
.dpd-card:hover { transform:translateY(-3px); box-shadow:var(--dpd-shadow-md); }

/* Image wrapper with bottom gradient for caption legibility */
.dpd-media { position:relative; overflow:hidden; }
.dpd-media img { width:100%; height:100%; object-fit:cover; display:block; }
.dpd-media--grad::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,0) 55%);
}

/* Breadcrumb bar under the nav (content pages) */
.dpd-crumbs { background:#fff; border-bottom:1px solid var(--dpd-border); font-size:.78rem; color:var(--dpd-label); }
.dpd-crumbs .dpd-shell { padding-block:10px; display:flex; align-items:center; gap:6px; }
.dpd-crumbs a { color:var(--dpd-muted); }
.dpd-crumbs a:hover { color:var(--dpd-navy); }
.dpd-crumbs [aria-current] { color:var(--dpd-navy); font-weight:600; }

/* Error pages (errors/404, errors/503) — shared look from the 404 prototype */
.dpd-error { background:var(--dpd-offwhite); }
.dpd-error__inner { max-width:680px; padding-block:80px; text-align:center; }
.dpd-error__code { font-size:6rem; font-weight:800; line-height:1; color:var(--dpd-border); letter-spacing:-.02em; margin:0 0 16px; }
.dpd-error__title { font-size:clamp(1.4rem, 3vw, 2rem); margin-bottom:12px; }
.dpd-error__text { font-size:1rem; color:var(--dpd-muted); margin:0 auto 36px; max-width:520px; }
@media (max-width:575.98px) {
    .dpd-error__inner { padding-block:48px 56px; }
    .dpd-error__code { font-size:4.5rem; }
    .dpd-error__inner > .btn { width:100%; }
}

/* --------------------------------------------------------------- controls */
.form-control {
    border:1.5px solid var(--dpd-border); border-radius:.5rem; padding:.7rem .9rem; color:var(--dpd-navy);
}
.form-control:focus { border-color:var(--dpd-magenta); box-shadow:0 0 0 .18rem rgba(233,30,140,.14); }

/* Required-field marker — standard on EVERY form, regardless of prototype (UI rules §6 R3).
   Markup: <label>Email <span class="dpd-req" aria-hidden="true">*</span></label> + `required` on the control. */
.dpd-req { color:#DC2626; font-weight:700; margin-left:2px; }

/* ================================================================= HEADER */
.dpd-announce {
    background:var(--dpd-navy); color:#fff; font-size:.8rem; font-weight:600;
}
.dpd-announce .dpd-shell { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.5rem; }
.dpd-announce strong { color:var(--dpd-yellow); }
.dpd-announce a { color:#fff; }
.dpd-announce__side { white-space:nowrap; }

.dpd-nav {
    position:sticky; top:0; z-index:1030; background:#fff;
    border-bottom:2px solid var(--dpd-navy); transition:box-shadow .2s ease;
}
.dpd-nav.is-stuck { box-shadow:0 4px 16px rgba(0,0,0,.10); }
.dpd-nav__bar { display:flex; align-items:center; gap:1.25rem; padding-block:.7rem; }
.dpd-nav__logo img { height:44px; width:auto; }
.dpd-nav__menu { display:flex; align-items:center; gap:.35rem; margin:0 auto; list-style:none; padding:0; }
.dpd-nav__link {
    display:inline-flex; align-items:center; gap:.3rem;
    font-size:1rem; font-weight:600; color:var(--dpd-navy);
    padding:.55rem .7rem; border-radius:.5rem; cursor:pointer; white-space:nowrap;
}
.dpd-nav__link:hover { background:var(--dpd-offwhite); color:var(--dpd-navy); }
.dpd-nav__actions { display:flex; align-items:center; gap:.55rem; }
.dpd-icon-btn {
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:.5rem; border:0; background:transparent; color:var(--dpd-navy);
}
.dpd-icon-btn:hover { background:var(--dpd-offwhite); }
.dpd-cart-count {
    position:absolute; top:2px; right:2px; min-width:17px; height:17px; padding:0 4px;
    background:var(--dpd-magenta); color:#fff; font-size:.62rem; font-weight:800;
    border-radius:999px; display:flex; align-items:center; justify-content:center;
}

/* Mega dropdown (Bootstrap dropdown, restyled) */
.dpd-mega { border:1px solid var(--dpd-border); border-radius:.875rem; box-shadow:var(--dpd-shadow-md);
    padding:1.25rem; margin-top:.5rem; min-width:320px; }
.dpd-mega--wide  { min-width:640px; }
.dpd-mega--xwide { width:min(920px, 94vw); left:50%; transform:translateX(-50%); }
.dpd-mega__col-title { font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--dpd-label); margin-bottom:.6rem; }
.dpd-mega__item { display:block; padding:.4rem 0; color:var(--dpd-navy); font-weight:600; font-size:.9rem; }
.dpd-mega__item span { display:block; font-weight:400; font-size:.76rem; color:var(--dpd-muted); }
.dpd-mega__item:hover { color:var(--dpd-magenta); }

/* ================================================================= FOOTER */
.dpd-footer { background:var(--dpd-navy-900); color:#cfd7e6; }
.dpd-footer a { color:#cfd7e6; }
.dpd-footer a:hover { color:#fff; }
.dpd-footer__logo { height:38px; filter:brightness(0) invert(1); }
.dpd-footer__title { color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1rem; position:relative; padding-bottom:.5rem; }
.dpd-footer__title::after { content:""; position:absolute; left:0; bottom:0; width:28px; height:2px; background:var(--dpd-magenta); }
.dpd-footer__links { list-style:none; padding:0; margin:0; }
.dpd-footer__links li { margin-bottom:.55rem; font-size:.88rem; }
.dpd-footer__sample { color:var(--dpd-yellow) !important; font-weight:700; }
.dpd-footer__social { display:flex; gap:.6rem; }
.dpd-footer__social a { display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.18); border-radius:.5rem; }
.dpd-footer__social a:hover { background:var(--dpd-magenta); border-color:var(--dpd-magenta); color:#fff; }
.dpd-footer__tag { color:#9fb0cc; } .dpd-footer__tag strong { color:#fff; }
.dpd-footer__card { border:1px solid rgba(255,255,255,.16); border-radius:.6rem; padding:.85rem 1rem; }
.dpd-footer__card-phone { color:#fff; font-weight:800; }
.dpd-footer__card .small { color:#9fb0cc; }
.dpd-footer__bottom { border-top:1px solid rgba(255,255,255,.12); font-size:.82rem; }
.dpd-pay { display:inline-flex; align-items:center; padding:.2rem .5rem; border:1px solid rgba(255,255,255,.2); border-radius:4px; font-size:.66rem; font-weight:800; letter-spacing:.04em; color:#cfd7e6; }

/* ============================================================ AUTH PAGES */
/* Chrome-less centred card shared by sign-in and sign-up (auth/*.blade.php). */
.dpd-auth {
    min-height: 100vh;
    background: var(--dpd-offwhite);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.dpd-auth__card {
    background: #fff;
    border-radius: 16px;
    max-width: 420px;
    width: 100%;
    padding: 40px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
    text-align: center;
}
.dpd-auth__logo { display: inline-block; margin-bottom: 24px; }
.dpd-auth__logo img { height: 40px; width: auto; }
.dpd-auth__title { font-size: 1.4rem; font-weight: 800; color: var(--dpd-navy); margin: 0 0 .4rem; letter-spacing: -.02em; }
.dpd-auth__sub { font-size: .84rem; color: var(--dpd-muted); margin: 0 0 1.6rem; }
.dpd-auth__label { display: block; font-size: .75rem; font-weight: 700; color: var(--dpd-navy); margin-bottom: .35rem; }
.dpd-auth__code { font-size: 1.15rem; letter-spacing: .35em; text-align: center; }
.dpd-auth__resend { font-size: .82rem; color: var(--dpd-muted); margin: 1.1rem 0 0; }
.dpd-auth__link { background: none; border: 0; padding: 0; color: var(--dpd-cyan); font-weight: 700; cursor: pointer; font: inherit; }
.dpd-auth__link:hover { color: var(--dpd-cyan-700); text-decoration: underline; }
.dpd-auth__link:disabled { color: var(--dpd-label); cursor: default; text-decoration: none; }
.dpd-auth__switch { font-size: .84rem; color: var(--dpd-muted); margin: 1.4rem 0 0; }
.dpd-auth__switch a, .dpd-auth .invalid-feedback a { font-weight: 700; }

/* ========================================================= ACCOUNT AREA */
/* Shell + sidebar shared by every /account page (components/account-sidebar). */
.dpd-acct { background: var(--dpd-offwhite); }
.dpd-acct__layout {
    max-width: 1600px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 60px) 80px;
    display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start;
}
.dpd-acct__crumbs { max-width: 1600px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 60px) 0; font-size: .82rem; color: var(--dpd-muted); }
.dpd-acct__crumbs a { color: var(--dpd-muted); }
.dpd-acct__crumbs a:hover { color: var(--dpd-navy); }
.dpd-acct__crumbs [aria-current] { color: var(--dpd-navy); font-weight: 600; }
.dpd-acct__crumbs + .dpd-acct__layout { padding-top: 16px; }
.dpd-acct__sidebar { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 14px; }
.dpd-acct-card { background: #fff; border-radius: 14px; padding: 16px; box-shadow: var(--dpd-shadow-sm); }
.dpd-acct-profile { display: flex; align-items: center; gap: 12px; padding: 6px 8px 16px; border-bottom: 1px solid var(--dpd-border-2); margin-bottom: 8px; }
.dpd-acct-profile__avatar {
    width: 44px; height: 44px; border-radius: 999px; background: var(--dpd-navy); color: #fff;
    font-size: 1rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none;
}
.dpd-acct-profile__text { min-width: 0; }
.dpd-acct-profile__text p { margin: 0; }
.dpd-acct-profile__hello { font-size: .88rem; font-weight: 600; color: var(--dpd-navy); }
.dpd-acct-profile__email { font-size: .72rem; color: var(--dpd-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpd-acct-profile__since { font-size: .69rem; color: var(--dpd-label); }
.dpd-acct-nav { display: flex; flex-direction: column; gap: 2px; }
.dpd-acct-nav form { margin: 0; }
.dpd-acct-nav__link {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px;
    background: none; font: inherit; font-size: .82rem; font-weight: 600; color: var(--dpd-muted); text-align: left; cursor: pointer;
}
.dpd-acct-nav__link:hover { background: var(--dpd-offwhite); color: var(--dpd-navy); }
.dpd-acct-nav__link.is-active { background: #FFF0F8; color: var(--dpd-magenta); font-weight: 700; }
.dpd-acct-nav__link--logout { color: var(--dpd-label); }
.dpd-acct-nav__link--logout:hover { color: var(--dpd-magenta); }
.dpd-acct-nav__rule { border: 0; border-top: 1px solid var(--dpd-border-2); margin: 6px 0; opacity: 1; }
.dpd-acct-help { padding: 18px; }
.dpd-acct-help__ico { width: 38px; height: 38px; border-radius: 999px; background: #FFF0F8; color: var(--dpd-magenta); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.dpd-acct-help__title { font-size: .85rem; font-weight: 600; color: var(--dpd-navy); margin: 0 0 2px; }
.dpd-acct-help__sub { font-size: .75rem; color: var(--dpd-label); margin: 0 0 12px; }
.dpd-acct-help__btn { display: flex; align-items: center; justify-content: space-between; border: 1.5px solid var(--dpd-border); border-radius: 10px; padding: 10px 14px; font-size: .78rem; font-weight: 700; color: var(--dpd-navy); }
.dpd-acct-help__btn:hover { border-color: var(--dpd-navy); color: var(--dpd-navy); }
@media (max-width: 860px) {
    .dpd-acct__layout { grid-template-columns: 1fr; }
    .dpd-acct__sidebar { position: static; }
}