/* EsigaraHane Phase 21 - premium customer account + smart search */

.p21-search-hint{
    display:inline-flex;
    gap:5px;
    margin-top:7px;
    padding:6px 8px;
    border-radius:8px;
    background:#fff5ed;
    color:#80644f;
    font-size:9px;
}

.p21-search-hint a{
    color:#c04f0d;
    font-weight:850;
}

/* Premium account */
.p21-account-page{
    padding:34px 0 65px;
    background:#f7f8f9;
    min-height:65vh;
}

.p21-account-head{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    margin-bottom:14px;
}

.p21-account-head>div>span{
    color:#F4772E;
    font-size:8px;
    font-weight:900;
    letter-spacing:.14em;
}

.p21-account-head h1{
    margin:5px 0 5px;
    color:#262b30;
    font-size:29px;
    letter-spacing:-.04em;
}

.p21-account-head p{
    margin:0;
    color:#7b838b;
    font-size:9px;
    line-height:1.55;
}

.p21-account-nav{
    display:flex;
    gap:5px;
    overflow-x:auto;
    margin-bottom:14px;
    padding:5px;
    border:1px solid #e5e8eb;
    border-radius:12px;
    background:#fff;
}

.p21-account-nav a{
    min-height:34px;
    display:flex;
    align-items:center;
    flex:0 0 auto;
    padding:0 11px;
    border-radius:8px;
    color:#6c747c;
    text-decoration:none;
    font-size:8px;
    font-weight:850;
}

.p21-account-nav a.active{
    background:#fff1e7;
    color:#b84c0d;
}

.p21-account-kpis{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-bottom:14px;
}

.p21-account-kpis article{
    padding:15px;
    border:1px solid #e5e8eb;
    border-radius:12px;
    background:#fff;
}

