:root{
  --color-bg:#f5f3fb;
  --color-dark:#1e1b4b;
  --color-primary:#6d28d9;
  --color-primary-hover:#5b21b6;
  --color-accent:#06b6d4;
  --color-text:#1e1b4b;
  --color-muted:#6b7280;
  --color-border:#ddd6fe;
  --color-success:#16a34a;
  --color-gold:#b45309;
  --color-gold-light:#fcd34d;
  --color-green:#16a34a;
  --color-blue:#2563eb;
  --color-pink:#db2777;
  --color-purple:#7c3aed;
  --bottom-nav-height:74px;
}

*,*::before,*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  padding-bottom:calc(
    var(--bottom-nav-height) + env(safe-area-inset-bottom)
  );
}

button,
input,
a{
  -webkit-tap-highlight-color:transparent;
}

/* -------------------------------------------------
   TOP BAR
   ------------------------------------------------- */
.topbar{
  background:#fff;
  border-bottom:1px solid var(--color-border);
  position:sticky;
  top:0;
  z-index:50;
}

.topbar-inner{
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:900px;
  margin:auto;
  padding:0 16px;
}

.topbar h1{
  margin:0;
  color:var(--color-dark);
  font-size:18px;
  font-weight:900;
  letter-spacing:-.02em;
}

.back-btn{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-dark);
  text-decoration:none;
  border-radius:50%;
  background:#f5f3fb;
}

/* -------------------------------------------------
   PROFILE CARD
   ------------------------------------------------- */
