/* ============================================================
   SQUIDTRONIC — Account & Orders
   Auth, Dashboard, Addresses, Order History
   ============================================================ */

/* ---------- Auth View ---------- */
.account-auth{max-width:460px;margin:0 auto;text-align:center}
.account-auth__card{background:var(--c-brand-light);border-radius:12px;padding:32px;margin-top:24px}
.account-auth__google{display:flex;justify-content:center;margin-bottom:16px}
.account-auth__divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--c-text-light);font-size:var(--text-sm)}
.account-auth__divider::before,.account-auth__divider::after{content:'';flex:1;height:1px;background:var(--c-border)}
.account-auth__tabs{display:flex;gap:4px;margin-bottom:24px;background:var(--c-brand);border-radius:8px;padding:4px}
.account-auth__tab{flex:1;padding:10px;border:none;background:none;color:var(--c-text-light);font-size:var(--text-sm);font-weight:600;border-radius:6px;cursor:pointer;transition:background .2s,color .2s}
.account-auth__tab--active{background:var(--c-accent);color:var(--c-brand)}
.account-auth__guest{margin-top:20px;font-size:var(--text-sm);color:var(--c-text-light)}
.account-auth__guest a{color:var(--c-accent)}

/* ---------- Account Form ---------- */
.account-form{text-align:left}
.account-form .form-field{margin-bottom:16px}
.account-form label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--c-text-light);margin-bottom:6px}
.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="password"],
.account-form input[type="tel"],
.account-form select{width:100%;padding:10px 14px;border:1px solid var(--c-border);border-radius:8px;background:var(--c-brand);color:#fff;font-size:var(--text-base);transition:border-color .2s}
.account-form input:focus,.account-form select:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(0,212,170,.15)}
.account-form__error{background:#dc262622;border:1px solid #dc262666;color:#ff6b6b;padding:10px 14px;border-radius:8px;font-size:var(--text-sm);margin-bottom:16px}
.account-form__success{background:#22c55e22;border:1px solid #22c55e66;color:#22c55e;padding:10px 14px;border-radius:8px;font-size:var(--text-sm);margin-bottom:16px}
.account-form__actions{display:flex;gap:12px;margin-top:8px}

/* ---------- Dashboard ---------- */
.account-dashboard__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:16px}

.account-tabs{display:flex;gap:4px;border-bottom:2px solid var(--c-border);margin-bottom:24px;overflow-x:auto}
.account-tabs__tab{padding:12px 20px;border:none;background:none;color:var(--c-text-light);font-size:var(--text-sm);font-weight:600;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .2s,border-color .2s;white-space:nowrap}
.account-tabs__tab--active{color:var(--c-accent);border-bottom-color:var(--c-accent)}
.account-tabs__tab:hover{color:#fff}

/* ---------- Panels ---------- */
.account-panel{max-width:640px}
.account-panel__title{font-size:var(--text-lg);margin-bottom:20px}
.account-panel__subtitle{font-size:var(--text-base);margin:20px 0 12px}
.account-panel__header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.account-empty{text-align:center;padding:40px 20px;color:var(--c-text-light)}

/* ---------- Address Cards ---------- */
.address-card{background:var(--c-brand-light);border:1px solid var(--c-border);border-radius:10px;padding:16px 20px;margin-bottom:12px}
.address-card--default{border-color:var(--c-accent)}
.address-card__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.address-card__label{font-weight:700;font-size:var(--text-sm)}
.address-card__badge{display:inline-block;background:var(--c-accent);color:var(--c-brand);font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;margin-left:8px;vertical-align:middle}
.address-card__actions{display:flex;gap:4px}
.address-card p{color:var(--c-text-light);font-size:var(--text-sm);line-height:1.5;margin:0}

/* ---------- Order History ---------- */
.order-card{background:var(--c-bg-white);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:24px;margin-bottom:20px;transition:box-shadow var(--transition-fast)}
.order-card:hover{box-shadow:var(--shadow-md)}
.order-card__header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--c-border)}
.order-card__id{font-size:var(--text-base);font-weight:700;color:var(--c-text-dark)}
.order-card__date{font-size:var(--text-sm);color:var(--c-text-mid)}
.order-card__status-wrap{display:flex;align-items:center;gap:12px}
.order-card__total{font-size:var(--text-lg);font-weight:700;color:var(--c-text-dark)}
.order-status{display:inline-block;padding:4px 12px;border-radius:99px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.order-status--processing{background:#fef3c7;color:#92400e}
.order-status--shipped{background:#dbeafe;color:#1e40af}
.order-status--delivered{background:#d1fae5;color:#065f46}
.order-card__items{margin-bottom:16px}
.order-card__item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f1f5f9}
.order-card__item:last-child{border-bottom:none}
.order-card__item-name{font-size:var(--text-sm);font-weight:500;color:var(--c-text-dark)}
.order-card__item-meta{font-size:var(--text-sm);color:var(--c-text-mid)}
.order-card__footer{background:#f8fafc;border-radius:var(--radius-md);padding:16px;margin-top:12px}
.order-card__detail{display:flex;justify-content:space-between;font-size:var(--text-sm);color:var(--c-text-mid);padding:4px 0}
.order-card__detail--total{font-weight:700;color:var(--c-text-dark);border-top:1px solid var(--c-border);margin-top:8px;padding-top:8px;font-size:var(--text-base)}
.order-card__address{font-size:12px;color:var(--c-text-mid);margin-top:12px;padding-top:8px;border-top:1px solid var(--c-border)}

/* ---------- Responsive ---------- */
@media(max-width:600px){
  .account-auth__card{padding:20px}
  .account-dashboard__header{flex-direction:column;align-items:flex-start}
  .account-tabs{gap:0}
  .account-tabs__tab{padding:10px 14px;font-size:12px}
  .order-card__header{flex-direction:column}
  .order-card__status-wrap{justify-content:space-between;width:100%}
}