/* Dynar — Customer Portal V2. Scoped to .customer-portal to avoid modifying other views. */
.customer-portal {
    --cp-navy:#173c50;
    --cp-navy-2:#254c62;
    --cp-teal:#357d81;
    --cp-teal-dark:#27646a;
    --cp-ink:#1b3441;
    --cp-muted:#6b808d;
    --cp-border:#e3ecf0;
    --cp-surface:#fff;
    --cp-ground:#f5f8fa;
    --cp-soft:#eff6f7;
    min-height:100vh;
    padding:24px clamp(16px,4vw,54px) 70px;
    background:radial-gradient(ellipse at 95% 0%,#e8f3f3 0%,transparent 35%),var(--cp-ground);
    color:var(--cp-ink);
    font-family:"Tajawal",Arial,sans-serif;
    line-height:1.6;
}
.customer-portal *, .customer-portal *::before, .customer-portal *::after {box-sizing:border-box;}
.customer-portal .portal-head {
    max-width:1180px;
    margin:0 auto 21px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-height:72px;
}
.customer-portal .portal-brand {display:flex;align-items:center;gap:11px;min-width:0;}
.customer-portal .portal-brand img {width:50px;height:50px;object-fit:contain;padding:5px;background:white;border:1px solid var(--cp-border);border-radius:14px;box-shadow:0 7px 20px #203e4b0b;}
.customer-portal .portal-brand strong {display:block;font-size:20px;font-weight:800;line-height:1.1;color:var(--cp-navy);}
.customer-portal .portal-brand small {display:block;font-size:12px;color:var(--cp-muted);margin-top:5px;}
.customer-portal .portal-head-actions {display:flex;align-items:center;gap:10px;}
.customer-portal .portal-back-link,.customer-portal .language-switch {
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    min-height:41px;padding:9px 15px;border:1px solid var(--cp-border);
    border-radius:12px;background:white;color:var(--cp-navy);font-size:13px;font-weight:800;
    text-decoration:none;cursor:pointer;box-shadow:0 4px 12px #163b4510;
}
.customer-portal .portal-back-link:hover,.customer-portal .language-switch:hover {border-color:#adcdd1;background:#faffff;}
.customer-portal .portal-back-link span {font-size:18px;line-height:1;}
.customer-portal .language-switch {min-width:50px;color:var(--cp-teal-dark);}
.customer-portal .portal-shell {max-width:1180px;margin:0 auto;width:100%;}
.customer-portal .portal-loading {
    min-height:310px;display:flex;justify-content:center;align-items:center;
    flex-direction:column;gap:13px;background:white;border:1px solid var(--cp-border);
    border-radius:22px;color:var(--cp-muted);
}
.customer-portal .portal-loading .spinner {width:34px;height:34px;border:3px solid #d9eaec;border-top-color:var(--cp-teal);border-radius:50%;animation:cp-spin .8s linear infinite;}
@keyframes cp-spin {to {transform:rotate(360deg);}}
/* Hero */
.customer-portal .portal-welcome {
    position:relative;isolation:isolate;overflow:hidden;
    display:flex;justify-content:flex-start;align-items:center;gap:20px;flex-wrap:wrap;
    min-height:182px;padding:30px clamp(24px,3.8vw,45px);
    border-radius:23px;background:linear-gradient(115deg,#173748 5%,#255b69 60%,#358487 120%);
    color:#fff;box-shadow:0 18px 45px #284b6330;
}
.customer-portal .portal-welcome::after {
    content:"";position:absolute;z-index:-1;inset:auto auto -145px -55px;
    width:370px;height:370px;border-radius:50%;border:65px solid #ffffff0c;
}
.customer-portal .portal-welcome::before {
    content:"";position:absolute;z-index:-1;inset:-170px -120px auto auto;
    width:400px;height:400px;border-radius:50%;background:#ffffff0b;
}
.customer-portal .portal-welcome .customer-avatar {
    width:78px;height:78px;flex:0 0 78px;border:2px solid #ffffff5c;
    background:linear-gradient(140deg,#fff,#e9f9f7);color:var(--cp-teal-dark);
    font-size:30px;border-radius:23px;box-shadow:0 9px 22px #142a3b38;
}
.customer-portal .portal-welcome-info {flex:1 1 320px;min-width:0;}
.customer-portal .portal-eyebrow {display:block;font-size:13px;color:#cde5e7;font-weight:700;}
.customer-portal .portal-welcome h1 {font-size:clamp(24px,2.2vw,34px);color:#fff;margin:5px 0 7px;font-weight:800;line-height:1.25;overflow-wrap:anywhere;}
.customer-portal .portal-welcome-info p {display:flex;align-items:center;gap:9px 13px;flex-wrap:wrap;margin:0;font-size:13px;color:#e0eeee;overflow-wrap:anywhere;}
.customer-portal .portal-welcome-info p span {unicode-bidi:isolate;}
.customer-portal .portal-logout {margin-inline-start:auto;align-self:flex-start;background:#ffffff18;color:white;border:1px solid #ffffff55;box-shadow:none;white-space:nowrap;}
.customer-portal .portal-logout:hover {background:#ffffff2d;}
/* Shortcuts */
.customer-portal .portal-overview {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 22px;}
.customer-portal .portal-overview-item {
    display:flex;align-items:center;gap:13px;min-height:108px;padding:17px 17px 17px 13px;
    text-decoration:none;color:var(--cp-ink);background:white;border:1px solid var(--cp-border);
    border-radius:17px;box-shadow:0 7px 18px #22485c0b;transition:transform .15s,border-color .15s,box-shadow .15s;
}
.customer-portal .portal-overview-item:hover {transform:translateY(-3px);border-color:#a8d0d1;box-shadow:0 10px 28px #274b5f1a;}
.customer-portal .portal-overview-icon {width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;font-size:27px;font-weight:600;border-radius:14px;background:#e8f5f5;color:#2e7880;}
.customer-portal .portal-overview-wishlist {background:#fff0f1;color:#b95a6a;}
.customer-portal .portal-overview-returns {background:#fff4e8;color:#b8752b;}
.customer-portal .portal-overview-addresses {background:#edf1ff;color:#5668ad;}
.customer-portal .portal-overview-copy {min-width:0;flex:1;}
.customer-portal .portal-overview-copy small {display:block;font-size:12px;font-weight:700;color:var(--cp-muted);line-height:1.35;}
.customer-portal .portal-overview-copy strong {display:block;font-size:26px;font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums;margin-top:4px;color:var(--cp-navy);}
.customer-portal .portal-overview-arrow {align-self:flex-start;font-size:15px;color:#a3b6c1;}
/* Masonry-like two columns: long orders and returns never stretch the wishlist column. */
.customer-portal .portal-content-grid {display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.95fr);gap:19px;align-items:start;}
.customer-portal .portal-main-column,.customer-portal .portal-side-column {display:flex;min-width:0;flex-direction:column;gap:19px;}
.customer-portal .portal-section {scroll-margin-top:18px;min-width:0;background:white;border:1px solid var(--cp-border);border-radius:20px;padding:clamp(20px,2.5vw,29px);box-shadow:0 8px 24px #2046580b;}
.customer-portal .portal-section-title {display:flex;align-items:center;gap:13px;min-width:0;margin-bottom:21px;padding-bottom:18px;border-bottom:1px solid #edf2f4;}
.customer-portal .portal-section-title > div {min-width:0;flex:1;}
.customer-portal .portal-section-title h2 {margin:0;color:var(--cp-navy);font-size:19px;line-height:1.3;font-weight:800;}
.customer-portal .portal-section-title small {display:block;margin-top:5px;color:var(--cp-muted);font-size:12px;line-height:1.45;}
.customer-portal .portal-section-glyph {display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;background:#eff7f7;color:var(--cp-teal);border-radius:12px;font-size:26px;line-height:1;}
.customer-portal .portal-section-wishlist .portal-section-glyph {background:#fff1f3;color:#ba596a;}
.customer-portal .portal-section-returns .portal-section-glyph {background:#fff4e7;color:#b87d33;}
.customer-portal .portal-section-addresses .portal-section-glyph {background:#edf1ff;color:#6472b5;}
.customer-portal .count-badge {display:inline-flex;align-items:center;justify-content:center;min-width:35px;height:34px;padding:0 9px;background:#e9f4f5;color:var(--cp-teal-dark);font-size:15px;font-weight:800;border-radius:10px;}
.customer-portal .portal-empty {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:215px;text-align:center;padding:25px 12px;background:linear-gradient(160deg,#f9fcfd,#f5f9fb);border:1px dashed #d8e5e8;border-radius:15px;color:var(--cp-muted);}
.customer-portal .portal-empty.compact {min-height:145px;padding:19px 14px;}
.customer-portal .portal-empty>span {display:grid;place-items:center;width:52px;height:52px;margin-bottom:3px;background:#e7f0f3;color:#577d89;border-radius:16px;font-size:27px;}
.customer-portal .portal-empty p {margin:0;font-weight:600;font-size:14px;line-height:1.6;}
.customer-portal .portal-empty .btn {margin-top:12px;}
/* Consistent controls */
.customer-portal .btn {border-radius:11px;min-height:40px;padding:9px 15px;font-size:13px;text-decoration:none;}
.customer-portal .btn.primary {background:var(--cp-teal-dark);color:white;box-shadow:0 7px 16px #2f6b721b;}
.customer-portal .btn.primary:hover {background:#22565d;}
.customer-portal .btn.ghost {border:1px solid #d8e6e8;color:var(--cp-navy);background:#f8fbfc;box-shadow:none;}
.customer-portal .btn.ghost:hover {background:#edf6f7;border-color:#b7d5d8;}
.customer-portal .btn.danger-soft {background:#fff2f2;color:#a83a48;border:1px solid #f8dddd;}
.customer-portal :is(input:not([type="checkbox"]),select,textarea) {max-width:100%;min-height:42px;width:100%;border:1px solid #d7e3e7;border-radius:10px;background:white;padding:10px 13px;outline:none;color:var(--cp-ink);font-size:14px;}
.customer-portal :is(input,select,textarea):focus-visible {outline:3px solid #3c84851d;outline-offset:1px;border-color:#41858b;}
.customer-portal :is(input,select,textarea)::placeholder {color:#8c9da6;}
.customer-portal :is(button,a):focus-visible {outline:3px solid #439ca183;outline-offset:3px;}
.customer-portal :is(input,select,textarea,button) {font-family:inherit;}
/* Order tiles */
.customer-portal .portal-orders {display:grid;gap:12px;}
.customer-portal .portal-orders .portal-order-card {display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:13px;align-items:center;padding:17px;background:#f9fbfc;border:1px solid var(--cp-border);border-radius:14px;}
.customer-portal .portal-order-card > div {min-width:0;}
.customer-portal .portal-order-card small {display:block;margin-bottom:3px;color:var(--cp-muted);font-size:11px;}
.customer-portal .portal-order-card b,.customer-portal .portal-order-card strong {font-size:15px;color:var(--cp-navy);font-weight:800;}
.customer-portal .portal-order-card span:not(.status-pill) {font-size:13px;}
.customer-portal .portal-order-card .order-actions {display:flex;gap:7px;grid-column:2/-1;justify-content:flex-end;}
.customer-portal .portal-order-card .order-actions .btn {min-height:34px;font-size:12px;padding:7px 11px;}
.customer-portal .portal-order-card .status-pill {display:inline-block;font-size:12px;padding:5px 9px;border-radius:8px;background:#ebf2f6;color:#386176;font-weight:800;}
/* Wishlist */
.customer-portal .wishlist-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;}
.customer-portal .wishlist-card {min-width:0;border:1px solid var(--cp-border);border-radius:14px;overflow:hidden;background:#fff;}
.customer-portal .wishlist-image {height:130px;background:#f4f8fa;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.customer-portal .wishlist-image img {display:block;width:100%;height:100%;object-fit:cover;}
.customer-portal .image-placeholder {font-size:30px;}
.customer-portal .wishlist-body {padding:13px;}
.customer-portal .wishlist-body h3 {font-size:14px;line-height:1.5;margin:0 0 8px;font-weight:800;overflow-wrap:anywhere;}
.customer-portal .wishlist-body > strong {display:block;font-size:15px;color:var(--cp-teal-dark);}
.customer-portal .wishlist-actions {display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
.customer-portal .wishlist-actions .btn {flex:1;font-size:12px;padding:7px 9px;}
/* Reviews and returns */
.customer-portal .review-editor,.customer-portal .return-editor {padding:17px;margin-top:17px;background:#f7fafb;border:1px solid var(--cp-border);border-radius:15px;}
.customer-portal .review-editor-head {display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:14px;}
.customer-portal .review-editor-head small,.customer-portal .review-editor-head b {display:block;}
.customer-portal .review-editor-head small {color:var(--cp-muted);}
.customer-portal .review-editor-head b {margin-top:5px;}
.customer-portal .review-editor .close-btn {border:none;background:#fff;border-radius:10px;width:33px;height:33px;font-size:22px;color:var(--cp-ink);cursor:pointer;}
.customer-portal .review-form,.customer-portal .return-create-form {display:grid;grid-template-columns:1fr 1fr;gap:13px;align-items:end;}
.customer-portal .review-form label,.customer-portal .return-create-form label,.customer-portal .return-footer label {display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--cp-navy);min-width:0;}
.customer-portal .review-form .review-comment,.customer-portal .review-form>.btn {grid-column:1/-1;}
.customer-portal .review-form textarea {resize:vertical;min-height:105px;}
.customer-portal .return-create-form label:nth-child(2) {grid-column:1/-1;}
.customer-portal .return-create-form>.btn {justify-self:start;}
.customer-portal .return-products {display:grid;gap:9px;margin-bottom:13px;}
.customer-portal .return-product {display:flex;align-items:center;gap:11px;border:1px solid var(--cp-border);background:white;border-radius:10px;padding:11px;cursor:pointer;}
.customer-portal .return-product.selected {border-color:#72a8aa;background:#f0f9f9;}
.customer-portal .return-product input[type=checkbox] {width:18px;height:18px;accent-color:var(--cp-teal);flex:none;}
.customer-portal .return-product > div {flex:1;min-width:0;}
.customer-portal .return-product b,.customer-portal .return-product small {display:block;}
.customer-portal .return-product span {font-size:12px;color:var(--cp-muted);}
.customer-portal .return-footer {display:flex;flex-wrap:wrap;align-items:end;gap:9px;}
.customer-portal .return-footer label {flex:1 1 170px;}
/* Addresses */
.customer-portal .address-list {display:grid;grid-template-columns:1fr;gap:10px;}
.customer-portal .address-card {display:flex;align-items:start;gap:11px;padding:15px;border:1px solid var(--cp-border);background:#fbfcfd;border-radius:13px;}
.customer-portal .address-card >div:last-child {min-width:0;flex:1;}
.customer-portal .address-icon {width:37px;height:37px;flex:0 0 37px;display:grid;place-items:center;background:#e7f1f2;border-radius:10px;}
.customer-portal .address-title {display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.customer-portal .address-title b {font-weight:800;color:var(--cp-navy);}
.customer-portal .address-card p {margin:5px 0;font-size:13px;overflow-wrap:anywhere;}
.customer-portal .address-card small {font-size:12px;color:var(--cp-muted);}
.customer-portal .default-badge {font-size:11px;border-radius:99px;padding:3px 8px;background:#dff4eb;color:#197551;}
.customer-portal .address-add {display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:16px;padding-top:17px;border-top:1px solid var(--cp-border);}
.customer-portal .address-add .btn {width:100%;}
/* Auth form */
.customer-portal .portal-auth {max-width:500px;margin:30px auto;padding:35px clamp(22px,4vw,43px);background:white;border:1px solid var(--cp-border);border-radius:22px;box-shadow:0 15px 40px #26465713;}
.customer-portal .portal-auth-mark {width:53px;height:53px;display:grid;place-items:center;font-size:28px;border-radius:16px;background:#e9f5f5;color:var(--cp-teal);margin:0 auto 15px;}
.customer-portal .portal-auth-eyebrow {display:block;text-align:center;color:var(--cp-teal);font-weight:800;font-size:12px;}
.customer-portal .portal-auth h1 {margin:7px 0;font-size:28px;text-align:center;color:var(--cp-navy);}
.customer-portal .portal-auth-intro {font-size:13px;line-height:1.65;text-align:center;color:var(--cp-muted);margin:0 auto 18px;max-width:350px;}
.customer-portal .portal-tabs {display:flex;gap:5px;background:#f2f7f8;border-radius:12px;padding:5px;margin:0 0 21px;}
.customer-portal .portal-tabs button {min-height:42px;flex:1;border:none;border-radius:9px;cursor:pointer;background:transparent;font-weight:800;color:var(--cp-muted);}
.customer-portal .portal-tabs button.active {background:white;color:var(--cp-navy);box-shadow:0 3px 11px #244b601b;}
.customer-portal .portal-form {display:grid;gap:14px;}
.customer-portal .portal-form label {display:grid;gap:6px;font-size:13px;font-weight:800;color:var(--cp-navy);}
.customer-portal .portal-form>.btn {width:100%;margin-top:5px;}
.customer-portal .portal-message {max-width:800px;margin:20px auto 0;}
@media(max-width:1000px) {
    .customer-portal .portal-overview {grid-template-columns:repeat(2,minmax(0,1fr));}
    .customer-portal .portal-content-grid {grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:14px;}
    .customer-portal .portal-main-column,.customer-portal .portal-side-column {gap:14px;}
    .customer-portal .portal-section {padding:19px;}
    .customer-portal .portal-order-card .order-actions {grid-column:1/-1;justify-content:flex-start;}
}
@media(max-width:720px) {
    .customer-portal {padding:14px 12px 35px;}
    .customer-portal .portal-head {min-height:55px;margin-bottom:13px;}
    .customer-portal .portal-brand img {width:42px;height:42px;}
    .customer-portal .portal-brand strong {font-size:17px;}
    .customer-portal .portal-brand small {font-size:10px;}
    .customer-portal .portal-head-actions {gap:6px;}
    .customer-portal .portal-back-link,.customer-portal .language-switch {min-height:37px;padding:7px 10px;font-size:11px;}
    .customer-portal .portal-welcome {padding:23px 19px;min-height:unset;gap:15px;border-radius:19px;}
    .customer-portal .portal-welcome .customer-avatar {width:58px;height:58px;flex-basis:58px;font-size:24px;border-radius:16px;}
    .customer-portal .portal-welcome-info {flex:1 1 160px;}
    .customer-portal .portal-welcome h1 {font-size:23px;}
    .customer-portal .portal-logout {margin-inline-start:0;}
    .customer-portal .portal-overview {gap:9px;margin:13px 0;}
    .customer-portal .portal-overview-item {min-height:84px;padding:12px 10px;gap:9px;border-radius:13px;}
    .customer-portal .portal-overview-icon {width:36px;height:36px;flex-basis:36px;border-radius:11px;font-size:20px;}
    .customer-portal .portal-overview-copy strong {font-size:21px;}
    .customer-portal .portal-overview-copy small {font-size:11px;}
    .customer-portal .portal-overview-arrow {display:none;}
    .customer-portal .portal-content-grid {grid-template-columns:minmax(0,1fr);}
    .customer-portal .portal-section {border-radius:16px;}
    .customer-portal .portal-order-card .order-actions {justify-content:flex-start;}
}
@media(max-width:420px) {
    .customer-portal .portal-brand small {display:none;}
    .customer-portal .portal-head-actions .portal-back-link {gap:4px;}
    .customer-portal .portal-welcome .customer-avatar {display:none;}
    .customer-portal .portal-welcome-info {flex:1 1 100%;}
    .customer-portal .portal-section-title h2 {font-size:17px;}
    .customer-portal .portal-section-glyph {width:37px;height:37px;flex-basis:37px;font-size:22px;}
    .customer-portal .portal-orders .portal-order-card {grid-template-columns:repeat(2,minmax(0,1fr));}
    .customer-portal .review-form,.customer-portal .return-create-form {grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce) {
    .customer-portal .portal-overview-item {transition:none;}
    .customer-portal .portal-loading .spinner {animation:none;}
}