*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;background:#fbf8f2;color:#07192d;line-height:1.75}a{color:inherit}.wrap{width:min(1120px,calc(100% - 28px));margin:auto}.topbar{position:sticky;top:0;z-index:20;background:rgba(251,248,242,.92);backdrop-filter:blur(14px);border-bottom:1px solid #e1d2b8}.nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900}.brand img{width:46px;height:46px;object-fit:contain}.brand span{font-size:16px}.nav-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.btn{border:0;border-radius:14px;min-height:46px;padding:10px 16px;font-family:inherit;font-weight:900;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn.primary{background:#07192d;color:#fff}.btn.gold{background:linear-gradient(135deg,#a9874a,#d5ad66);color:#07192d}.btn.light{background:#fff;color:#07192d;border:1px solid #e1d2b8}.btn.danger{background:#fff0f0;color:#b42318;border:1px solid #f2b4b4}.hero{padding:38px 0 24px}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center}.badge{display:inline-flex;border:1px solid #e1d2b8;background:#fff7e9;color:#7a5b24;border-radius:999px;padding:7px 12px;font-weight:900;font-size:13px}h1{font-size:clamp(32px,5vw,58px);line-height:1.25;margin:16px 0 12px}.lead{font-size:18px;color:#667085;font-weight:800;margin:0 0 24px}.card{background:#fff;border:1px solid #e1d2b8;border-radius:22px;box-shadow:0 14px 34px rgba(7,25,45,.08);padding:22px}.grid{display:grid;gap:16px}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}.section{padding:24px 0}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}.section h2{margin:0;font-size:26px}.muted{color:#667085;font-weight:800}.field{display:grid;gap:7px;margin-bottom:13px}.field label{font-weight:900}.field input,.field select,.field textarea{width:100%;border:1px solid #dfcfb2;background:#fffdf8;border-radius:13px;min-height:48px;padding:11px 13px;font:inherit;color:#07192d}.field textarea{min-height:105px;resize:vertical}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.form-grid .full{grid-column:1/-1}.note{padding:12px 14px;background:#fff7e9;border:1px solid #e1d2b8;border-radius:14px;color:#07192d;font-weight:900}.status{display:inline-flex;border-radius:999px;padding:5px 10px;font-weight:900;font-size:12px;border:1px solid #e1d2b8;background:#fff7e9}.cards-list{display:grid;gap:12px}.request-card{display:grid;gap:8px}.request-meta{display:flex;gap:8px;flex-wrap:wrap;color:#667085;font-weight:800;font-size:13px}.footer{margin-top:36px;background:#07192d;color:#fff;padding:30px 0 20px}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:20px}.footer a{display:block;color:#d9e4ef;text-decoration:none;margin:6px 0;font-weight:800}.copy{border-top:1px solid rgba(255,255,255,.14);margin-top:18px;padding-top:14px;color:#c9d2dd;font-size:13px}.auth-shell{min-height:calc(100vh - 72px);display:grid;place-items:center;padding:24px 0}.auth-card{width:min(520px,100%)}.avatar-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.avatar-preview{width:92px;height:92px;border-radius:50%;background:#fff7e9;border:2px solid #dfcfb2;display:grid;place-items:center;overflow:hidden;font-weight:900;color:#a9874a}.avatar-preview img{width:100%;height:100%;object-fit:cover}.dash-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{padding:18px;border-radius:18px;background:linear-gradient(145deg,#fff,#fff7e9);border:1px solid #e1d2b8}.stat b{display:block;font-size:24px}.mobile-tabs{display:flex;gap:8px;overflow:auto;padding-bottom:8px}.mobile-tabs a{white-space:nowrap}.message{display:none;margin:12px 0;padding:12px;border-radius:12px;font-weight:900}.message.ok{display:block;background:#f2fff7;border:1px solid #98d8af;color:#067647}.message.err{display:block;background:#fff0f0;border:1px solid #f2b4b4;color:#b42318}.table-wrap{overflow:auto;border-radius:16px;border:1px solid #e1d2b8}table{width:100%;border-collapse:collapse;background:#fff;min-width:720px}th,td{padding:12px;border-bottom:1px solid #eee;text-align:right}th{background:#fff7e9} .hidden{display:none!important}
@media(max-width:820px){.wrap{width:min(100% - 22px,1120px)}.nav{min-height:66px}.brand span{font-size:14px}.nav-actions .btn{min-height:40px;padding:8px 11px;font-size:13px}.hero{padding:22px 0}.hero-grid,.grid.two,.grid.three,.footer-grid,.form-grid{grid-template-columns:1fr}.card{padding:18px;border-radius:18px}.dash-quick{grid-template-columns:repeat(2,1fr)}.section-head{display:grid}.footer{padding-bottom:82px}h1{font-size:34px}.lead{font-size:16px}.btn{width:100%}.nav-actions .btn{width:auto}.mobile-full{width:100%}}
@media(max-width:420px){.dash-quick{grid-template-columns:1fr}.brand img{width:40px;height:40px}.brand span{max-width:150px;line-height:1.35}.nav-actions{justify-content:flex-end}.nav-actions .hide-xs{display:none}}


