﻿/* Abzar Shokri — Account Dashboard (Digikala style) */
body:has(.account-layout){background:#f5f5f5}
/* hide search from account pages via class already added */
.is-account-header .header-search{display:none !important}

/* layout */
.account-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;padding:24px 0 40px;align-items:start}
.account-sidebar{background:#fff;border:1px solid #e0e0e2;border-radius:12px;overflow:hidden;position:sticky;top:96px}
.account-sidebar__user{padding:20px 16px 16px;text-align:center;border-bottom:1px solid #f0f0f1}
.account-sidebar__avatar{width:56px;height:56px;background:#fff8e1;border:1px solid #ffecb3;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;color:#f5c400}
.account-sidebar__avatar svg{width:28px;height:28px}
.account-sidebar__name{font-weight:700;font-size:15px}
.account-sidebar__email{font-size:12px;color:#81858b;margin-top:2px}
.account-sidebar__nav{padding:8px}
.account-nav-link{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:14px;font-weight:500;color:#3f4064;border-radius:8px;margin-bottom:2px;border-right:none;transition:.15s}
.account-nav-link:hover{background:#f5f5f5;color:#0c0c0c}
.account-nav-link.is-active{background:#fffde7;color:#a68c00;border-right:none;box-shadow:inset 0 0 0 1px #ffecb3}
.account-content{background:#fff;border:1px solid #e0e0e2;border-radius:12px;padding:24px;min-height:420px}
.account-content__title{font-size:19px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.account-content__title::after{content:"";flex:1;height:1px;background:#f0f0f1;margin-right:12px}

/* breadcrumb inside account */
.ac-breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:#81858b;margin-bottom:14px}
.ac-breadcrumb a{color:#81858b}
.ac-breadcrumb a:hover{color:#f5c400}

/* dashboard cards */
.dashboard-stats{grid-template-columns:repeat(4,1fr);gap:12px}
.stat-card{background:#fff;border:1px solid #e0e0e2;border-radius:10px;padding:16px;transition:.15s}
.stat-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.06)}
.stat-card__value{font-size:22px}
.ac-greeting{background:linear-gradient(135deg,#fffde7,#fff);border:1px solid #ffecb3;border-radius:10px;padding:16px 20px;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.ac-greeting strong{font-size:16px}
.ac-shortcuts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.ac-shortcut{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 8px;border:1px solid #e0e0e2;border-radius:12px;text-decoration:none;color:#3f4064;background:#fff;transition:.15s}
.ac-shortcut:hover{border-color:#f5c400;box-shadow:0 4px 12px rgba(0,0,0,.05)}
.ac-shortcut__icon{width:44px;height:44px;border-radius:10px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;color:#3f4064}
.ac-shortcut__label{font-size:13px;font-weight:600}
/* orders */
.orders-table{border:1px solid #e0e0e2;border-radius:10px;overflow:hidden}
.orders-table th{background:#f5f5f5}
/* wishlist grid 3 cols in account */
#wishlist-grid{grid-template-columns:repeat(3,1fr)}
/* forms */
#profile-form .input,#password-form .input{height:44px;border-radius:8px}
.btn-primary{background:#f5c400;border-color:#f5c400;color:#111}
.btn-primary:hover{background:#e6b800}
/* mobile — native app feel (≤900px). Desktop above is untouched. */
@media(max-width:900px){
  /* ── dedicated app account screen: no storefront chrome ── */
  body:has(.account-layout) #site-header,
  body:has(.account-layout) #mobile-header,
  body:has(.account-layout) .site-header,
  body:has(.account-layout) .mobile-header,
  body:has(.account-layout) .site-nav,
  body:has(.account-layout) .top-bar,
  body:has(.account-layout) .promo-topbar,
  body:has(.account-layout) .header-services,
  body:has(.account-layout) .header-search,
  body:has(.account-layout) .mobile-header__search-wrap,
  body:has(.account-layout) #site-footer,
  body:has(.account-layout) .site-footer,
  body:has(.account-layout) footer{display:none !important}
  body:has(.account-layout){padding-top:0 !important}
  body:has(.account-layout) main{padding-top:0}
  body:has(.account-layout){background:#f3f4f6}
  .account-layout{grid-template-columns:1fr;gap:12px;padding:12px 0 96px}
  .account-layout .container{padding-inline:12px}
  /* ── compact profile header card ── */
  .account-sidebar{position:static;background:transparent;border:none;overflow:visible}
  .account-sidebar__user{display:flex;align-items:center;gap:12px;text-align:right;background:#fff;border:1px solid #ececef;border-radius:16px;margin-bottom:10px;padding:12px 14px}
  .account-sidebar__avatar{width:48px;height:48px;margin:0;flex-shrink:0;background:#fff7d6;border-color:#f5e08a}
  .account-sidebar__avatar svg{width:24px;height:24px}
  .account-sidebar__name{font-size:14px;line-height:1.5}
  .account-sidebar__email{font-size:11.5px;margin-top:1px}
  /* ── app menu list (single grouped card) ── */
  .account-sidebar__nav{display:flex;flex-direction:column;gap:0;padding:4px;background:#fff;border:1px solid #ececef;border-radius:16px;overflow:hidden}
  .account-nav-link{position:relative;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;min-height:52px;padding:10px 12px;background:transparent;border:none;border-radius:0;box-shadow:none;white-space:nowrap;text-align:right;font-size:13.5px;font-weight:600;line-height:1.5;color:#232430;border-bottom:1px solid #f1f2f4;margin:0}
  .account-nav-link:last-child{border-bottom:none}
  .account-nav-link svg{width:19px;height:19px;flex-shrink:0;color:#6b7280;background:#f3f4f6;border-radius:10px;padding:7px;box-sizing:content-box}
  .account-nav-link::after{content:"";width:7px;height:7px;border-left:1.5px solid #c8ccd1;border-bottom:1.5px solid #c8ccd1;transform:rotate(45deg);position:absolute;left:14px;top:50%;margin-top:-4px}
  .account-nav-link:hover{border:none;box-shadow:none;transform:none;background:#fafafa}
  .account-nav-link:active{background:#f3f4f6}
  .account-nav-link.is-active{background:#fffbeb;border:none;box-shadow:inset 3px 0 0 #f5c400;border-radius:0}
  .account-nav-link.is-active svg{color:#8a6d00;background:#fef3c7}
  .account-nav-link[href="login.html"]{grid-column:auto;flex-direction:row;min-height:52px;color:#d92d20;border:none;background:transparent}
  .account-nav-link[href="login.html"] svg{color:#d92d20;background:#fee4e2}
  /* cart shortcut is desktop-only — keep the mobile account menu unchanged */
  .account-nav-link[href="account-cart.html"]{display:none}
  /* ── content as clean sections ── */
  .account-content{padding:14px;border-radius:16px;border-color:#ececef;min-height:0}
  .account-content__title{font-size:15px;margin-bottom:12px}
  .ac-breadcrumb{font-size:11px;margin-bottom:10px}
  .ac-greeting{padding:12px 14px;margin-bottom:12px;border-radius:14px;gap:8px}
  .ac-greeting .btn{min-height:40px;font-size:13px;padding:8px 16px}
  .dashboard-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .stat-card{padding:12px 10px;border-radius:14px;border-color:#ececef;text-align:center}
  .stat-card__value{font-size:19px;font-weight:800}
  .stat-card__label{font-size:11.5px;color:#6b7280;margin-top:2px}
  .ac-shortcuts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
  .ac-shortcut{flex-direction:row;justify-content:flex-start;gap:10px;padding:12px;border-radius:14px;border-color:#ececef;min-height:56px}
  .ac-shortcut:active{transform:scale(.98)}
  .ac-shortcut__icon{width:36px;height:36px;flex-shrink:0;border-radius:10px}
  .ac-shortcut__label{font-size:12.5px}
  #wishlist-grid{grid-template-columns:repeat(2,1fr)}
  /* forms: full-width touch targets */
  #profile-form,#password-form{max-width:none !important}
  #profile-form .form-row{display:grid;grid-template-columns:1fr;gap:10px}
  #profile-form .input,#password-form .input{height:48px;font-size:14px}
  #profile-form .btn,#password-form .btn{width:100%;min-height:48px;margin-top:12px}
  .empty-state{padding:28px 16px !important;border-radius:14px}
  .empty-state__icon{width:56px !important;height:56px !important}
  .empty-state__title{font-size:14px}
  .empty-state__text{font-size:12.5px}
  /* orders table → stacked cards */
  .orders-table,.orders-table thead,.orders-table tbody,.orders-table tr,.orders-table td{display:block;width:100%}
  .orders-table{border:none;background:transparent}
  .orders-table thead{display:none}
  .orders-table tr{background:#fff;border:1px solid #ececef;border-radius:14px;padding:12px 14px;margin-bottom:8px}
  .orders-table td{border:none;padding:3px 0;font-size:13px}
  .address-card{border-radius:14px;padding:12px 14px}
}
@media(max-width:480px){
 #wishlist-grid{grid-template-columns:1fr}
 .orders-table{font-size:12px}
}

/* ── Address modal: city/province dropdowns ── */
.addr-city-dd,.addr-province-dd{position:relative;display:block}
.addr-city-dd .input,.addr-province-dd .input{margin:0}
.addr-city-trigger,.addr-province-trigger{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:none;cursor:pointer;z-index:1}
.addr-city-dd:focus-within .input,.addr-province-dd:focus-within .input{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-50)}
.addr-city-menu,.addr-province-menu{position:fixed;background:var(--color-white);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);padding:6px;margin:0;list-style:none;overflow-y:auto;overflow-x:hidden;max-height:min(280px,50vh);-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
.addr-city-menu__item,.addr-province-menu__item{padding:10px 12px;border-radius:var(--radius-md);font-size:var(--font-size-base);color:var(--text-primary);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;list-style:none}
.addr-city-menu__item:hover,
.addr-city-menu__item.is-selected,
.addr-province-menu__item:hover,
.addr-province-menu__item.is-selected{background:var(--color-primary-50);color:var(--color-primary)}
.addr-city-menu__item:active,.addr-province-menu__item:active{background:var(--color-primary-100)}
.addr-city-menu li,.addr-province-menu li{list-style:none}
