/* ---------- Header: logged-in dropdown ---------- */
.auth-links{display:inline-flex;align-items:center;gap:2px}
.acct-menu{position:relative;padding:6px 0}
.acct-trigger i.fa-chevron-down{font-size:9px;margin-left:2px}
.acct-drop{display:none;position:absolute;right:0;top:100%;min-width:190px;background:#fff;color:var(--text,#1b2433);border:1px solid var(--line,#e4e9f1);border-radius:8px;box-shadow:0 10px 30px rgba(10,42,82,.18);padding:6px;z-index:80}
.acct-menu:hover .acct-drop,.acct-menu:focus-within .acct-drop{display:block}
.acct-drop a,.acct-drop button{display:flex!important;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:6px;font-size:13px;color:#1b2433!important;text-align:left;font-family:inherit}
.acct-drop a:hover,.acct-drop button:hover{background:#f2f5fa;color:#0b3d7a!important}
.acct-drop i{width:16px;color:#6b7686}

/* ---------- Auth pages ---------- */
.auth-wrap{padding:44px 16px 64px;background:linear-gradient(180deg,#f6f8fc,#fff)}
.auth-card{max-width:460px;margin:0 auto;background:#fff;border:1px solid var(--line,#e4e9f1);border-radius:14px;padding:34px 32px;box-shadow:0 10px 40px rgba(10,42,82,.08)}
.auth-card h1{font-size:26px;color:var(--navy,#0a2a52);text-align:center;font-weight:800}
.auth-sub{text-align:center;color:#5a667a;margin:6px 0 22px;font-size:13.5px}
.auth-icon{width:64px;height:64px;border-radius:50%;background:#eef3fb;color:var(--primary,#0b3d7a);display:grid;place-items:center;font-size:28px;margin:0 auto 14px}
.auth-foot{text-align:center;margin-top:20px;font-size:13px;color:#5a667a}
.auth-foot a,.f-between a{color:var(--primary,#0b3d7a);font-weight:600}
.auth-foot.small{font-size:12px}
.f-field{margin-bottom:16px}
.f-field label{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
.f-field label small{font-weight:400;color:#6b7686}
.f-input{position:relative}
.f-input i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#9aa6b8;font-size:14px}
.f-input input{width:100%;padding:11px 12px 11px 38px;border:1px solid var(--line,#e4e9f1);border-radius:8px;outline:0;background:#fff;font-size:14px}
.f-input input:focus{border-color:var(--primary,#0b3d7a);box-shadow:0 0 0 3px rgba(11,61,122,.1)}
.f-input.disabled input{background:#f4f6fa;color:#6b7686}
.f-err{display:block;color:#d62828;font-size:12px;margin-top:5px}
.f-err.center{text-align:center}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f-between{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-size:13px}
.f-check{display:flex;align-items:center;gap:8px;font-size:13px}
.f-check input{accent-color:var(--primary,#0b3d7a);width:15px;height:15px}
.otp-input{display:block;width:100%;text-align:center;font-size:30px;font-weight:700;letter-spacing:12px;padding:12px 8px 12px 20px;border:2px solid var(--line,#e4e9f1);border-radius:10px;outline:0;color:var(--navy,#0a2a52)}
.otp-input:focus{border-color:var(--primary,#0b3d7a)}
.resend-form{text-align:center;margin-top:16px;font-size:13px}
.link-btn{color:var(--primary,#0b3d7a);font-weight:600;font-size:13px}
.link-btn:disabled{color:#9aa6b8;cursor:not-allowed}
.link-btn.red{color:#d62828}
.btn-white{background:#fff;color:var(--primary,#0b3d7a)}
.btn-white:hover{background:#eef3fb}
.btn-danger-o{background:#fff;border-color:#f1b8b8;color:#d62828}
.btn-danger-o:hover{background:#d62828;color:#fff}

/* ---------- Account layout ---------- */
.acc-layout{display:grid;grid-template-columns:260px 1fr;gap:24px;padding-top:28px;padding-bottom:60px;align-items:start}
.acc-side{border:1px solid var(--line,#e4e9f1);border-radius:10px;overflow:hidden;background:#fff;position:sticky;top:90px}
.acc-user{display:flex;gap:12px;align-items:center;padding:18px;background:var(--navy,#0a2a52);color:#fff}
.acc-user small{display:block;font-size:11px;opacity:.8;word-break:break-all}
.acc-avatar{width:44px;height:44px;border-radius:50%;background:var(--orange,#f28a1e);display:grid;place-items:center;font-weight:700;font-size:18px;flex:none}
.acc-side nav{padding:8px}
.acc-side nav a,.acc-side nav button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:7px;font-size:13.5px;font-weight:500;color:#1b2433;text-align:left;font-family:inherit}
.acc-side nav i{width:18px;text-align:center;color:#6b7686}
.acc-side nav a:hover,.acc-side nav button:hover{background:#f2f5fa}
.acc-side nav a.active{background:#eaf1fb;color:var(--primary,#0b3d7a);font-weight:600}
.acc-side nav a.active i{color:var(--primary,#0b3d7a)}
.acc-side nav button{color:#d62828}.acc-side nav button i{color:#d62828}
.acc-main{min-width:0}
.acc-alert{background:#fdecec;color:#a52020;border:1px solid #f5c6c6;padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:13px}
.acc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.acc-head h1{font-size:24px;color:var(--navy,#0a2a52)}
.back{font-size:12px;color:var(--primary,#0b3d7a);font-weight:500}
.acc-welcome{background:linear-gradient(120deg,#0a2a52,#134785);color:#fff;border-radius:12px;padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.acc-welcome h1{font-size:24px}.acc-welcome p{opacity:.85;margin-top:2px}
.acc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.acc-stat{display:flex;gap:12px;align-items:center;border:1px solid var(--line,#e4e9f1);border-radius:10px;padding:16px;background:#fff}
.acc-stat>i{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-size:18px;background:#eef3fb}
.c-blue{color:#0b3d7a}.c-orange{color:#f28a1e;background:#fff3e0!important}.c-green{color:#1f9d55;background:#e0f6e8!important}.c-purple{color:#7a4cc2;background:#f0e8ff!important}
.acc-stat b{display:block;font-size:20px;color:var(--navy,#0a2a52)}.acc-stat span{font-size:12px;color:#6b7686}
.acc-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start}
.acc-box{border:1px solid var(--line,#e4e9f1);border-radius:10px;padding:20px;background:#fff;margin-bottom:16px}
.acc-box h3{font-size:15px;color:var(--navy,#0a2a52);margin-bottom:12px}
.acc-box p{margin-bottom:4px;font-size:13.5px}
.acc-box-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.acc-box-head h3{margin:0}
.acc-hr{border:0;border-top:1px solid var(--line,#e4e9f1);margin:16px 0}
.acc-order-row{display:grid;grid-template-columns:1fr auto 90px;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line,#e4e9f1)}
.acc-order-row:first-of-type{border-top:0}
.acc-order-row small,.acc-order-top small{display:block;color:#6b7686;font-size:12px}
.acc-order-row .amt{text-align:right}
.acc-order-row:hover b:first-child{color:var(--primary,#0b3d7a)}
.acc-empty{text-align:center;padding:30px 10px}
.acc-empty i{font-size:34px;color:#c4cbd8;margin-bottom:8px}
.acc-empty p{color:#6b7686;margin-bottom:12px}
.acc-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.acc-chips a{padding:6px 14px;border:1px solid var(--line,#e4e9f1);border-radius:20px;font-size:12.5px;background:#fff}
.acc-chips a.active{background:var(--primary,#0b3d7a);color:#fff;border-color:var(--primary,#0b3d7a)}
.acc-order{border:1px solid var(--line,#e4e9f1);border-radius:10px;background:#fff;margin-bottom:14px;overflow:hidden}
.acc-order-top{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#f7f9fc;border-bottom:1px solid var(--line,#e4e9f1)}
.acc-order-items{padding:14px 18px;display:flex;flex-direction:column;gap:4px;font-size:13.5px}
.acc-order-items em{font-style:normal;color:#6b7686}
.acc-order-bottom{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-top:1px solid var(--line,#e4e9f1);gap:10px;flex-wrap:wrap}
.acc-actions{display:flex;gap:12px;align-items:center}
.acc-actions .btn{padding:8px 16px}
.acc-pager{display:flex;gap:6px;justify-content:center;margin-top:20px}
.acc-pager a,.acc-pager span{min-width:34px;height:34px;border:1px solid var(--line,#e4e9f1);border-radius:6px;display:grid;place-items:center;font-size:13px;padding:0 8px;background:#fff}
.acc-pager .active{background:var(--primary,#0b3d7a);color:#fff;border-color:var(--primary,#0b3d7a)}.acc-pager .disabled{opacity:.45}

/* status pills */
.st{display:inline-block;padding:2px 11px;border-radius:20px;font-size:11px;font-weight:600;background:#eef1f6;color:#4a566b}
.st.lg{font-size:13px;padding:5px 16px}
.st-pending{background:#fff3e0;color:#b36200}.st-confirmed{background:#e3f0ff;color:#0b4fa8}.st-packed{background:#f0e8ff;color:#6a3fb5}
.st-shipped{background:#e0f2fe;color:#0369a1}.st-delivered{background:#e0f6e8;color:#14683a}.st-cancelled{background:#fdecec;color:#a52020}
.st-pay-pending{background:#fff3e0;color:#b36200}.st-pay-paid{background:#e0f6e8;color:#14683a}.st-pay-failed{background:#fdecec;color:#a52020}.st-pay-refunded{background:#eee;color:#555}

/* order detail */
.acc-track{display:flex;justify-content:space-between;position:relative;padding:6px 10px}
.acc-track::before{content:"";position:absolute;left:8%;right:8%;top:22px;border-top:2px dashed #cfd6e2}
.tr-step{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;z-index:1;flex:1;font-size:12px;color:#6b7686}
.tr-step span{width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid #cfd6e2;display:grid;place-items:center;font-size:12px;font-weight:700}
.tr-step.done span{background:var(--primary,#0b3d7a);border-color:var(--primary,#0b3d7a);color:#fff}
.tr-step.done small{color:#1b2433;font-weight:600}
.acc-cancelled{color:#a52020;font-weight:600;display:flex;gap:10px;align-items:center}
.acc-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line,#e4e9f1)}
.acc-item img{width:64px;height:64px;object-fit:contain;background:#f4f5f7;border-radius:8px}
.acc-item small{display:block}
.item-name{font-weight:600;font-size:13.5px}
a.item-name:hover{color:var(--primary,#0b3d7a)}
.acc-sum{margin-top:10px;border-top:1px solid var(--line,#e4e9f1);padding-top:10px}
.acc-sum div{display:flex;justify-content:space-between;padding:5px 0;font-size:13.5px}
.acc-sum .grand{border-top:1px solid var(--line,#e4e9f1);margin-top:6px;padding-top:10px;font-size:16px;font-weight:700}
.green{color:#1f9d55}

/* addresses */
.acc-addr{border:1px solid var(--line,#e4e9f1);border-radius:10px;padding:16px;background:#fff;margin-bottom:12px}
.acc-addr.is-default{border:2px solid var(--primary,#0b3d7a);background:#f3f8ff}
.acc-addr-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.acc-addr p{font-size:13.5px}
.acc-addr .acc-actions{margin-top:10px}
.acc-addr form{display:inline}

@media (max-width:980px){
  .acc-layout{grid-template-columns:1fr}.acc-side{position:static}
  .acc-side nav{display:flex;flex-wrap:wrap;gap:4px}.acc-side nav a,.acc-side nav button,.acc-side nav form{width:auto}
  .acc-grid{grid-template-columns:1fr}.acc-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .auth-card{padding:26px 18px}.f-row{grid-template-columns:1fr}
  .acc-order-row{grid-template-columns:1fr auto}.acc-order-row .amt{grid-column:1/-1;text-align:left}
  .acc-track{flex-wrap:wrap;row-gap:14px}.acc-track::before{display:none}.tr-step{flex:0 0 33%}
}