/* ===== Customer portal fixes - mobile first ===== */
.customer-header{position:sticky;top:0;z-index:30;background:rgba(251,248,242,.96);backdrop-filter:blur(14px);border-bottom:1px solid #e1d2b8}
.customer-nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.portal-brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:900;color:#07192d;cursor:default;user-select:none}
.portal-brand-logo{width:150px;height:auto;max-height:50px;object-fit:contain;background:#07192d;border-radius:6px;padding:2px 5px}
.portal-brand span{font-size:18px;line-height:1.35}.portal-separator{color:#c49a49;font-weight:900;font-size:22px!important;line-height:1}
.customer-account{position:relative;display:flex;align-items:center;gap:8px}
.customer-chip{border:1px solid #e1d2b8;background:#fff;color:#07192d;border-radius:999px;min-height:46px;padding:6px 10px;display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:900;cursor:pointer;box-shadow:0 10px 22px rgba(7,25,45,.06)}
.customer-avatar{width:34px;height:34px;border-radius:50%;background:#07192d;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;border:1px solid rgba(181,143,75,.35)}
.customer-avatar img{width:100%;height:100%;object-fit:cover}
.customer-menu{display:none;position:absolute;top:calc(100% + 10px);left:0;min-width:190px;background:#fff;border:1px solid #e1d2b8;border-radius:16px;box-shadow:0 18px 40px rgba(7,25,45,.13);overflow:hidden;z-index:50}
.customer-menu.show{display:block}
.customer-menu a,.customer-menu button{display:block;width:100%;padding:13px 16px;text-align:right;border:0;background:#fff;color:#07192d;text-decoration:none;font:inherit;font-weight:900;cursor:pointer}
.customer-menu a:hover,.customer-menu button:hover{background:#fff7e9}
.customer-tabs-wrap{background:#fbf8f2;border-bottom:1px solid rgba(225,210,184,.75)}
.customer-tabs{display:flex;gap:8px;overflow:auto;padding:12px 0;scrollbar-width:none}
.customer-tabs::-webkit-scrollbar{display:none}
.customer-tabs a{white-space:nowrap;text-decoration:none;border:1px solid #e1d2b8;background:#fff;color:#07192d;border-radius:14px;min-height:44px;padding:9px 15px;font-weight:900;display:inline-flex;align-items:center;justify-content:center}
.customer-tabs a.active{background:#fff7e9;color:#7a5b24;border-color:#d9b979}
.phone-combo{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center}
.phone-prefix{min-height:48px;border:1px solid #dfcfb2;background:#fff7e9;border-radius:13px;padding:11px 13px;font-weight:900;color:#07192d;direction:ltr;display:grid;place-items:center}
.field small,.hint{display:block;color:#667085;font-weight:800;font-size:12px;line-height:1.7;margin-top:3px}
.check-line{display:flex;align-items:flex-start;gap:10px;font-weight:900;color:#07192d;line-height:1.7;margin:8px 0 14px}
.check-line input{width:20px;height:20px;margin-top:4px;accent-color:#b58f4b;flex:0 0 auto}
.otp-panel{display:none;margin-top:16px}.otp-panel.show{display:block}.otp-debug{direction:ltr;text-align:center;font-size:28px;letter-spacing:8px;background:#fff7e9;border:1px dashed #b58f4b;border-radius:14px;padding:12px;margin:12px 0;font-weight:900;color:#07192d}.otp-actions{display:flex;gap:10px;flex-wrap:wrap}.otp-actions .btn{flex:1 1 150px}.conditional-hidden{display:none!important}
@media(max-width:820px){.customer-nav{display:grid;justify-items:center;min-height:auto;padding:10px 0}.portal-brand{display:flex;justify-content:center;align-items:center;text-align:center;gap:8px;flex-wrap:wrap}.portal-brand-logo{width:min(190px,70vw);max-height:56px}.portal-brand span{font-size:17px}.customer-account{width:100%;justify-content:center}.customer-chip{max-width:100%;}.customer-menu{left:50%;transform:translateX(-50%);text-align:right}.customer-tabs{padding:10px 0}.customer-tabs a{min-height:42px;padding:8px 13px;font-size:14px}.auth-shell{align-items:start;padding-top:18px}.phone-combo{grid-template-columns:98px 1fr}.otp-actions{display:grid}.otp-actions .btn{width:100%}}
@media(max-width:420px){.portal-brand-logo{width:min(170px,72vw)}.customer-chip span:last-child{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.phone-combo{grid-template-columns:88px 1fr}.phone-prefix{padding-inline:8px}.customer-tabs a{font-size:13px;padding:8px 11px}}

/* ===== Registration UX refinements - Step 4 ===== */
.field input::placeholder,.field textarea::placeholder{color:#9aa4b2;font-weight:400;opacity:.9}
.field select:invalid{color:#9aa4b2;font-weight:400}
.soft-hint{font-weight:500!important;color:#8a94a3!important;font-size:11.5px!important}
.password-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px}
.password-rules .rule{display:flex;align-items:center;gap:7px;color:#8a94a3;font-weight:500;font-size:12px;line-height:1.5;background:#fffaf1;border:1px solid #eadcc5;border-radius:11px;padding:7px 9px}
.password-rules .rule span{width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;flex:0 0 auto;background:#fff0f0;color:#b42318;font-weight:900;font-size:13px;line-height:1}
.password-rules .rule.valid{color:#067647;border-color:#a7dfbd;background:#f2fff7}
.password-rules .rule.valid span{background:#dff7e8;color:#067647}
.error-list{margin:0;padding:0 18px 0 0;font-weight:800;line-height:1.9}
.error-list li{margin:2px 0}
@media(max-width:520px){.password-rules{grid-template-columns:1fr}.auth-card h1{font-size:28px!important}}


/* ===== Step 5: Auth header + registration alignment refinements ===== */
.auth-topbar .auth-nav{min-height:76px}
.auth-brand{gap:14px}
.auth-brand img{width:150px;height:auto;max-height:50px;object-fit:contain}
.auth-brand span{font-size:18px;font-weight:900;border-inline-start:1px solid #e1d2b8;padding-inline-start:14px;line-height:1.3}
.auth-shell>.wrap{display:flex;justify-content:center;align-items:center}
.auth-card{margin-inline:auto}
.register-card{width:min(760px,100%)}
.register-card h1{margin-bottom:6px!important}
.register-card .muted{margin-top:0;margin-bottom:22px}
.register-card .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;align-items:start}
.register-card .field{margin-bottom:0}
.register-card .field label{font-size:15px;line-height:1.35;margin-bottom:2px}
.register-card .field input,.register-card .field select{min-height:54px;border-radius:14px;padding:12px 15px;font-weight:600}
.register-card .field input::placeholder{font-weight:400;color:#a5aebb}
.register-card .phone-combo{grid-template-columns:86px 1fr;gap:10px}
.register-card .phone-prefix{min-height:54px;border-radius:14px;direction:ltr}
.register-card .message.err{margin-top:16px}
.register-card .error-list{padding-inline-start:0;padding-inline-end:20px;text-align:right}
.register-card .password-rules{margin-top:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
.register-card .password-rules .rule{font-size:11.5px;padding:7px 8px;background:#fffdf8}
.register-card .check-line{background:#fffdf8;border:1px solid #eadcc5;border-radius:14px;padding:12px 14px;margin:0}
@media(max-width:820px){
  .auth-topbar .auth-nav{display:flex;min-height:68px}
  .auth-brand img{width:120px;max-height:44px}
  .auth-brand span{font-size:15px;padding-inline-start:10px}
  .auth-shell>.wrap{display:block}
  .register-card .form-grid{grid-template-columns:1fr;gap:13px}
  .register-card .password-rules{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .auth-topbar .auth-nav{align-items:center}
  .auth-brand{gap:8px}
  .auth-brand img{width:105px;max-height:40px}
  .auth-brand span{font-size:14px;max-width:130px}
  .register-card .phone-combo{grid-template-columns:82px 1fr}
  .register-card .password-rules{grid-template-columns:1fr}
}


/* ===== Step 6: final registration layout + terms alignment ===== */
.register-card form .btn.primary[type="submit"]{display:flex;margin:18px auto 0;min-width:min(260px,100%);text-align:center}
.register-card .terms-field{display:flex;justify-content:center;align-items:center;margin-top:4px}
.register-card .check-line{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px;width:auto;min-height:54px;padding:10px 18px!important;text-align:center}
.register-card .check-line input{margin:0!important;width:20px;height:20px;flex:0 0 auto}
.register-card .check-line span{display:inline-flex;align-items:center;gap:4px;line-height:1.4}
.register-card .auth-secondary{text-align:center;margin-top:12px!important}
.register-card .message{max-width:620px;margin-inline:auto;text-align:right}
.register-card .otp-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.register-card .otp-panel .field{max-width:300px;margin:14px auto}
@media(max-width:520px){
  .register-card form .btn.primary[type="submit"]{width:100%;min-width:0}
  .register-card .terms-field{justify-content:stretch}
  .register-card .check-line{width:100%;justify-content:center!important}
}


/* ===== Step 10: Auth style + password visibility ===== */
body:has(.auth-shell){background:radial-gradient(circle at top,#fffdf8 0,#fbf8f2 48%,#f5efe4 100%)}
.auth-card{border-radius:24px;border-color:#e0caa6;box-shadow:0 24px 60px rgba(7,25,45,.10);position:relative;overflow:hidden}
.auth-card:before{content:"";position:absolute;inset-inline:0;top:0;height:5px;background:linear-gradient(90deg,#07192d,#c79b50,#07192d)}
.auth-card .badge{background:#fff7e9;color:#7a5b24;border-color:#dfc59b}
.auth-card h1{color:#07192d;font-weight:900;letter-spacing:-.5px}
.auth-card .muted{color:#667085;font-weight:800}
.auth-card .field label{color:#07192d}
.auth-card .field input,.auth-card .field select,.auth-card .field textarea{border-color:#dfcfb2;background:#fffefb;transition:border-color .2s,box-shadow .2s,background .2s}
.auth-card .field input:focus,.auth-card .field select:focus,.auth-card .field textarea:focus{outline:none;border-color:#07192d;box-shadow:0 0 0 3px rgba(7,25,45,.10);background:#fff}
.auth-card .btn.primary{background:#07192d;color:#fff;box-shadow:0 10px 24px rgba(7,25,45,.14)}
.auth-card .btn.primary:hover{filter:brightness(1.06)}
.auth-card .btn.light:hover{border-color:#c79b50;background:#fff7e9}
.password-input-wrap{position:relative;display:block;width:100%}
.password-input-wrap input{padding-inline-start:48px!important}
.password-toggle{position:absolute;inset-inline-start:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:#667085;cursor:pointer;display:grid;place-items:center;font-size:15px;line-height:1}
.password-toggle:hover{background:#fff7e9;color:#07192d}
.password-toggle.is-visible{color:#07192d;background:#fff7e9}
.login-card,.auth-card:not(.register-card){width:min(560px,100%)}
@media(max-width:520px){.auth-card{border-radius:20px;padding:20px}.auth-card h1{font-size:30px!important}.password-input-wrap input{padding-inline-start:44px!important}}

/* ===== Step 11: preview-only auth + styled login methods ===== */
.login-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:4px}
.method-option{position:relative;min-height:52px;border:1px solid #dfcfb2;background:#fffefb;border-radius:15px;padding:10px 12px;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;font-weight:900;color:#07192d;transition:.2s ease;box-shadow:0 8px 18px rgba(7,25,45,.04)}
.method-option input{position:absolute;opacity:0;pointer-events:none}
.method-option span{display:flex;align-items:center;justify-content:center;gap:7px;line-height:1.35}
.method-option span:before{content:"";width:15px;height:15px;border-radius:50%;border:2px solid #c79b50;background:#fff;box-shadow:inset 0 0 0 3px #fff;transition:.2s ease;flex:0 0 auto}
.method-option.active{background:#07192d;color:#d8ad60;border-color:#07192d;transform:translateY(-1px);box-shadow:0 12px 24px rgba(7,25,45,.15)}
.method-option.active span{color:#d8ad60}.method-option.active span:before{background:#d8ad60;border-color:#d8ad60;box-shadow:inset 0 0 0 4px #07192d}
.method-option:hover{border-color:#c79b50}
.login-card .otp-panel .field{max-width:300px;margin:14px auto}
.login-card .otp-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.login-card .otp-actions .btn{flex:1 1 150px}
@media(max-width:620px){.login-methods{grid-template-columns:1fr}.method-option{min-height:48px}.login-card .otp-actions{display:grid}.login-card .otp-actions .btn{width:100%}}

/* ===== Step 13: Profile page split sections only ===== */
.profile-page .profile-main-head{margin-bottom:18px}
.profile-stack{display:grid;gap:18px}
.profile-section-card{padding:24px}
.profile-section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid #eadcc5}
.profile-section-title h2{margin:0;color:#07192d;font-size:24px}
.profile-section-title p{margin:5px 0 0;font-size:14px;line-height:1.7}
.profile-step{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#07192d;color:#d8ad60;font-weight:900;box-shadow:0 12px 24px rgba(7,25,45,.12);flex:0 0 auto}
.profile-avatar-row{margin-bottom:18px;padding:14px;background:#fffdf8;border:1px solid #eadcc5;border-radius:18px}
.profile-actions{display:flex;justify-content:center;margin-top:18px}
.profile-actions .btn{min-width:min(310px,100%)}
.profile-otp-panel{background:#fffdf8;border:1px solid #eadcc5;border-radius:18px;padding:16px;margin-top:18px}
.profile-otp-input{max-width:300px;margin:14px auto!important}
.profile-basic-grid{align-items:start}
.profile-section-card .message{max-width:760px;margin-inline:auto}
.profile-section-card .password-rules{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:820px){
  .profile-section-card{padding:18px}
  .profile-section-title{display:grid;grid-template-columns:1fr auto;align-items:start;margin-bottom:15px}
  .profile-section-title h2{font-size:21px}
  .profile-step{width:36px;height:36px}
  .profile-actions .btn{width:100%;min-width:0}
  .profile-section-card .password-rules{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .profile-section-card{border-radius:18px;padding:16px}
  .profile-section-title{gap:10px;padding-bottom:13px}
  .profile-section-title h2{font-size:20px}
  .profile-section-title p{font-size:13px}
  .profile-avatar-row{display:grid;justify-items:center;text-align:center}
  .profile-section-card .password-rules{grid-template-columns:1fr}
  .profile-otp-panel{padding:13px;border-radius:16px}
}

/* ===== Step 14: Profile anchors + refined profile sections ===== */
.profile-anchor-tabs{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px;padding:10px;background:rgba(255,253,248,.92);backdrop-filter:blur(10px);border:1px solid #eadcc5;border-radius:20px;box-shadow:0 12px 28px rgba(7,25,45,.06)}
.profile-anchor-tabs a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;padding:10px 12px;border-radius:15px;background:#fffefb;border:1px solid #dfcfb2;color:#07192d;text-decoration:none;font-weight:900;line-height:1.35;transition:.2s ease}
.profile-anchor-tabs a:hover{background:#07192d;color:#d8ad60;border-color:#07192d;transform:translateY(-1px);box-shadow:0 12px 22px rgba(7,25,45,.12)}
.profile-section-card{scroll-margin-top:92px}
.profile-page .conditional-hidden{display:none!important}
@media(max-width:760px){.profile-anchor-tabs{position:relative;grid-template-columns:1fr;gap:8px;border-radius:18px}.profile-anchor-tabs a{min-height:44px}.profile-section-card{scroll-margin-top:16px}}

/* Step 15 - Profile supporting documents */
.profile-documents-block{
  margin-top:24px;
  padding-top:22px;
  border-top:1px dashed var(--line, #e2cda9);
}
.profile-section-subtitle h3{
  margin:0 0 6px;
  color:var(--navy, #061b34);
  font-size:22px;
  font-weight:900;
}
.small-note,
.input-note{
  font-size:13px;
  line-height:1.8;
  font-weight:400;
}
.input-note{
  margin:8px 0 0;
  color:#6c7687;
}

.privacy-note{
  margin:8px 0 0;
  color:#667085;
  font-size:13px;
  line-height:1.8;
  font-weight:400;
}
.privacy-note a{
  color:var(--gold, #b8893b);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.documents-upload-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:16px;
}
@media (max-width:640px){
  .documents-upload-grid{
    grid-template-columns:1fr;
  }
}

.documents-list{
  margin-top:12px;
  display:grid;
  gap:8px;
}
.document-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--line, #e2cda9);
  border-radius:14px;
  background:#fffaf1;
  color:var(--navy, #061b34);
  font-size:13px;
  font-weight:700;
}
.document-item small{
  color:#7a8494;
  font-weight:400;
  white-space:nowrap;
}
@media (max-width:640px){
  .document-item{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* Step 17 - Compact profile document uploads */
.compact-documents-grid{
  gap:8px;
  margin-top:12px;
}
.compact-file-field{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 42px;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:6px 8px;
  border:1px solid var(--line, #e2cda9);
  border-radius:14px;
  background:#fffefb;
}
.visually-hidden-file{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.compact-file-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:7px 12px;
  border-radius:11px;
  background:var(--navy, #07192d);
  color:var(--gold, #d8ad60);
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
  transition:.2s ease;
}
.compact-file-trigger:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(7,25,45,.14)}
.compact-file-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#98a2b3;
  font-size:12px;
  font-weight:500;
}
.compact-file-name.has-file{
  color:var(--navy, #07192d);
  font-weight:800;
}
.file-preview-btn{
  width:34px;
  height:34px;
  border:1px solid #dfcfb2;
  border-radius:11px;
  background:#f8efe0;
  color:var(--navy, #07192d);
  font-size:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.2s ease;
}
.file-preview-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
  filter:grayscale(1);
}
.file-preview-btn.active:hover{
  background:var(--navy, #07192d);
  color:var(--gold, #d8ad60);
  transform:translateY(-1px);
}
.compact-documents-summary{
  margin-top:8px;
}
@media(max-width:640px){
  .compact-file-field{
    grid-template-columns:auto minmax(0,1fr) 38px;
    gap:7px;
    padding:6px;
  }
  .compact-file-trigger{padding:7px 10px;font-size:11px}
  .compact-file-name{font-size:11px}
  .file-preview-btn{width:32px;height:32px}
}

/* ===== Step 19: Customer dashboard completion + tabs refinement ===== */
.customer-tabs a.customer-home-tab{
  background:#07192d;
  color:#fff;
  border-color:#07192d;
  box-shadow:0 10px 22px rgba(7,25,45,.12);
}
.customer-tabs a.customer-home-tab.active,
.customer-tabs a.customer-home-tab:hover{
  color:#d8ad60;
  background:#07192d;
  border-color:#07192d;
}
.customer-tabs a.customer-calculator-tab{
  background:#fff;
  border-color:#e1d2b8;
  color:#067647;
}
.customer-tabs a.customer-calculator-tab.active,
.customer-tabs a.customer-calculator-tab:hover{
  background:#fff;
  border-color:#8bd8aa;
  color:#067647;
  box-shadow:0 10px 22px rgba(6,118,71,.08);
}
.customer-tabs a.active:not(.customer-home-tab):not(.customer-calculator-tab){
  background:#fff7e9;
  color:#7a5b24;
  border-color:#d9b979;
}
.profile-completion-card{cursor:pointer;transition:.2s ease;position:relative;overflow:hidden}
.profile-completion-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(7,25,45,.12)}
.profile-completion-card b{display:block;font-size:24px;line-height:1.45}
.profile-completion-card.low b{color:#b42318}
.profile-completion-card.medium b{color:#b45309}
.profile-completion-card.good b{color:#067647}
.profile-completion-card.complete b{color:#b8892f}
.profile-completion-card.complete{cursor:default}
.profile-completion-card .complete-check{display:inline-flex;align-items:center;justify-content:center;margin-inline-start:6px;font-size:16px;line-height:1;color:#b8892f}
.profile-page .field.is-incomplete input,
.profile-page .field.is-incomplete select,
.profile-page .field.is-incomplete textarea{
  border-color:#ef8f8f!important;
  background:#fffafa!important;
  box-shadow:0 0 0 3px rgba(180,35,24,.055);
}
.profile-page .field.is-incomplete label{color:#b42318}
.finance-calculator-card{max-width:880px;margin-inline:auto}
.finance-calculator-card .calc-result{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.finance-calculator-card .calc-metric{border:1px solid #e1d2b8;border-radius:18px;background:#fff7e9;padding:14px;text-align:center}
.finance-calculator-card .calc-metric span{display:block;color:#667085;font-size:13px;font-weight:800}
.finance-calculator-card .calc-metric b{font-size:22px;color:#07192d}
.finance-calculator-note{font-size:13px;font-weight:500;color:#667085;line-height:1.9;margin-top:14px}
@media(max-width:700px){
  .finance-calculator-card .calc-result{grid-template-columns:1fr}
}

/* Step 21 - Fit customer account chip to name length */
.customer-chip{
  width:max-content;
  max-width:min(360px, calc(100vw - 34px));
  justify-content:flex-start;
  padding-inline:12px 10px;
}
#customerChipName{
  display:block;
  width:auto;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:start;
}
@media(max-width:820px){
  .customer-chip{width:max-content;max-width:min(340px,100%)}
  #customerChipName{max-width:250px}
}
@media(max-width:420px){
  .customer-chip{max-width:calc(100vw - 34px)}
  #customerChipName{max-width:210px}
}

/* ===== Step 23: mobile-only customer header and tabs refinements ===== */
@media (max-width: 820px){
  .customer-nav{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"account brand";
    align-items:start;
    justify-items:stretch;
    gap:8px 10px;
    padding:10px 0 8px;
    min-height:auto;
  }
  .portal-brand{
    grid-area:brand;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    justify-self:end;
    text-align:center;
    gap:3px;
    min-width:0;
  }
  .portal-brand-logo{
    width:132px;
    max-width:38vw;
    max-height:42px;
    padding:2px 5px;
  }
  .portal-separator{display:none!important}
  .portal-brand span:not(.portal-separator){font-size:17px;line-height:1.25;margin:0}
  .customer-account{
    grid-area:account;
    width:auto;
    justify-self:start;
    justify-content:flex-start;
    margin-top:5px;
  }
  .customer-chip{
    min-height:42px;
    padding:5px 8px;
    gap:7px;
    font-size:13px;
    max-width:min(220px,52vw);
  }
  .customer-avatar{width:32px;height:32px}
  .customer-chip span:last-child{max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .customer-tabs-wrap{position:relative}
  .customer-tabs-wrap::before,
  .customer-tabs-wrap::after{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
    width:24px;
    height:24px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff7e9;
    border:1px solid #e1d2b8;
    color:#b58f4b;
    font-size:20px;
    line-height:1;
    font-weight:900;
    pointer-events:none;
    box-shadow:0 6px 16px rgba(7,25,45,.08);
  }
  .customer-tabs-wrap::before{content:'‹';left:7px}
  .customer-tabs-wrap::after{content:'›';right:7px}
  .customer-tabs{padding-inline:30px;scroll-padding-inline:30px}
  .section-head .btn.gold{
    width:min(260px,100%)!important;
    margin-inline:auto;
    justify-self:center;
    align-self:center;
  }
}
@media (max-width:420px){
  .portal-brand-logo{width:118px;max-width:36vw;max-height:40px}
  .portal-brand span:not(.portal-separator){font-size:16px}
  .customer-chip{max-width:54vw;font-size:12px}
  .customer-chip span:last-child{max-width:118px}
  .customer-tabs-wrap::before,.customer-tabs-wrap::after{width:22px;height:22px;font-size:18px}
  .customer-tabs{padding-inline:28px;scroll-padding-inline:28px}
}

/* ===== Step 24: mobile-only header direction + compact mobile typography ===== */
@media (max-width: 820px){
  /* Keep the brand/logo on the right and customer chip on the left in RTL mobile layout */
  .customer-nav{
    grid-template-areas:"brand account";
  }
  .portal-brand{
    justify-self:start;
    align-items:center;
  }
  .customer-account{
    justify-self:end;
    justify-content:flex-end;
  }

  /* Slightly smaller mobile typography across customer portal only */
  body:has(.customer-header){font-size:15px;}
  .customer-tabs a{font-size:13px;}
  .section h2{font-size:24px;}
  .customer-chip{font-size:12px;}
  .portal-brand span:not(.portal-separator){font-size:16px;}
  .card{font-size:15px;}
  .field label{font-size:14px;}
  .field input,.field select,.field textarea{font-size:14px;}
  .btn{font-size:14px;}
  .stat b{font-size:22px;}

  /* Compact mobile dropdown for the customer menu */
  .customer-menu{
    min-width:150px;
    max-width:170px;
    border-radius:13px;
    top:calc(100% + 7px);
  }
  .customer-menu a,
  .customer-menu button{
    padding:9px 12px;
    font-size:13px;
    line-height:1.45;
  }
}

@media (max-width:420px){
  body:has(.customer-header){font-size:14px;}
  .customer-tabs a{font-size:12px;}
  .section h2{font-size:22px;}
  .portal-brand span:not(.portal-separator){font-size:15px;}
  .customer-chip{font-size:11.5px;}
  .customer-menu a,
  .customer-menu button{font-size:12.5px;}
}

/* ===== Step 31: compact customer dropdown menu font ===== */
.customer-menu{
  min-width:165px;
  border-radius:15px;
}
.customer-menu a,
.customer-menu button{
  padding:10px 14px;
  font-size:14px;
  line-height:1.55;
}

@media (max-width:820px){
  .customer-menu{
    min-width:145px;
    max-width:165px;
  }
  .customer-menu a,
  .customer-menu button{
    padding:8px 11px;
    font-size:12.5px;
    line-height:1.45;
  }
}