/* FixPapa · Set 5 · My Account, from the theme's assets/css/account.css.
   Every /account/* page renders section.user-profile-wrap > .container > breadcrumb + .user-profile-flex >
   (component/accountSideNav.js .acc-side) + .user-profile-right; this turns that shell into the design's sidebar +
   panel layout. The Personal Data form (pages/account/user-profile) uses the .acc-* classes below; the other pages keep
   their own content inside the panel. Carries its own tokens so it does not depend on home.css. */
.user-profile-wrap,.acc-dlg{--primary:#FF6A00;--primary-2:#FF8A1F;--white:#FFFFFF;--ink:#0B1220;--ink-2:#1E293B;--ink-3:#475569;--border:#E8EBF1;--border-strong:#D5DBE5;--grad-primary:linear-gradient(135deg,#FF6A00 0%,#FF8A1F 70%,#FFA24D 100%);--grad-accent:linear-gradient(135deg,#FF8A1F 0%,#FFA24D 100%);--grad-dark:linear-gradient(160deg,#0B1220 0%,#111A2E 60%,#16254A 100%);--glow-accent:0 10px 36px -8px rgba(255,138,31,.55);--shadow-sm:0 1px 2px rgba(15,23,42,.05),0 8px 24px -10px rgba(15,23,42,.10);--font-head:'Manrope',system-ui,sans-serif;--font-body:'Inter',system-ui,sans-serif;--ease:cubic-bezier(.2,.8,.2,1)}
.user-profile-wrap{background:#F8FAFC;padding-bottom:56px !important}
.user-profile-wrap :where(.acc-side,.acc-head,.acc-form) :where(button),.acc-dlg :where(button){margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.user-profile-wrap :where(.acc-side,.acc-head,.acc-form) :where(h1,h2,p),.acc-dlg :where(h2,p){margin:0}
.acc-dlg,.acc-dlg *{box-sizing:border-box}
.acc-ic{display:inline-flex;flex:none}
.acc-ic svg{display:block}

/* breadcrumb (each page's own .custom-breadcrumb) */
.user-profile-wrap .custom-breadcrumb{margin-bottom:0 !important}
.user-profile-wrap .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;background:none;font:600 13px var(--font-body);color:var(--ink-3)}
.user-profile-wrap .breadcrumb-item{padding:0;color:var(--ink-3)}
.user-profile-wrap .breadcrumb-item+.breadcrumb-item{padding-left:0}
.user-profile-wrap .breadcrumb-item+.breadcrumb-item::before{content:"";float:none;display:inline-block;width:7px;height:7px;margin:0 10px 1px 0;padding:0;border:solid currentColor;border-width:0 1.8px 1.8px 0;transform:rotate(-45deg);opacity:.7}
.user-profile-wrap .breadcrumb-item a{color:inherit;text-decoration:none}
.user-profile-wrap .breadcrumb-item a:hover{color:var(--primary)}
.user-profile-wrap .breadcrumb-item.active{color:var(--ink)}
/* the old slide-out drawer button: the sidebar shows as a pill row on phones instead */
.user-profile-wrap .profile-menu-btn,.user-profile-wrap .overlay-bg{display:none !important}

/* layout */
.user-profile-wrap .user-profile-flex{display:grid !important;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start;margin-top:14px !important}
.user-profile-wrap .user-profile-right{width:auto;min-width:0;padding:28px !important;border-radius:24px;border:1px solid var(--border);background:var(--white);box-shadow:var(--shadow-sm);animation:accIn .35s var(--ease)}
@keyframes accIn{from{opacity:0;transform:translateY(8px)}}

/* sidebar */
.acc-side{position:sticky;top:92px;padding:10px;border-radius:24px;border:1px solid var(--border);background:var(--white);box-shadow:var(--shadow-sm);font-family:var(--font-body)}
.acc-side--loading{min-height:420px}
.acc-me{display:flex;align-items:center;gap:12px;padding:12px 10px 16px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.acc-me>div{min-width:0}
.acc-me b{display:block;font:800 16px/1.25 var(--font-head);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-me small{font-size:12.5px;color:var(--ink-3)}
.acc-av{flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--grad-primary);color:#fff;font:800 17px var(--font-head);box-shadow:0 8px 18px -10px rgba(255,106,0,.7)}
.acc-av img{width:100%;height:100%;object-fit:cover}
.acc-av--lg{width:92px;height:92px;font-size:30px}
.acc-menu{display:flex;flex-direction:column;gap:2px}
.acc-menu a,.acc-out{display:flex;align-items:center;gap:12px;padding:11px 12px !important;border-radius:12px;font:600 14.5px var(--font-head) !important;color:var(--ink-2) !important;text-align:left;text-decoration:none;background:none;cursor:pointer;transition:background .2s,color .2s}
.acc-menu svg{color:var(--ink-3);transition:color .2s}
.acc-menu a:hover{background:#FFF7F0;color:var(--primary) !important}
.acc-menu a:hover svg,.acc-menu a.on svg{color:var(--primary)}
.acc-menu a.on{background:#FFF1E4;color:var(--primary) !important}
.acc-out{width:100%;margin-top:6px !important;border-top:1px solid var(--border) !important;border-radius:0 0 12px 12px;padding-top:14px !important;color:#DC2626 !important}
.acc-out svg{color:#DC2626}
.acc-out:hover{background:#FEF2F2}

/* panel head (Personal Data; other pages keep their own titles) */
.acc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--border)}
.acc-head h1{font:800 clamp(24px,2.4vw,30px)/1.15 var(--font-head);letter-spacing:-.03em;color:var(--ink);margin:0 0 6px}
.acc-head h1 span{color:var(--primary)}
.acc-head p{font-size:14.5px;color:var(--ink-3)}
.acc-edit{flex:none;display:inline-flex !important;align-items:center;gap:7px;height:40px;padding:0 16px !important;border-radius:999px;border:1px solid var(--border-strong) !important;background:var(--white) !important;font:700 13.5px var(--font-head) !important;color:var(--primary) !important;transition:background .2s,border-color .2s}
.acc-edit:hover{background:#FFF1E4 !important;border-color:var(--primary) !important}

/* Personal Data form */
.acc-form{font-family:var(--font-body)}
.acc-photo{display:flex;align-items:center;gap:18px;margin-bottom:24px}
.acc-photo b{display:block;font:700 15px var(--font-head);color:var(--ink)}
.acc-photo small{display:block;font-size:13px;color:var(--ink-3);margin:2px 0 10px}
.acc-photo-btns{display:flex;gap:8px;flex-wrap:wrap}
.acc-btn-sm{display:inline-flex !important;align-items:center;gap:6px;height:34px;padding:0 13px !important;border-radius:999px;background:#FFF1E4 !important;font:700 12.5px var(--font-head) !important;color:var(--primary) !important;transition:background .2s}
.acc-btn-sm:hover{background:#FFE4CC !important}
.acc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 18px}
.acc-f{position:relative;display:flex;flex-direction:column;gap:7px;min-width:0;margin:0}
.acc-f--full{grid-column:1/-1}
.acc-f>span{font:600 13px var(--font-head);color:var(--ink-2)}
.acc-f>i{position:absolute;left:14px;top:38px;color:var(--ink-3);pointer-events:none;display:flex}
.acc-f input{width:100%;height:48px;margin:0;padding:0 14px 0 44px;border-radius:12px;border:1px solid var(--border-strong);background:var(--white);font:inherit;font-size:15px;color:var(--ink);outline:0;box-shadow:none;transition:border-color .2s,box-shadow .2s,background .2s}
.acc-f input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(255,138,31,.14)}
.acc-f--tel>b{position:absolute;left:44px;top:35px;font-size:15px;font-weight:600;color:var(--ink-2)}
.acc-f--tel input{padding-left:80px}
.acc-f em{display:none;font-style:normal;font-size:12.5px;color:#DC2626}
.acc-f.bad input{border-color:#DC2626}.acc-f.bad em{display:block}
.acc-hint{font-size:12.5px;color:#15803D}
.acc-seg{display:flex;height:48px;padding:4px;border-radius:12px;background:#F3F4F6}
.acc-seg button{flex:1;min-width:0;padding:0 6px !important;border-radius:9px;font:600 13.5px var(--font-head) !important;color:var(--ink-3) !important;background:transparent;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.acc-seg button[aria-checked="true"]{background:#fff !important;color:var(--ink) !important;box-shadow:0 2px 8px -2px rgba(11,18,32,.18)}
.acc-seg button:disabled{cursor:default}
.acc-note{flex-direction:row;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;background:#FFF7F0;font-size:13.5px;color:var(--ink-2)}
.acc-note>span{font:500 13.5px/1.5 var(--font-body) !important;color:var(--ink-2) !important}
.acc-note svg{color:var(--primary)}
.acc-note a{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* read-only look until "Edit profile" */
.acc-form.is-locked input{background:#F8FAFC;border-color:transparent;color:var(--ink);cursor:text}
.acc-form.is-locked input:focus{box-shadow:none}
.acc-form.is-locked .acc-seg button:not([aria-checked="true"]){opacity:.55}
.acc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}

/* buttons (the design's .btn / .btn--ghost, renamed so Bootstrap's .btn stays out of it) */
.acc-btn{display:inline-flex !important;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px !important;border-radius:999px;background:var(--grad-accent) !important;font:700 15px var(--font-head) !important;letter-spacing:.01em;color:#fff !important;white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.acc-btn:hover{transform:translateY(-2px);box-shadow:var(--glow-accent)}
.acc-btn:disabled{opacity:.6;pointer-events:none}
.acc-btn--ghost{background:#fff !important;color:var(--ink) !important;border:1px solid var(--border-strong) !important}
.acc-btn--ghost:hover{box-shadow:0 10px 30px -10px rgba(255,106,0,.35);border-color:var(--primary) !important}
.acc-btn--danger{background:linear-gradient(135deg,#DC2626,#EF4444) !important}

/* logout confirm */
.acc-dlg{position:fixed;inset:0;z-index:1070;display:grid;place-items:center;padding:20px;font-family:var(--font-body)}
.acc-dlg-bd{position:absolute;inset:0;background:rgba(11,18,32,.55);backdrop-filter:blur(5px)}
.acc-dlg-box{position:relative;width:min(400px,100%);padding:28px;border-radius:24px;background:var(--white);text-align:center;box-shadow:0 40px 80px -30px rgba(11,18,32,.6);animation:accIn .3s var(--ease)}
.acc-dlg-ic{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 14px;border-radius:18px;background:#FEF2F2;color:#DC2626}
.acc-dlg-box h2{font:800 21px var(--font-head);color:var(--ink);margin:0 0 6px}
.acc-dlg-box p{margin:0 0 20px;color:var(--ink-3);font-size:14.5px}
.acc-dlg-box>div{display:flex;gap:10px;justify-content:center}

@media (max-width:900px){
  .user-profile-wrap .user-profile-flex{grid-template-columns:minmax(0,1fr);gap:14px}
  .acc-side{position:static;padding:8px}
  .acc-side--loading{min-height:120px}
  .acc-me{padding:8px 8px 12px}
  .acc-menu{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:6px;padding:2px}
  .acc-menu::-webkit-scrollbar{display:none}
  .acc-menu a,.acc-out{flex:none;width:auto;padding:9px 13px !important;border-radius:999px;border:1px solid var(--border);font-size:13.5px !important;white-space:nowrap}
  .acc-menu svg{width:17px;height:17px}
  .acc-out{margin:0 !important;border-top:1px solid var(--border) !important;padding-top:9px !important;border-radius:999px}
}
@media (max-width:640px){
  .user-profile-wrap .user-profile-right{padding:20px 16px !important;border-radius:20px}
  .acc-head{flex-direction:column;gap:12px}
  .acc-grid{grid-template-columns:minmax(0,1fr)}
  .acc-photo{gap:14px}.acc-av--lg{width:72px;height:72px;font-size:24px}
  .acc-seg button{font-size:12.5px !important}
  .acc-actions .acc-btn{flex:1}
}
@media (prefers-reduced-motion:reduce){.user-profile-wrap .user-profile-right,.acc-dlg-box{animation:none}}