/* =============================================================
   Wholesale Portal — Stylesheet  |  Namespace: .wpw-*
   ============================================================= */

.wpw-portal {
	--wpw-primary:        #1d4ed8;
	--wpw-primary-hover:  #1e40af;
	--wpw-primary-light:  #eff6ff;
	--wpw-primary-border: #bfdbfe;
	--wpw-bg:             #f8fafc;
	--wpw-surface:        #ffffff;
	--wpw-border:         #e2e8f0;
	--wpw-border-focus:   #93c5fd;
	--wpw-text:           #0f172a;
	--wpw-text-sub:       #475569;
	--wpw-text-muted:     #94a3b8;
	--wpw-error:          #dc2626;
	--wpw-error-bg:       #fef2f2;
	--wpw-error-border:   #fca5a5;
	--wpw-success:        #16a34a;
	--wpw-success-bg:     #f0fdf4;
	--wpw-success-border: #86efac;
	--wpw-radius:         6px;
	--wpw-radius-lg:      10px;
	--wpw-shadow:         0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
	--wpw-shadow-md:      0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.05);
	--wpw-shadow-lg:      0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.05);
	--wpw-font:           -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,sans-serif;
	--wpw-transition:     150ms ease;
}

.wpw-portal *,.wpw-portal *::before,.wpw-portal *::after{box-sizing:border-box}

.wpw-portal{font-family:var(--wpw-font);color:var(--wpw-text);line-height:1.5;max-width:800px;margin:0 auto;padding:2rem 1rem}

/* Auth */
.wpw-auth{background:var(--wpw-surface);border:1px solid var(--wpw-border);border-radius:var(--wpw-radius-lg);box-shadow:var(--wpw-shadow-md);overflow:hidden}

/* Tabs */
.wpw-auth__tabs{display:flex;border-bottom:1px solid var(--wpw-border);background:var(--wpw-bg)}
.wpw-auth__tab{flex:1;padding:.875rem 1.5rem;font-size:.9rem;font-weight:500;font-family:var(--wpw-font);color:var(--wpw-text-sub);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color var(--wpw-transition),border-color var(--wpw-transition),background var(--wpw-transition)}
.wpw-auth__tab:hover{color:var(--wpw-text);background:var(--wpw-surface)}
.wpw-auth__tab--active{color:var(--wpw-primary);background:var(--wpw-surface);border-bottom-color:var(--wpw-primary);font-weight:600}

/* Panels */
.wpw-auth__panel{padding:2rem}
.wpw-auth__panel[hidden]{display:none}
.wpw-form-intro{margin-bottom:1.75rem;color:var(--wpw-text-sub);font-size:.9rem}

