/* Shared Baharestan theme for public pages, login and customer views. */
@font-face{font-family:Vazirmatn;src:url('/assets/vpn/fonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:100 600;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('/assets/vpn/fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700 900;font-display:swap}
.brand-public,.auth-page,.portal-body,.renew-body {
 --primary:#b83e0c;--primary-hover:#923009;--primary-light:#ec6a25;--primary-soft:#fff0df;--accent:#c64d10;--accent-light:#df6220;
 --text:#302c29;--text-soft:#726457;--text-muted:#8b7867;--border:#dfcbb7;--surface:#fff9f1;--bg-white:#fff9f1;--bg:#e9dfd3;
 font-family:Vazirmatn,Tahoma,Arial,sans-serif;
 background-color:#e9dfd3;background-image:radial-gradient(ellipse at 95% 8%,#ffd8b0a6,transparent 42%),radial-gradient(ellipse at 0% 45%,#d7dde5aa,transparent 45%);
}
.brand-public :is(a,button,input,textarea):focus-visible,.auth-page :is(a,button,input):focus-visible,.portal-body :is(a,button,summary):focus-visible{outline:3px solid #b94d17;outline-offset:4px}
.brand-public .btn-primary,.brand-public .btn-accent,.auth-page .auth-btn{background:linear-gradient(120deg,#db5b16,#ad3709);border-color:#c35318;color:white;box-shadow:0 5px 12px #a1471c20}
.brand-public .btn:hover,.auth-page .auth-btn:hover{filter:brightness(1.07);box-shadow:0 7px 17px #9c40172b;transform:translateY(-2px)}
.brand-public .btn:active,.auth-page .auth-btn:active{transform:translateY(0);box-shadow:0 2px 6px #9c401720}
.brand-public .btn,.auth-page .auth-btn{transition:background .2s,box-shadow .2s,transform .2s;border-radius:13px}
.brand-public .about-wrap,.brand-public .contact-wrap{max-width:1120px;width:calc(100% - 36px);margin:28px auto 36px;padding:28px;background:#f9f0e5;border:1px solid #d9c1a8;border-top:5px solid #ed6b21;border-radius:24px;box-shadow:0 10px 30px #6942250d}
.brand-public .about-head,.brand-public .contact-wrap>h1{color:#5a321c}
.brand-public .story-card,.brand-public .contact-grid>form,.brand-public .contact-info{background:#fffaf3;border:1px solid #e2ceb8;border-radius:19px;box-shadow:0 5px 18px #69422506}
.brand-public .contact-grid>form{padding:24px;min-width:0}
.brand-public .story-card{padding:28px;line-height:2.3}
.brand-public .about-photo{background:#eddcc8;border:1px solid #d9bea0;padding:12px;border-radius:24px;max-width:510px;margin:26px auto}
.brand-public .about-photo img{border-radius:16px;width:100%}
.brand-public .about-trust-item{background:#f2e2ce;border-color:#dcc4a8;border-radius:17px}
.brand-public .about-cta{background:#e9ded0;border-color:#d2b99b;border-radius:20px;color:#5c3c24}
.brand-public .about-cta .btn{background:#b83e0c;color:white}
.brand-public .contact-channels a,.brand-public .social-row a{background:#f6e9d8;border-color:#e0c7aa;color:#785031}
.brand-public .contact-channels a:hover,.brand-public .social-row a:hover{background:#ffdfbc;border-color:#d4935a}
.brand-public .map-wrap{background:#e6ebe5;padding:24px;border:1px solid #c0cdbf;border-radius:20px}
.brand-public .form-group input,.brand-public .form-group textarea{background:#fffdf9;border-color:#dcc3a7;border-radius:12px}
.auth-page .auth-card{background:#fff9f0;border:1px solid #d9bea0;border-top:5px solid #e9661b;border-radius:25px;box-shadow:0 15px 45px #6f422315}
.auth-page .auth-brand .logo-name{color:#a93b0d}.auth-page .auth-brand .logo-tagline{color:#987354}
.auth-page .auth-input{background:#fffdf9;border-color:#ddc5a8;color:#473d34}.auth-page .auth-input:focus{border-color:#d36b2c;box-shadow:0 0 0 4px #f9d8b7}
.auth-page .auth-back,.auth-page .auth-link{color:#a94a19}.auth-page .auth-note{background:#f3e5d1;border-color:#e5cdb0;color:#7b624c}

.brand-public header {background:#fff4e7;border-bottom:0;box-shadow:0 5px 22px #3c28151a}
.brand-public .header-top {
 background:radial-gradient(ellipse at 15% 20%,#ffb36b3b,transparent 55%),linear-gradient(110deg,#fff5e8,#f9dec0);
 border:0;position:relative;overflow:hidden;padding:18px 0;
}
.brand-public .header-top::after {content:'';position:absolute;left:20%;top:-80px;width:190px;height:190px;border:28px solid #f59c4930;transform:rotate(35deg);border-radius:38px;pointer-events:none}
.brand-public header {font-size:14px}
.brand-public header .container {max-width:1160px}
.brand-public .header-top-inner {position:relative;z-index:1;gap:18px}
.brand-public .logo-text-only {display:grid;grid-template-columns:55px auto;grid-template-rows:auto auto;column-gap:13px;align-items:center}
.brand-public .storefront-brandmark {display:grid!important;grid-row:1/3;width:55px;height:55px;place-items:center;border-radius:17px;background:linear-gradient(135deg,#ff8c36,#e4500a);color:#fff;border:1px solid #ffbe84;box-shadow:0 6px 15px #b954242b}
.brand-public .logo-name {font-size:29px;color:#a63809;line-height:1.5;text-shadow:0 1px 0 #fff9}
.brand-public .logo-tagline {grid-column:2;color:#926b50;font-size:10px;margin:0;padding:0}
.brand-public .logo-tagline::after {display:none}
.brand-public .storefront-brand-note {display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;flex:0 0 auto}
.brand-public .storefront-logo {display:block;width:215px;max-width:100%;height:auto}
.brand-public .storefront-brand-note>.storefront-slogan {font-size:16px;font-weight:900;font-style:italic;line-height:1.7;color:#84401f;text-shadow:0 1px 0 #fff8}
.brand-public .header-btn.primary {background:#b63d09;border-color:#c54c11;padding:11px 20px;box-shadow:0 4px 10px #a6411b1a}
.brand-public .icon-btn {background:#fff8ef;border-color:#dcb58f;color:#94491e}
.brand-public .nav-bar {background:linear-gradient(100deg,#25313b,#343638);border:0;box-shadow:inset 0 1px 0 #ffffff10}
.brand-public .nav-inner {padding-block:7px}
.brand-public .nav-links {gap:7px}
.brand-public .nav-item {color:#f7e7d6;font-size:12px;min-height:39px;padding:9px 16px;border:1px solid transparent;gap:8px;border-radius:11px}
.brand-public .nav-item>svg,.brand-public .nav-item>a>svg {color:#ffc08c;flex-shrink:0}
.brand-public .nav-item.has-sub>a {display:inline-flex;align-items:center;gap:8px}
.brand-public .nav-item:hover,.brand-public .nav-item:focus-within {background:#ffffff12;color:#fff;border-color:#ffffff20}
.brand-public .nav-item.active {background:linear-gradient(120deg,#ffbd85,#f79850);border-color:#ffd0a7;color:#532807;box-shadow:0 2px 8px #00000015}
.brand-public .nav-item.active>svg {color:#8c370a}
.brand-public .nav-dropdown {color:#3d4350;background:#fff8ef;border-color:#e8c6a5}
.brand-public .side-nav {background:#fff4e7;color:#65482f}
.brand-public .side-nav-head {background:linear-gradient(120deg,#ffe5c8,#f7ce9e);border-color:#e1b58c}
.brand-public .side-nav-links .side-link {display:flex;align-items:center;gap:11px}
.brand-public .side-nav-links .storefront-nav-icon {color:#b74b16;flex-shrink:0}
.brand-public .nav-toggle {color:#9c3c0b;background:#fff5e9;border-color:#dca77a}
@media(max-width:1000px) {
 .brand-public .header-top-inner {flex-wrap:wrap}
 .brand-public .storefront-brand-note {order:4;flex-basis:100%;gap:5px;padding-top:8px}
 .brand-public .storefront-logo {width:175px}
 .brand-public .storefront-brand-note>.storefront-slogan {font-size:14px}
}
@media(max-width:768px) {.brand-public header .container {padding-inline:18px}}
@media(max-width:380px) {.brand-public header .container {padding-inline:14px}}
@media(max-width:780px) {
 .brand-public .header-top {padding:12px 0}
 .brand-public .logo-text-only {grid-template-columns:39px auto;column-gap:9px}
 .brand-public .storefront-brandmark {width:39px;height:43px;border-radius:12px}
 .brand-public .storefront-brandmark svg {width:22px;height:22px}
 .brand-public .logo-name {font-size:24px}.brand-public .logo-tagline {font-size:8px}
 .brand-public .header-btn.primary {padding-inline:12px}
 .brand-public .header-top::after {left:10%;width:140px;height:140px;border-width:20px}
}
@media(max-width:380px) {
 .brand-public .logo-text-only {grid-template-columns:32px auto;column-gap:6px}
 .brand-public .storefront-brandmark {width:32px;height:38px;border-radius:10px}
 .brand-public .logo-name {font-size:20px}.brand-public .logo-tagline {font-size:7px}
 .brand-public .header-top-inner {gap:6px}.brand-public .header-actions {gap:6px}
 .brand-public .header-btn.primary {padding-inline:9px}
}

/* One indicator glides beneath the visible menu items. */
.brand-public .nav-links{position:relative;isolation:isolate}
.brand-public .nav-item{position:relative;z-index:1}
.brand-public .nav-item.active,.brand-public .nav-item:hover,.brand-public .nav-item:focus-within{background:transparent;box-shadow:none;border-color:transparent}
.brand-public .nav-item.active,.brand-public .nav-item.is-highlighted{color:#532807}
.brand-public .nav-item.is-highlighted svg{color:#8c370a}
.brand-public .nav-item.active:not(.is-highlighted){color:#f7e7d6}
.brand-public .nav-item.active:not(.is-highlighted)>svg{color:#ffc08c}
.brand-nav-indicator{position:absolute;left:0;top:0;width:0;height:0;z-index:0;pointer-events:none;border-radius:11px;background:linear-gradient(120deg,#ffcb8e,#f4a554);box-shadow:0 3px 10px #0002;border:1px solid #ffdaa9;opacity:0;transition:transform .28s cubic-bezier(.22,.8,.3,1),width .28s cubic-bezier(.22,.8,.3,1),height .2s,opacity .15s}
/* The Gmail product has its own warm, visible purchase area. */
.home-page .gmail-feature{background:linear-gradient(110deg,#ffe2ba,#fff3df);border:1px solid #dba66c;box-shadow:0 5px 14px #8f4c2110}
.home-page .gmail-feature .account-symbol{background:#fff5e5;border-color:#e7bd8a;color:#b24616}
.home-page .gmail-feature .account-product-bottom{background:#fff0d7;border:1px solid #edc58e;border-radius:14px;padding:13px 15px}
.home-page .gmail-feature .account-product-bottom .btn{background:linear-gradient(120deg,#db5b16,#ad3709);border:1px solid #c45114;color:white;box-shadow:0 4px 10px #b64b2025;min-height:46px;padding-inline:20px;font-weight:800;transition:transform .2s,box-shadow .2s,filter .2s}
.home-page .gmail-feature .account-product-bottom .btn:hover{background:linear-gradient(120deg,#ed7022,#bd410c);transform:translateY(-3px);box-shadow:0 8px 18px #b64b2035}
.home-page .gmail-feature .account-product-bottom .btn:active{transform:translateY(0);box-shadow:0 2px 5px #b64b2025}
.home-page .gmail-feature:target{outline:3px solid #df8a38;outline-offset:4px}
/* Customer pages use the same canvas and framed hierarchy. */
.portal-body,.renew-body{--p-ink:#382e26;--p-muted:#806d5b;--p-blue:#b54511;--p-bg:#e9dfd3;--p-line:#dfc8ad;--p-radius:20px;color:var(--p-ink)}
.portal-body .portal-shell{max-width:1180px;padding:24px 20px 55px}
.portal-body .portal-top{position:relative;top:auto;padding:18px 21px;background:linear-gradient(110deg,#fff1df,#f7d6b0);border:1px solid #dfba91;border-radius:21px;box-shadow:0 5px 18px #6b40200b;margin-bottom:16px}
.portal-body .portal-brand{color:#713c20!important}.portal-body .portal-brand small{color:#957052}
.portal-body .portal-mark{background:linear-gradient(135deg,#ff8c36,#d9500a);box-shadow:0 5px 13px #a149202a}
.portal-body .portal-support{background:#fff4e5;border-color:#d7b08a;color:#a13e10}
.portal-body .portal-hero{background:linear-gradient(120deg,#353637,#513d2a);border:1px solid #6d5140;box-shadow:0 8px 22px #54382013;color:#fff1e1}
.portal-body .account-greeting{color:#ffd3a3}.portal-body .portal-hero-symbol{background:#ffbf7d26;color:#ffc88d}
.portal-body .customer-primary{padding:9px;background:#2e353b;border:1px solid #454747;border-radius:20px;gap:8px}
.portal-body .customer-primary a{background:#ffffff08;color:#f3e6d7;border-color:#ffffff15}
.portal-body .customer-primary a.active{background:linear-gradient(120deg,#ffcb8e,#f4a554);color:#58300e;border-color:#ffc991;box-shadow:0 4px 10px #0001}
.portal-body .customer-primary .customer-nav-icon{background:#ffc68519;color:#ffc88b}
.portal-body .customer-primary a.active .customer-nav-icon{background:#fff4d4a6;color:#9c4718}
.portal-body .customer-subnav a{background:#f5e7d2;border-color:#d8b68e;color:#956138;box-shadow:0 2px 5px #6c3a1710}
.portal-body .customer-subnav a.active{background:#ba4c14;color:#fff;border-color:#b84a12;box-shadow:0 4px 8px #93401b25}
.portal-body .customer-subnav a:hover{background:#ffdbad;border-color:#c78e52}.portal-body .customer-subnav a.active:hover{background:#9d3c0d;color:#fff}
.portal-body .portal-card,.portal-body .panel-card,.portal-body .stat-card{background:#fff8ee;border-color:#ddc5a9;box-shadow:0 5px 16px #573c1f08}
.portal-body .account-main{background:#f4e7d6;padding:22px;border:1px solid #d7bfa0;border-radius:23px}
.portal-body .portal-card .portal-device-icon,.portal-body .customer-person-icon,.portal-body .customer-row-icon,.portal-body .stat-ico{background:#f6e5cb;color:#b5531c}
.portal-body .portal-btn,.portal-body .btn-dl.wide{background:linear-gradient(120deg,#d85c19,#ad3a0b);color:white!important;box-shadow:0 4px 10px #a149201b;transition:transform .2s,box-shadow .2s,filter .2s}
.portal-body .portal-btn:hover,.portal-body .btn-dl:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 7px 16px #9e421d22}
.portal-body .portal-btn.secondary,.portal-body .btn-dl,.portal-body .portal-copy{background:#f6e2c5;color:#a14b1b!important;border-color:#dabb94}
.portal-body .portal-service-title,.portal-body .customer-remaining,.portal-body .empty{background:#f4e6d1;border-color:#dbc3a4;color:#806446}
.portal-body .customer-remaining>strong,.portal-body .shop-price{color:#b24c17}
.portal-body .wallet-hero{background:linear-gradient(110deg,#ffe3bb,#f8eddc);border-color:#dfb982}
.portal-body .wh-balance{color:#aa4313}.portal-body .chip{background:#fff0d9;border-color:#dfbb8d;color:#9b5c2e}
.portal-body .panel-input{background:#fffdf7;border-color:#ddc5a6;color:#554434}
.portal-body .customer-credential,.portal-body .shop-product{background:linear-gradient(115deg,#fff1d8,#fff9ec);border-color:#dcbb8b}
.portal-body .shop-order{background:#f8e9d0;border-color:#dcba8e}
.portal-body .portal-secret-row code{background:#f5e6cf;border-radius:8px;padding:6px;color:#63472c}
.portal-body .portal-contact{background:#fff4e4;border-color:#d9b38a}.portal-body .portal-contact-head{background:#f4ddbd;border-color:#ddba91}
.portal-body .portal-contact a{color:#a74d1c}.portal-body .account-footer a,.portal-body .portal-footer a{color:#8d5a34}
.renew-body{margin:0}.renew-body .renew-shell{background:#f9eddb;border:1px solid #d9bb94;border-top:5px solid #e2671f;border-radius:24px;padding:24px;margin-top:24px}
.renew-body .renew-card{background:#fff8ee;border-color:#e1c7a5}.renew-body .renew-btn{background:#b94c15;color:white}
@media(max-width:650px){
 .brand-public .about-wrap,.brand-public .contact-wrap{width:calc(100% - 24px);padding:20px 15px;margin-top:16px;border-radius:20px}
 .brand-public .story-card,.brand-public .contact-grid>form{padding:19px 16px}.brand-public .map-wrap{padding:18px 13px}
 .brand-public .contact-wrap h1{font-size:25px}.brand-public .contact-grid{gap:17px}
 .home-page .gmail-feature .account-product-bottom{padding:13px;gap:13px;align-items:stretch;flex-direction:column}.home-page .gmail-feature .account-product-bottom .btn{width:100%}
 .portal-body .portal-shell{padding:14px 12px 35px}.portal-body .portal-top{padding:15px 12px;border-radius:18px;gap:8px}
 .portal-body .portal-brand strong{font-size:14px}.portal-body .portal-support{font-size:11px;padding:8px 10px}
 .portal-body .account-main{padding:14px 11px;border-radius:18px}.portal-body .customer-primary{padding:7px;gap:6px}
 .renew-body .renew-shell{padding:18px 14px;margin-inline:12px}
}
@media(prefers-reduced-motion:reduce){.brand-nav-indicator,.brand-public .btn,.auth-page .auth-btn,.home-page .gmail-feature .btn,.portal-body .portal-btn{transition:none}.brand-public .btn:hover,.auth-page .auth-btn:hover,.home-page .gmail-feature .btn:hover,.portal-body .portal-btn:hover{transform:none}}
/* Keep the same public header width and avoid an inactive search field. */
.brand-public header .container{max-width:1220px}
.brand-public .header-search{display:none}
.renew-body .renew-pay{background:linear-gradient(110deg,#db621d,#af3d0d);box-shadow:0 6px 17px #a34e2025}
.renew-body .renew-symbol,.renew-body .renew-price,.renew-body .renew-summary{background:#f4e2c8;border-color:#dfc098;color:#9e4816}
.renew-body .renew-duration input:checked+span,.renew-body .renew-presets button.active{background:#ffdfb6;border-color:#cb894a;color:#964312}
.renew-body .renew-volume>strong,.renew-body .renew-help,.renew-body .renew-top a{color:#a94917}.renew-body #renewGb{accent-color:#cc5a19}
.portal-body .fb-card,.portal-body .fb-thread,.portal-body .fb-workspace{background:#fff8ed;border-color:#dfc5a2}
.portal-body .fb-entry,.portal-body .fb-intro,.portal-body .fb-bubble{background:#f3e4cd;border-color:#d9ba91;color:#8e5c32}
.portal-body .fb-primary{background:#b74611;border-color:#a63d0c}.portal-body .fb-secondary{background:#f6e2c4;color:#96501f}
.portal-body .fb-row.selected{background:#ffebcc;border-color:#dbab71}
.portal-body .customer-credential-card{background:linear-gradient(120deg,#fff1d9,#fff9ee);border-color:#ddbd91}
@media(prefers-reduced-motion:reduce){.brand-public .nav-item{transition:none}}
.brand-public .contact-grid>div:first-child{padding:24px;background:#fffaf3;border:1px solid #e2ceb8;border-radius:19px;box-shadow:0 5px 18px #69422506;min-width:0}
@media(max-width:780px){
 .brand-public header .container{padding-inline:12px}
 .brand-public .header-top-inner{gap:6px}
 .brand-public .header-actions{gap:6px}
 .brand-public .header-btn.primary{width:auto;min-height:38px;padding-inline:10px;font-size:11px}
 .brand-public .header-btn.primary .hb-txt{display:inline-block}
}
@media(max-width:650px){.brand-public .contact-grid>div:first-child{padding:19px 15px}}
.portal-body .portal-progress{background:#ead5b5}.portal-body .portal-progress span{background:linear-gradient(90deg,#ffb76a,#c25114)}
.portal-body .portal-tutorials{background:#f7e7ce;border-color:#ddbd91}.portal-body .portal-tutorials summary{color:#a44b17}
.portal-body .customer-credential-icon{background:#f5dfbd;color:#a7501f}
.portal-body .customer-credential-email,.portal-body .customer-remaining>small,.portal-body .customer-last-check{color:#927457}
.portal-body .customer-credential-details summary{color:#a34b18}
.portal-body .customer-support,.portal-body .customer-back{color:#8a5f3c!important}
.portal-body .portal-heading-icon.icon-services{background:#f7dfc0;color:#af4f19}
.portal-body .customer-account-row{color:#5a422e!important}.portal-body .stat-card b,.portal-body .panel-card h2{color:#4f3825}

/* Mobile drawer: keep labels beside their icons, independent of desktop logo rules. */
@media(max-width:768px){
 .brand-public #sideNav{width:calc(100% - 40px);max-width:340px;height:100vh;height:100dvh;overscroll-behavior:contain;box-sizing:border-box}
 .brand-public #sideNav .side-nav-head{min-height:86px;padding:16px;gap:12px;box-sizing:border-box}
 .brand-public #sideNav .side-nav-brand{min-width:0;align-items:flex-start;gap:3px;text-align:right}
 .brand-public #sideNav .logo-name{font-size:21px;line-height:1.5;letter-spacing:0}
 .brand-public #sideNav .logo-tagline{font-size:10px;line-height:1.7;letter-spacing:0;margin:0}
 .brand-public #sideNav .logo-tagline::after{display:none}
 .brand-public #sideNav .side-nav-close{flex:0 0 44px;width:44px;height:44px;border:1px solid #e4bd96;border-radius:13px;display:grid;place-items:center;font-size:18px}
 .brand-public #sideNav .side-nav-links{padding:12px;gap:6px}
 .brand-public #sideNav :is(.side-link,.side-acc){display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:50px;width:100%;padding:12px;box-sizing:border-box;border:1px solid #ead7c3;border-radius:12px;background:#fffaf4;color:#49382b;font:600 14px/1.7 Vazirmatn,Tahoma,Arial,sans-serif;text-align:right}
 .brand-public #sideNav .side-link>span:not(.side-acc-icon){flex:1;min-width:0}
 .brand-public #sideNav .side-link::after{margin-inline-start:auto;flex:0 0 16px;text-align:center}
 .brand-public #sideNav .side-acc-icon{margin-inline-start:auto}
 .brand-public #sideNav svg{width:20px;height:20px;flex:0 0 20px;margin:0}
 .brand-public #sideNav :is(.side-link,.side-acc):hover{background:#ffe5c7;border-color:#d99b64;color:#a13f12}
 .brand-public #sideNav .side-acc[aria-expanded="true"]{background:#ffe5c7;border-color:#d99b64}
 .brand-public #sideNav .side-acc-body.open{display:flex;flex-direction:column;gap:5px;padding:2px 10px 6px 0}
 .brand-public #sideNav .side-acc-body .side-link{font-size:13px;min-height:46px;padding:10px}
}
@media(prefers-reduced-motion:reduce){.brand-public #sideNav,.brand-public .side-nav-backdrop{transition:none}}

/* Original transparent wordmark, without stretching or a square background. */
.portal-body .portal-brand-logo{min-width:0;gap:0}
.portal-body .portal-brand-logo>span{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.portal-body .portal-logo{display:block;width:174px;max-width:100%;height:auto;object-fit:contain}
.portal-body .portal-brand-logo small{line-height:1.8;white-space:nowrap}
@media(max-width:650px){.portal-body .portal-logo{width:148px}.portal-body .portal-brand-logo>span{gap:5px}}
@media(max-width:360px){.portal-body .portal-logo{width:128px}.portal-body .portal-brand-logo small{font-size:9px}}

/* Contact dialog header: one rounded frame and a centered close control. */
.portal-body .portal-contact .portal-contact-head{box-sizing:border-box;width:100%;margin:0;padding:12px 14px;gap:12px;border:1px solid #dfba91;border-radius:16px;background:linear-gradient(110deg,#fff1df,#f4ddbd);box-shadow:none}
.portal-body .portal-contact-head h2{min-width:0;margin:0;line-height:1.6;color:#593d28}
.portal-body .portal-contact .portal-contact-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;margin:0;padding:0;box-sizing:border-box;border:1px solid #dcb68e;border-radius:12px;background:#fff7eb;color:#a34416;box-shadow:0 2px 5px #8c4d1c0a;font:inherit;transition:background .15s,border-color .15s}
.portal-body .portal-contact-close svg{display:block;width:20px;height:20px;margin:0}
.portal-body .portal-contact-close:hover{background:#ffe0ba;border-color:#c98c54}
.portal-body .portal-contact-close:focus-visible{outline:3px solid #b94d17;outline-offset:3px}
@media(max-width:360px){.portal-body .portal-contact .portal-contact-head{padding:10px;gap:8px}.portal-body .portal-contact-head h2{font-size:19px}}

/* Account destinations share the same subsection navigation as purchases/subscriptions. */
.portal-body .customer-account-tabs a{gap:6px;padding-inline:6px}
.portal-body .customer-account-tabs svg{width:18px;height:18px;flex:none}
.portal-body .customer-account-summary .customer-person{border-bottom:0;padding-bottom:0;margin-bottom:0}

/* Credential receipts use the panel button system, including keyboard and busy states. */
.portal-body [data-shop-panel] .shop-order-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.portal-body [data-shop-panel] .shop-order-actions .portal-btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:46px;padding:12px 18px;border:1px solid #b74c16;border-radius:14px;font:inherit;font-weight:700;line-height:1.5;text-align:center;cursor:pointer;text-decoration:none;box-sizing:border-box}
.portal-body [data-shop-panel] .shop-order-actions .portal-btn.secondary{border-color:#dabb94}
.portal-body [data-shop-panel] .shop-order-actions svg{width:20px;height:20px;flex:0 0 20px;stroke-linecap:round;stroke-linejoin:round}
.portal-body [data-shop-panel] .shop-order-actions .portal-btn:focus-visible{outline:3px solid #c95b1c;outline-offset:3px}
.portal-body [data-shop-panel] .shop-order-actions .portal-btn:disabled{opacity:.6;cursor:wait;transform:none}
.portal-body [data-shop-panel] .shop-order-actions [hidden]{display:none!important}
@media(max-width:480px){.portal-body [data-shop-panel] .shop-order-actions .portal-btn{flex:1 1 180px;width:100%}}

.portal-body [data-shop-panel] .shop-order{display:block;padding:20px;border-radius:20px}
.portal-body [data-shop-panel] .shop-order [data-order-status]{margin:12px 0;line-height:1.9}
.portal-body [data-shop-panel] .shop-order [data-order-ref]:empty{display:none}

/* Identical footer geometry across both customer panel templates. */
.portal-body .account-footer,.portal-body .portal-footer{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;
 gap:12px;width:100%;max-width:420px;box-sizing:border-box;
 margin:0 auto;padding:12px 6px 22px;font-size:12px;line-height:1.8;text-align:center;
}
.portal-body .account-footer a,.portal-body .portal-footer a{
 display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;
 margin:0;padding:8px 4px;box-sizing:border-box;line-height:1.8;text-align:center;
}
.portal-body .portal-footer a:only-child{grid-column:1/-1}

.portal-body .account-footer a,.portal-body .portal-footer a{
 gap:7px;border:1px solid #d9b995;border-radius:12px;background:#fff3e1;
 color:#81502d;box-shadow:0 2px 5px #75441908;text-decoration:none;font-weight:600;
}
.portal-body .account-footer a[href="/logout.php"],.portal-body .portal-footer a[href="/logout.php"]{background:#fff8ed;color:#8b482e}
.portal-body .account-footer a:hover,.portal-body .portal-footer a:hover{background:#ffe4bf;border-color:#bd8957}
.portal-body .account-footer a:focus-visible,.portal-body .portal-footer a:focus-visible{outline:3px solid #b94d17;outline-offset:3px}
.portal-body .account-footer svg,.portal-body .portal-footer svg{width:18px;height:18px;flex:0 0 18px}
@media(max-width:360px){.portal-body .account-footer,.portal-body .portal-footer{gap:8px;padding-inline:0}.portal-body .account-footer a,.portal-body .portal-footer a{gap:5px;font-size:11px}}