.profile-card{
  margin-top:20px;
  padding:0;
  background:linear-gradient(135deg,#5b21b6 0%,#4c1d95 55%,#312e81 100%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:26px;
  text-decoration:none;
  display:flex;
  align-items:center;
  overflow:hidden;
  box-shadow:0 20px 40px -10px rgba(79,70,229,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}

.profile-card:active{
  transform:scale(.995);
  box-shadow:0 24px 48px -12px rgba(79,70,229,.45);
}

/* Three-column grid: left group | centered animation | right settings */
.profile-card-inner{
  display:grid;
  grid-template-columns:minmax(0, auto) 1fr minmax(0, auto);
  align-items:center;
  gap:16px;
  padding:20px 22px;
  width:100%;
}

.profile-left{
  justify-self:start;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.profile-avatar{
  width:56px;
  height:56px;
  flex-shrink:0;
  border-radius:18px;
  background:rgba(255,255,255,.14);
  color:#fcd34d;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(109,40,217,.18);
  overflow:hidden;
}

.profile-avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:16px;
}

.profile-avatar svg{
  width:26px;
  height:26px;
  stroke:#fcd34d;
  stroke-width:2.2;
}

.profile-info{
  min-width:0;
}

.profile-name{
  margin:0 0 3px;
  color:#fff;
  font-size:17px;
  font-weight:900;
  letter-spacing:-.02em;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.profile-phone{
  margin:0;
  color:#c7d2fe;
  font-size:11px;
  font-weight:700;
  line-height:1.4;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Center: Women Animation — fills remaining space, centers itself */
.profile-animation{
  justify-self:center;
  min-width:0;
  max-width:140px;
  height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.profile-animation #lottie-woman{
  width:96px;
  height:96px;
}

/* Right: Settings Control — slightly compact, far right */
.profile-settings{
  justify-self:end;
  flex:0 0 auto;
  min-width:0;
  width:64px;
  border-radius:12px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:5px;
  text-align:center;
  backdrop-filter:blur(6px);
}

.settings-img{
  width:20px;
  height:20px;
  display:block;
}

.settings-label{
  color:#fcd34d;
  font-size:10px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
}

/* Quick action card animation containers */
.lottie-card-icon{
  width:46px;
  height:46px;
  flex-shrink:0;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.lottie-card-icon > div{
  width:30px;
  height:30px;
}

/* -------------------------------------------------
   QUICK ACTION CARDS
   ---------------------------------================= */
.quick-actions{
  margin-top:16px;
}

.quick-actions .grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.account-card{
  min-height:110px;
  padding:16px;
  background:linear-gradient(135deg,#f5f3ff 0%,#eddcfe 100%);
  border:1px solid rgba(109,40,217,.15);
  border-radius:20px;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
  position:relative;
  overflow:hidden;
}

.account-card:active{
  transform:scale(.98);
  box-shadow:0 12px 28px -8px rgba(109,40,217,.2);
}

.account-card-icon{
  width:46px;
  height:46px;
  flex-shrink:0;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.account-card-icon svg{
  width:24px;
  height:24px;
  stroke-width:2.2;
}

.account-card h2{
  margin:0;
  color:var(--color-dark);
  font-size:15px;
  font-weight:900;
}

.account-card p{
  margin:4px 0 0;
  color:var(--color-muted);
  font-size:11px;
  line-height:1.4;
}

.card-products .account-card-icon{
  background:#f0fdf4;
  color:var(--color-green);
}

.card-referral .account-card-icon{
  background:#fefbeb;
  color:var(--color-gold);
}

/* -------------------------------------------------
   SECTION TITLE
   ---------------------------------================= */
.section-title{
  margin:0 0 12px;
  color:var(--color-dark);
  font-size:17px;
  font-weight:900;
  letter-spacing:-.02em;
}

/* -------------------------------------------------
   OPTION LIST
   ---------------------------------================= */
.option-list{
  overflow:hidden;
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:22px;
  box-shadow:0 8px 24px -8px rgba(30,27,75,.07);
}

.option-item{
  min-height:72px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  border-bottom:1px solid var(--color-border);
  transition:.2s ease;
}

.option-item:last-child{
  border-bottom:0;
}

.option-item:active{
  background:#f8fafc;
}

.option-icon{
  width:44px;
  height:44px;
  flex-shrink:0;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.option-icon svg{
  width:22px;
  height:22px;
  stroke-width:1.8;
}

.small-icon{
  font-size:16px;
  font-weight:800;
}

.option-content{
  flex:1;
  min-width:0;
}

.option-content h3{
  margin:0;
  color:var(--color-dark);
  font-size:14px;
  font-weight:800;
}

.option-content p{
  margin:4px 0 0;
  color:var(--color-muted);
  font-size:11px;
  line-height:1.4;
}

.arrow{
  color:#94a3b8;
  font-size:24px;
  line-height:1;
}

/* Colored option icons */
.opt-products .option-icon{background:#dcfce7;color:var(--color-green);}
.opt-tracking .option-icon{background:#dbeafe;color:var(--color-blue);}
.opt-delivery .option-icon{background:#fef3c7;color:var(--color-gold);}
.opt-telegram .option-icon{background:#fce7f3;color:var(--color-pink);}
.opt-support .option-icon{background:#e0e7ff;color:var(--color-purple);}
.opt-address .option-icon{background:#f3e8ff;color:var(--color-primary);}
.opt-payment .option-icon{background:#fef2f2;color:#dc2626;}

/* -------------------------------------------------
   LOGIN BOX
   ---------------------------------================= */
.login-box{
  margin-top:24px;
  padding:22px 20px;
  text-align:center;
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:22px;
  box-shadow:0 8px 24px -8px rgba(30,27,75,.07);
}

.login-box h2{
  margin:0;
  color:var(--color-dark);
  font-size:17px;
  font-weight:900;
}

.login-box p{
  margin:7px auto 0;
  max-width:320px;
  color:var(--color-muted);
  font-size:12px;
  line-height:1.6;
}

.login-btn{
  width:100%;
  max-width:260px;
  min-height:48px;
  margin-top:16px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,#6d28d9,#5b21b6);
  color:#fff;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 10px 20px -6px rgba(109,40,217,.35);
}

.login-btn:active{
  background:linear-gradient(135deg,#5b21b6,#4c1d95);
}

/* -------------------------------------------------
   BRAND FOOTER
   ---------------------------------================= */
.brand-footer{
  margin:32px 0 14px;
  text-align:center;
}

.brand-footer div{
  color:var(--color-dark);
  font-size:18px;
  font-weight:900;
  letter-spacing:-.02em;
}

.brand-footer div span{
  color:var(--color-primary);
}

.brand-footer p{
  margin:5px 0 0;
  color:var(--color-muted);
  font-size:11px;
}

/* -------------------------------------------------
   BOTTOM NAV
   ---------------------------------================= */
.bottom{
  position:fixed;
  z-index:100;
  left:0;
  right:0;
  bottom:0;
  height:var(--bottom-nav-height);
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--color-border);
  box-shadow:0 -8px 24px -8px rgba(30,27,75,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.bottom-inner{
  height:100%;
  display:grid;
  grid-template-columns:repeat(5,1fr);
}

.nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:var(--color-muted);
  text-decoration:none;
  font-size:10px;
  font-weight:700;
}

.nav-item.active{
  color:var(--color-primary);
}

.nav-icon{
  width:23px;
  height:23px;
}

/* -------------------------------------------------
   DESKTOP
   ---------------------------------================= */
@media(min-width:768px){
  .container{max-width:880px;}
  .profile-card{padding:0;}
  .profile-card-inner{padding:24px 28px;}
  .account-card{min-height:120px;padding:20px;}
  .option-item{min-height:78px;padding:16px 22px;}
  .login-box{padding:26px 28px;}
}

@media(min-width:1200px){
  .container{max-width:900px;}
}

/* -------------------------------------------------
   RESPONSIVE: 360-430px MOBILE
   ------------------------------------------------- */
@media(max-width:430px){
  .profile-card-inner{
    padding:16px;
    gap:10px;
  }

  .profile-avatar{
    width:48px;
    height:48px;
  }

  .profile-name{
    font-size:15px;
  }

  .profile-phone{
    font-size:10px;
  }

  .profile-animation{
    height:72px;
    max-width:120px;
  }

  .profile-animation #lottie-woman{
    width:72px;
    height:72px;
  }

  .profile-settings{
    width:60px;
    padding:4px;
    gap:3px;
  }

  .settings-img{
    width:22px;
    height:22px;
  }

  .settings-label{
    font-size:9px;
  }

  .account-card{
    min-height:96px;
    padding:12px;
    gap:10px;
  }

  .lottie-card-icon{
    width:40px;
    height:40px;
  }

  .lottie-card-icon > div{
    width:24px;
    height:24px;
  }

  .account-card h2{
    font-size:14px;
  }

  .account-card p{
    font-size:10px;
  }
}

@media(max-width:360px){
  .profile-animation{
    height:56px;
    max-width:100px;
  }

  .profile-animation #lottie-woman{
    width:56px;
    height:56px;
  }

  .profile-settings{
    width:56px;
  }

  .settings-label{
    font-size:8px;
  }

  .account-card{
    gap:8px;
  }

  .account-card h2{
    font-size:13px;
  }
}

/* -------------------------------------------------
   LOGIN / CREATE ACCOUNT MODAL
   ---------------------------------================= */
.login-modal{
  position:fixed;
  inset:0;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
}

.login-modal[hidden]{
  display:none;
}

.login-overlay{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.5);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.login-card{
  position:relative;
  width:100%;
  max-width:420px;
  max-height:90vh;
  overflow-y:auto;
  padding:26px 22px 22px;
  background:#fff;
  border-radius:20px;
  border:1px solid var(--color-border);
  box-shadow:0 24px 60px rgba(30,27,75,.25);
  animation:loginModalEnter .25s ease-out;
}

@keyframes loginModalEnter{
  from{opacity:0;transform:translateY(12px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.login-close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:#f1f5f9;
  color:var(--color-dark);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.login-close:active{
  background:#e2e8f0;
}

.login-title{
  margin:0 0 4px;
  color:var(--color-dark);
  font-size:22px;
  font-weight:850;
  letter-spacing:-.02em;
}

.login-subtitle{
  margin:0 0 18px;
  color:var(--color-muted);
  font-size:12px;
  line-height:1.5;
}

.login-form{
  display:grid;
  gap:13px;
}

.login-field{
  display:grid;
  gap:6px;
}

.login-field span{
  color:var(--color-dark);
  font-size:12px;
  font-weight:700;
}

.login-field input,
.login-field select{
  width:100%;
  min-height:46px;
  padding:0 12px;
  border:1px solid var(--color-border);
  border-radius:11px;
  background:#fff;
  color:var(--color-dark);
  font-family:inherit;
  font-size:14px;
  outline:none;
}

.login-field input:focus,
.login-field select:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(109,40,217,.08);
}

.login-field input:invalid{
  border-color:#dc2626;
}

.login-check{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:2px 0;
  color:var(--color-muted);
  font-size:11px;
  line-height:1.5;
  cursor:pointer;
}

.login-check input{
  width:17px;
  height:17px;
  flex:0 0 17px;
  margin-top:2px;
  accent-color:var(--color-primary);
}

.login-primary{
  width:100%;
  min-height:48px;
  margin-top:4px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg,#6d28d9,#5b21b6);
  color:#fff;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}

.login-primary:active{
  background:linear-gradient(135deg,#5b21b6,#4c1d95);
}

.login-error{
  margin:10px 0 0;
  color:#dc2626;
  font-size:11px;
  font-weight:700;
  line-height:1.45;
}

.login-switch{
  margin:16px 0 0;
  text-align:center;
  font-size:12px;
  color:var(--color-muted);
}

.login-link{
  color:var(--color-primary);
  font-weight:700;
  text-decoration:none;
}

.login-link:hover{
  color:var(--color-primary-hover);
}

@media(max-width:480px){
  .login-card{padding:22px 16px 18px;border-radius:16px;max-height:92vh;overflow-y:auto}
  .login-title{font-size:20px}
}

/* -------------------------------------------------
   CONTACT CARD (contact.html)
   ---------------------------------================= */
.contact-card{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:18px;
  padding:22px 18px;
}

.contact-label{
  margin-bottom:16px;
}

.contact-label h2{
  margin:0 0 4px;
  color:var(--color-dark);
  font-size:17px;
  font-weight:800;
}

.contact-label p{
  margin:0;
  color:var(--color-muted);
  font-size:13px;
  line-height:1.5;
}

.telegram-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:0 16px;
  border:1px solid var(--color-border);
  border-radius:12px;
  background:#fff;
  color:var(--color-dark);
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  transition:.2s ease;
}

.telegram-btn:active{
  background:#f8fafc;
}

.telegram-btn svg{
  flex-shrink:0;
}

.open-in-new{
  margin-left:auto;
  font-size:14px;
  color:var(--color-primary);
}

.contact-note{
  margin-top:12px;
  color:var(--color-muted);
  font-size:12px;
  line-height:1.5;
}

.contact-note strong{
  color:var(--color-dark);
}

/* -------------------------------------------------
   SAVED ADDRESS (saved-address.html)
   ---------------------------------================= */
.address-card{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:18px;
  padding:22px 18px;
}

.address-empty{
  text-align:center;
  padding:40px 20px;
  color:var(--color-muted);
}

.empty-icon{
  font-size:32px;
  margin-bottom:10px;
}

.address-saved{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px;
  background:#f8fafc;
  border:1px solid var(--color-border);
  border-radius:12px;
}

.address-row{
  flex:1;
  min-width:0;
}

.edit-btn{
  flex-shrink:0;
  min-height:36px;
  padding:0 14px;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:#fff;
  color:var(--color-dark);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.edit-btn:active{
  background:#f1f5f9;
}

.add-address-btn{
  width:100%;
  min-height:44px;
  margin-top:16px;
  border:1px dashed var(--color-border);
  border-radius:12px;
  background:#fff;
  color:var(--color-primary);
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.add-address-btn:active{
  background:#f8fafc;
}

/* Multiple saved addresses */
.address-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.address-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:#f8fafc;
  border:1px solid var(--color-border);
  border-radius:12px;
}

.address-item .addr-main{
  flex:1;
  min-width:0;
}

.address-item .addr-label{
  display:inline-block;
  margin-bottom:6px;
  padding:2px 8px;
  border-radius:6px;
  background:rgba(109,40,217,.10);
  color:var(--color-primary);
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
}

.address-item .addr-name{
  margin:0;
  font-size:14px;
  font-weight:800;
  color:var(--color-dark);
}

.address-item .addr-detail{
  margin:4px 0 0;
  font-size:12px;
  color:var(--color-muted);
  line-height:1.5;
}

.address-item .addr-phone{
  margin:3px 0 0;
  font-size:11px;
  color:var(--color-muted);
  font-weight:700;
}

.address-actions{
  display:flex;
  gap:6px;
  flex-shrink:0;
}

.addr-icon-btn{
  min-height:34px;
  min-width:34px;
  padding:0 8px;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:#fff;
  color:var(--color-dark);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.addr-icon-btn:active{
  background:#f1f5f9;
}

.addr-icon-btn.danger{
  color:#dc2626;
  border-color:#fecaca;
}

.addr-icon-btn.danger:active{
  background:#fef2f2;
}

/* Address form modal */
.address-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
  background:rgba(15,23,42,.5);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.address-modal[hidden]{
  display:none;
}

.address-modal-card{
  width:min(100%,440px);
  max-height:92vh;
  overflow-y:auto;
  background:#fff;
  border-radius:20px;
  padding:22px 20px 20px;
  border:1px solid var(--color-border);
  box-shadow:0 24px 60px rgba(30,27,75,.25);
}

.address-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}

.address-modal-head h2{
  margin:0;
  color:var(--color-dark);
  font-size:19px;
  font-weight:900;
  letter-spacing:-.02em;
}

.address-modal-close{
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#f1f5f9;
  color:var(--color-dark);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.address-modal-close:active{
  background:#e2e8f0;
}

.address-field{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:14px;
}

.address-field label{
  font-size:12px;
  font-weight:800;
  color:var(--color-dark);
}

.addr-required{
  color:#dc2626;
}

.address-field input,
.address-field textarea,
.address-field select{
  width:100%;
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--color-border);
  border-radius:10px;
  background:#fff;
  color:var(--color-dark);
  font-family:inherit;
  font-size:14px;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}

.address-field textarea{
  resize:vertical;
  min-height:72px;
  padding:10px 12px;
}

.address-field input:focus,
.address-field textarea:focus,
.address-field select:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(109,40,217,.10);
}

.address-field input.invalid,
.address-field textarea.invalid{
  border-color:#dc2626;
  box-shadow:0 0 0 3px rgba(220,38,38,.08);
}

.addr-error{
  display:block;
  min-height:16px;
  font-size:11px;
  font-weight:700;
  color:#dc2626;
  line-height:1.4;
}

.addr-error:empty{
  display:none;
}

.address-modal-actions{
  display:flex;
  gap:10px;
  margin-top:8px;
}

.addr-btn-secondary{
  flex:1;
  min-height:46px;
  border:1px solid var(--color-border);
  border-radius:12px;
  background:#fff;
  color:var(--color-dark);
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}

.addr-btn-secondary:active{
  background:#f1f5f9;
}

.addr-btn-primary{
  flex:1;
  min-height:46px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg,#6d28d9,#5b21b6);
  color:#fff;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 20px -6px rgba(109,40,217,.4);
}

.addr-btn-primary:active{
  background:linear-gradient(135deg,#5b21b6,#4c1d95);
}

.addr-btn-primary:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* -------------------------------------------------
   PAYMENT METHODS (payment-methods.html)
   ---------------------------------================= */
.payment-card{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:18px;
  padding:22px 18px;
}

.payment-method{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  background:#f8fafc;
  border:1px solid var(--color-border);
  border-radius:12px;
}

.method-icon{
  width:60px;
  height:60px;
  flex-shrink:0;
  border-radius:10px;
  background:#eff6ff;
  color:var(--color-primary);
  display:flex;
  align-items:center;
  justify-content:center;
}

.method-info{
  flex:1;
  min-width:0;
}

.method-info h3{
  margin:0 0 4px;
  color:var(--color-dark);
  font-size:15px;
  font-weight:800;
}

.method-info p{
  margin:0;
  color:var(--color-muted);
  font-size:13px;
  line-height:1.5;
}

.method-action{
  flex-shrink:0;
}

.method-label{
  font-size:11px;
  font-weight:800;
  color:var(--color-primary);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.payment-note{
  margin-top:16px;
  color:var(--color-muted);
  font-size:13px;
  line-height:1.6;
}

/* -------------------------------------------------
   RESPONSIVE: saved address modal + list
   ---------------------------------================= */
@media(max-width:430px){
  .address-modal-card{
    padding:18px 14px 16px;
    border-radius:16px;
  }

  .address-modal-head h2{
    font-size:17px;
  }

  .address-field{
    margin-bottom:12px;
  }

  .address-field input,
  .address-field textarea,
  .address-field select{
    min-height:42px;
    font-size:13px;
  }

  .address-field textarea{
    min-height:66px;
    padding:9px 11px;
  }

  .address-modal-actions{
    flex-direction:column;
  }

  .addr-btn-secondary,
  .addr-btn-primary{
    width:100%;
  }

  .address-item{
    flex-direction:column;
    align-items:stretch;
  }

  .address-actions{
    justify-content:flex-end;
  }
}