.p21-account-kpis span,
.p21-account-kpis strong{display:block}
.p21-account-kpis span{color:#8a9198;font-size:8px}
.p21-account-kpis strong{margin-top:5px;color:#30363c;font-size:18px}

.p21-account-grid{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr);
    gap:14px;
    align-items:start;
    margin-bottom:14px;
}

.p21-account-card{
    padding:18px;
    border:1px solid #e5e8eb;
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 28px rgba(30,34,38,.03);
}

.p21-account-card h2{
    margin:0 0 11px;
    font-size:15px;
}

.p21-account-card-head{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:flex-start;
    margin-bottom:8px;
}

.p21-account-card-head h2{margin:0}
.p21-account-card-head p{margin:3px 0 0;color:#91979d;font-size:7px}
.p21-account-card-head>a{color:#c55110;text-decoration:none;font-size:8px;font-weight:850}

.p21-account-orders{
    display:flex;
    flex-direction:column;
}

.p21-account-orders>a{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:11px 0;
    border-bottom:1px solid #edf0f2;
    color:inherit;
    text-decoration:none;
}

.p21-account-orders.full>a{
    grid-template-columns:minmax(0,1fr) minmax(130px,.45fr) auto;
}

.p21-account-orders>a:last-child{border-bottom:0}
.p21-account-orders>a>div:last-child{text-align:right}
.p21-account-orders strong,
.p21-account-orders span,
.p21-account-orders small{display:block}
.p21-account-orders strong{font-size:9px;color:#394047}
.p21-account-orders span:not(.p21-account-status),
.p21-account-orders small{margin-top:3px;color:#90979e;font-size:7px}

.p21-account-status{
    display:inline-flex!important;
    width:max-content;
    min-height:23px;
    align-items:center;
    padding:0 7px;
    border-radius:999px;
    background:#f0f2f4;
    color:#677079;
    font-size:7px!important;
    font-weight:900;
}

.p21-account-status.status-processing,
.p21-account-status.status-pending,
.p21-account-status.status-waiting{background:#fff6df;color:#806300}
.p21-account-status.status-shipped{background:#eaf2ff;color:#326b9f}
.p21-account-status.status-completed,
.p21-account-status.status-approved,
.p21-account-status.status-sent{background:#eaf8ef;color:#178447}
.p21-account-status.status-cancelled,
.p21-account-status.status-rejected{background:#fff0f0;color:#b42318}
.p21-account-status.status-unsubscribed{background:#f0f2f4;color:#737b83}

.p21-account-alert-list>div{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px;
    padding:9px 0;
    border-bottom:1px solid #edf0f2;
}

.p21-account-alert-list>div:last-child{border-bottom:0}
.p21-account-alert-list strong{font-size:8px}
.p21-account-alert-list span{color:#999fa5;font-size:7px}

.p21-account-mini-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.p21-account-mini-grid>a{
    min-height:100px;
    display:flex;
    flex-direction:column;
    padding:14px;
    border:1px solid #e5e8eb;
    border-radius:12px;
    background:#fff;
    color:inherit;
    text-decoration:none;
}

.p21-account-mini-grid span{color:#878f97;font-size:8px}
.p21-account-mini-grid strong{margin-top:6px;font-size:22px}
.p21-account-mini-grid small{margin-top:auto;color:#c25312;font-size:7px}

.p21-empty{
    padding:18px;
    border:1px dashed #d9dde1;
    border-radius:10px;
    color:#8b9299;
    text-align:center;
    font-size:8px;
    line-height:1.6;
}

.p21-empty.compact{padding:11px}

.p21-account-progress{
    margin:0 0 14px;
}

.p21-account-tracking{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    margin-bottom:14px;
    padding:13px 15px;
    border:1px solid #ffd8bd;
    border-radius:12px;
    background:#fff7f1;
}

.p21-account-tracking span,
.p21-account-tracking strong{display:block}
.p21-account-tracking span{color:#9c745a;font-size:7px}
.p21-account-tracking strong{margin-top:3px;font-size:10px}
.p21-account-tracking a{color:#b74d0d;text-decoration:none;font-size:8px;font-weight:850}

.p21-account-item-list article{
    display:grid;
    grid-template-columns:58px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:9px 0;
    border-bottom:1px solid #edf0f2;
}

.p21-account-item-image{
    width:58px;
    height:58px;
    overflow:hidden;
    border:1px solid #e7eaed;
    border-radius:9px;
    background:#f4f5f6;
}

.p21-account-item-image img{width:100%;height:100%;object-fit:cover}
.p21-account-item-list strong,
.p21-account-item-list span,
.p21-account-item-list small{display:block}
.p21-account-item-list strong{font-size:9px}
.p21-account-item-list span,
.p21-account-item-list small{margin-top:2px;color:#8b9299;font-size:7px}
.p21-account-item-list b{font-size:9px}

.p21-account-totals{
    max-width:330px;
    margin:15px 0 0 auto;
}

.p21-account-totals>div{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:5px 0;
    color:#717980;
    font-size:8px;
}

.p21-account-totals .grand{
    margin-top:4px;
    padding-top:9px;
    border-top:1px solid #e4e7ea;
    color:#30363c;
    font-size:10px;
}

.p21-account-alert-table article{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:12px;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #edf0f2;
}

.p21-account-alert-table article:last-child{border-bottom:0}
.p21-account-alert-table strong,
.p21-account-alert-table span{display:block}
.p21-account-alert-table strong{font-size:9px}
.p21-account-alert-table>article>div:first-child>span{margin-top:3px;color:#959ca3;font-size:7px}

.p21-account-alert-table>article>div:last-child{
    display:flex;
    gap:7px;
    align-items:center;
}

.p21-account-alert-table a,
.p21-account-alert-table button{
    border:0;
    background:none;
    color:#c04e0c;
    cursor:pointer;
    text-decoration:none;
    font-size:8px;
    font-weight:850;
}

.p21-interaction-list article{
    padding:12px 0;
    border-bottom:1px solid #edf0f2;
}

.p21-interaction-list article:last-child{border-bottom:0}
.p21-interaction-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.p21-interaction-head strong{font-size:9px}
.p21-interaction-list p{margin:7px 0;color:#626a72;font-size:8px;line-height:1.6}
.p21-interaction-list time{color:#a0a6ad;font-size:7px}
.p21-answer{margin:7px 0;padding:9px;border-radius:8px;background:#f6f7f8;color:#5f676f;font-size:8px;line-height:1.6}
.p21-stars{margin-top:6px;color:#f3b400;font-size:12px}

.p21-profile-form{
    max-width:900px;
}

.p21-profile-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.p21-profile-grid label{
    display:flex;
    flex-direction:column;
    gap:5px;
    color:#606870;
    font-size:8px;
    font-weight:800;
}

.p21-profile-grid small{color:#999fa5;font-weight:500;line-height:1.45}

.p21-password-box{
    margin:18px 0;
    padding-top:16px;
    border-top:1px solid #e8ebee;
}

.p21-password-box h2{margin:0}
.p21-password-box>p{margin:4px 0 12px;color:#90979e;font-size:8px}

.p21-address-page-grid{
    margin-top:0;
}

@media(max-width:1000px){
    .p21-account-kpis,
    .p21-account-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .p21-account-grid{grid-template-columns:1fr}
}

@media(max-width:680px){
    .p21-account-kpis,
    .p21-account-mini-grid,
    .p21-profile-grid{grid-template-columns:1fr}

    .p21-account-head{align-items:flex-start;flex-direction:column}
    .p21-account-orders.full>a{grid-template-columns:1fr}
    .p21-account-orders.full>a>div:last-child{text-align:left}
    .p21-account-alert-table article{grid-template-columns:1fr}
    .p21-account-tracking{align-items:flex-start;flex-direction:column}
}