/* Messages */
#wpw-messages{margin-bottom:1.5rem}
.wpw-notice{display:flex;gap:.75rem;align-items:flex-start;padding:.875rem 1rem;border-radius:var(--wpw-radius);font-size:.9rem;line-height:1.5}
.wpw-notice--success{background:var(--wpw-success-bg);border:1px solid var(--wpw-success-border);color:#14532d}
.wpw-notice--error{background:var(--wpw-error-bg);border:1px solid var(--wpw-error-border);color:#7f1d1d}
.wpw-notice--error ul{margin:0;padding:0 0 0 1.1rem}
.wpw-notice--error li{margin-bottom:.2rem}
.wpw-notice--error li:last-child{margin-bottom:0}

/* Fieldset */
.wpw-fieldset{border:none;padding:0;margin:0 0 1.75rem}
.wpw-fieldset+.wpw-fieldset{padding-top:1.75rem;border-top:1px solid var(--wpw-border)}
.wpw-fieldset__legend{display:block;width:100%;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wpw-text-muted);margin-bottom:1.25rem;padding:0}
.wpw-fieldset__desc{font-size:.82rem;color:var(--wpw-text-sub);margin:-.75rem 0 1rem}

/* Grid */
.wpw-grid{display:grid;gap:1rem}
.wpw-grid--2{grid-template-columns:1fr 1fr}
.wpw-grid--3{grid-template-columns:1fr .6fr .6fr}

/* Field */
.wpw-field{margin-bottom:1rem}
.wpw-field:last-child{margin-bottom:0}

/* Label */
.wpw-label{display:flex;align-items:center;gap:.3rem;font-size:.82rem;font-weight:600;color:#334155;margin-bottom:.4rem}
.wpw-required{color:var(--wpw-error);font-weight:700}
.wpw-optional{font-size:.75rem;font-weight:400;color:var(--wpw-text-muted)}
.wpw-hint{font-size:.78rem;color:var(--wpw-text-muted);margin:.3rem 0 0}

/* Input */
.wpw-input{display:block;width:100%;padding:.6rem .75rem;font-size:.9rem;font-family:var(--wpw-font);color:var(--wpw-text);background:var(--wpw-surface);border:1px solid var(--wpw-border);border-radius:var(--wpw-radius);transition:border-color var(--wpw-transition),box-shadow var(--wpw-transition);-webkit-appearance:none}
.wpw-input::placeholder{color:var(--wpw-text-muted)}
.wpw-input:focus{outline:none;border-color:var(--wpw-border-focus);box-shadow:0 0 0 3px rgba(147,197,253,.35)}

/* Phone row */
.wpw-phone{display:flex;align-items:stretch;position:relative;border:1px solid var(--wpw-border);border-radius:var(--wpw-radius);background:var(--wpw-surface);transition:border-color var(--wpw-transition),box-shadow var(--wpw-transition)}
.wpw-phone:focus-within{border-color:var(--wpw-border-focus);box-shadow:0 0 0 3px rgba(147,197,253,.35)}

.wpw-phone__selector{display:flex;align-items:center;gap:.3rem;padding:.6rem .55rem .6rem .75rem;cursor:pointer;white-space:nowrap;border-right:1px solid var(--wpw-border);flex-shrink:0;user-select:none;background:var(--wpw-bg);border-radius:calc(var(--wpw-radius) - 1px) 0 0 calc(var(--wpw-radius) - 1px);transition:background var(--wpw-transition);min-width:88px}
.wpw-phone__selector:hover{background:#f1f5f9}
.wpw-phone__selector:focus{outline:2px solid var(--wpw-border-focus);outline-offset:-2px}
.wpw-phone__selector[aria-expanded="true"]{background:#f1f5f9}

.wpw-phone__flag{font-size:1.1rem;line-height:1}
.wpw-phone__code{font-size:.82rem;font-weight:600;color:var(--wpw-text);font-variant-numeric:tabular-nums}
.wpw-phone__chevron{color:var(--wpw-text-muted);flex-shrink:0;transition:transform var(--wpw-transition)}
.wpw-phone__selector[aria-expanded="true"] .wpw-phone__chevron{transform:rotate(180deg)}

.wpw-phone__dropdown{position:absolute;top:calc(100% + 4px);left:0;z-index:999;width:300px;background:var(--wpw-surface);border:1px solid var(--wpw-border);border-radius:var(--wpw-radius-lg);box-shadow:var(--wpw-shadow-lg);overflow:hidden}
.wpw-phone__dropdown[hidden]{display:none}

.wpw-phone__search-wrap{display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;border-bottom:1px solid var(--wpw-border);background:var(--wpw-bg)}
.wpw-phone__search-icon{color:var(--wpw-text-muted);flex-shrink:0}
.wpw-phone__search{flex:1;border:none;background:transparent;font-size:.85rem;font-family:var(--wpw-font);color:var(--wpw-text);outline:none}
.wpw-phone__search::placeholder{color:var(--wpw-text-muted)}

.wpw-phone__list{list-style:none;margin:0;padding:.3rem 0;max-height:220px;overflow-y:auto;scroll-behavior:smooth}
.wpw-phone__list::-webkit-scrollbar{width:4px}
.wpw-phone__list::-webkit-scrollbar-track{background:transparent}
.wpw-phone__list::-webkit-scrollbar-thumb{background:var(--wpw-border);border-radius:2px}

.wpw-country-item{display:flex;align-items:center;gap:.6rem;padding:.45rem .75rem;cursor:pointer;transition:background var(--wpw-transition);outline:none}
.wpw-country-item:hover,.wpw-country-item:focus,.wpw-country-item[aria-selected="true"]{background:var(--wpw-primary-light)}
.wpw-country-item__flag{font-size:1rem;line-height:1;flex-shrink:0}
.wpw-country-item__name{flex:1;font-size:.83rem;color:var(--wpw-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wpw-country-item__dial{font-size:.78rem;color:var(--wpw-text-muted);font-variant-numeric:tabular-nums;flex-shrink:0}
.wpw-country-item--empty{padding:.75rem;font-size:.85rem;color:var(--wpw-text-muted);text-align:center;cursor:default}

.wpw-phone .wpw-input.wpw-phone__number{border:none;border-radius:0 calc(var(--wpw-radius) - 1px) calc(var(--wpw-radius) - 1px) 0;box-shadow:none;flex:1}
.wpw-phone .wpw-input.wpw-phone__number:focus{box-shadow:none}

/* Password */
.wpw-password-wrap{position:relative}
.wpw-password-wrap .wpw-input{padding-right:2.75rem}
.wpw-password-toggle{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);background:transparent;border:none;padding:.25rem;cursor:pointer;color:var(--wpw-text-muted);display:flex;align-items:center;border-radius:4px;transition:color var(--wpw-transition)}
.wpw-password-toggle:hover{color:var(--wpw-text)}
.wpw-password-toggle:focus-visible{outline:2px solid var(--wpw-border-focus)}

/* File upload */
.wpw-upload{display:flex;align-items:center;gap:.85rem;padding:.75rem 1rem;border:1.5px dashed var(--wpw-border);border-radius:var(--wpw-radius);cursor:pointer;background:var(--wpw-bg);transition:border-color var(--wpw-transition),background var(--wpw-transition)}
.wpw-upload:hover{border-color:var(--wpw-primary);background:var(--wpw-primary-light)}
.wpw-upload--has-file{border-style:solid;border-color:var(--wpw-success);background:var(--wpw-success-bg)}
.wpw-upload__input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.wpw-upload__icon{color:var(--wpw-text-muted);flex-shrink:0;display:flex;align-items:center}
.wpw-upload--has-file .wpw-upload__icon{color:var(--wpw-success)}
.wpw-upload__text{flex:1;font-size:.85rem}
.wpw-upload__cta{font-weight:600;color:var(--wpw-primary);display:block}
.wpw-upload__hint{color:var(--wpw-text-muted);font-size:.78rem}
.wpw-upload__filename{font-size:.8rem;color:var(--wpw-text-muted);flex-shrink:0;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpw-upload--has-file .wpw-upload__filename{color:var(--wpw-success);font-weight:500}

/* Form footer */
.wpw-form-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.75rem;margin-top:1.75rem;border-top:1px solid var(--wpw-border)}
.wpw-form-footer__note{font-size:.78rem;color:var(--wpw-text-muted);margin:0}

/* Buttons */
.wpw-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--wpw-font);font-weight:600;border:none;cursor:pointer;border-radius:var(--wpw-radius);transition:background var(--wpw-transition),opacity var(--wpw-transition);text-decoration:none;white-space:nowrap}
.wpw-btn--primary{background:var(--wpw-primary);color:#fff}
.wpw-btn--primary:hover{background:var(--wpw-primary-hover);color:#fff}
.wpw-btn--primary:focus-visible{outline:2px solid var(--wpw-primary);outline-offset:2px}
.wpw-btn--primary:disabled{opacity:.6;cursor:not-allowed}
.wpw-btn--sm{font-size:.8rem;padding:.45rem .9rem}
.wpw-btn--lg{font-size:.95rem;padding:.7rem 1.75rem}
.wpw-btn__spinner{animation:wpw-spin .7s linear infinite}
@keyframes wpw-spin{to{transform:rotate(360deg)}}

/* Login */
.wpw-login-wrap{max-width:420px;margin:0 auto}
.wpw-login-wrap #loginform{padding:0;border:none;background:transparent;box-shadow:none}

/* Dashboard */
.wpw-dashboard__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.wpw-dashboard__title{font-size:1.5rem;font-weight:700;margin:0 0 .25rem;color:var(--wpw-text)}
.wpw-dashboard__sub{font-size:.85rem;color:var(--wpw-text-sub);margin:0}
.wpw-dashboard__badges{display:flex;gap:.5rem;flex-wrap:wrap}
.wpw-badge{padding:.3rem .75rem;background:var(--wpw-primary-light);color:var(--wpw-primary);border:1px solid var(--wpw-primary-border);border-radius:20px;font-size:.8rem;font-weight:600}

/* Products */
.wpw-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem}
.wpw-product-card{border:1px solid var(--wpw-border);border-radius:var(--wpw-radius-lg);overflow:hidden;background:var(--wpw-surface);box-shadow:var(--wpw-shadow);transition:box-shadow var(--wpw-transition),transform var(--wpw-transition)}
.wpw-product-card:hover{box-shadow:var(--wpw-shadow-md);transform:translateY(-1px)}
.wpw-product-card__image img{width:100%;height:160px;object-fit:cover;display:block}
.wpw-product-card__body{padding:.875rem}
.wpw-product-card__name{font-size:.875rem;font-weight:600;margin:0 0 .4rem;color:var(--wpw-text);line-height:1.3}
.wpw-product-card__price{font-size:1rem;font-weight:700;color:var(--wpw-primary);margin-bottom:.75rem}

/* Responsive */
@media(max-width:640px){
	.wpw-portal{padding:1rem .75rem}
	.wpw-auth__panel{padding:1.25rem}
	.wpw-grid--2,.wpw-grid--3{grid-template-columns:1fr}
	.wpw-phone__dropdown{width:calc(100vw - 1.5rem);left:50%;transform:translateX(-50%)}
	.wpw-form-footer{flex-direction:column-reverse;align-items:stretch}
	.wpw-btn--lg{width:100%}
	.wpw-dashboard__header{flex-direction:column}
	.wpw-product-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:380px){.wpw-product-grid{grid-template-columns:1fr}}