/* Advanced Product Customizer v3.0.0 – Professional Styles */

:root {
    --apc-accent: #f5a623; --apc-accent-hover: #e09515; --apc-accent-light: #fffbf3;
    --apc-accent-shadow: rgba(245,166,35,0.18); --apc-accent-ring: rgba(245,166,35,0.12);
    --apc-text-primary: #1a2332; --apc-text-secondary: #4a5568; --apc-text-muted: #718096; --apc-text-hint: #a0aec0;
    --apc-border: #e2e8f0; --apc-border-focus: #f5a623;
    --apc-bg: #ffffff; --apc-bg-light: #f9fafb; --apc-bg-panel: #f1f5f9;
    --apc-success: #38a169; --apc-success-bg: #f0fff4;
    --apc-error: #e53e3e; --apc-error-bg: #fff5f5; --apc-warn: #dd6b20;
    --apc-radius-xs: 6px; --apc-radius-sm: 10px; --apc-radius-md: 14px; --apc-radius-lg: 18px; --apc-radius-pill: 999px;
    --apc-shadow-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
    --apc-shadow-md: 0 4px 12px rgba(0,0,0,.08);
    --apc-shadow-focus: 0 0 0 3px var(--apc-accent-ring);
    --apc-transition: 0.18s ease;
}

.apc-customizer-container { margin:28px 0 24px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:14px; color:var(--apc-text-primary); }
.apc-section { margin-bottom:0; padding:20px 0; border-bottom:1px solid var(--apc-border); }
.apc-section:first-child { padding-top:0; }
.apc-section:last-child { border-bottom:none; padding-bottom:0; }
.apc-section-title { margin:0 0 14px; font-size:14px; font-weight:600; color:var(--apc-text-primary); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.apc-title-row { justify-content:space-between; }
.apc-required-star { color:var(--apc-error); font-weight:700; }
.apc-badge { font-size:11px; font-weight:600; color:var(--apc-error); background:var(--apc-error-bg); border:1px solid rgba(229,62,62,0.2); padding:2px 8px; border-radius:var(--apc-radius-pill); margin-left:auto; }

/* ── Variant Grid ── */
.apc-variant-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.apc-variant-btn { background:var(--apc-bg); border:2px solid var(--apc-border); border-radius:var(--apc-radius-md); padding:14px 8px 12px; text-align:center; cursor:pointer; transition:border-color var(--apc-transition),box-shadow var(--apc-transition),transform var(--apc-transition),background var(--apc-transition); width:100%; font-family:inherit; position:relative; }
.apc-variant-btn:hover { border-color:var(--apc-accent); transform:translateY(-2px); box-shadow:var(--apc-shadow-md); }
.apc-variant-btn.active { border-color:var(--apc-accent); background:var(--apc-accent-light); box-shadow:var(--apc-shadow-focus); }
.apc-variant-btn.active::after { content:'✓'; position:absolute; top:-8px; right:-8px; width:20px; height:20px; background:var(--apc-accent); color:#fff; border-radius:50%; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.apc-variant-size { display:block; font-size:12px; font-weight:500; color:var(--apc-text-secondary); margin-bottom:4px; }
.apc-variant-mrp { display:block; font-size:12px; font-weight:400; color:var(--apc-text-hint); text-decoration:line-through; margin-bottom:2px; }
.apc-variant-price { display:block; font-size:17px; font-weight:700; color:var(--apc-accent); }

/* ── Upload ── */
.apc-upload-area { border:2px dashed var(--apc-border); border-radius:var(--apc-radius-lg); padding:28px 20px; text-align:center; background:var(--apc-bg-light); cursor:pointer; transition:border-color var(--apc-transition),background var(--apc-transition),box-shadow var(--apc-transition); }
.apc-upload-area:hover,.apc-upload-area.drag-over { border-color:var(--apc-accent); background:var(--apc-accent-light); box-shadow:var(--apc-shadow-focus); }
.apc-upload-area.error { border-color:var(--apc-error); background:var(--apc-error-bg); }
.apc-upload-area.success { border-color:var(--apc-success); background:var(--apc-success-bg); }
.apc-upload-icon { color:var(--apc-text-hint); margin-bottom:10px; }
.apc-upload-text { font-size:14px; font-weight:600; color:var(--apc-text-primary); margin-bottom:4px; }
.apc-upload-hint { font-size:12px; color:var(--apc-text-muted); }
.apc-file-info { margin-top:10px; text-align:center; }
.apc-file-count { display:inline-block; font-size:11px; color:var(--apc-text-muted); background:var(--apc-bg-panel); padding:3px 12px; border-radius:var(--apc-radius-pill); }
.apc-file-count--active { color:var(--apc-success); background:var(--apc-success-bg); font-weight:600; }
.apc-photo-preview { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.apc-thumb { width:72px; height:72px; border-radius:var(--apc-radius-sm); overflow:hidden; border:2px solid var(--apc-border); transition:border-color var(--apc-transition),transform var(--apc-transition); }
.apc-thumb:hover { border-color:var(--apc-accent); transform:scale(1.05); }
.apc-thumb img { width:100%; height:100%; object-fit:cover; }

/* ── Date ── */
.apc-input-wrap { position:relative; display:flex; align-items:center; }
.apc-input-icon { position:absolute; left:14px; color:var(--apc-text-hint); display:flex; align-items:center; pointer-events:none; }
.apc-date-input { width:100%; padding:12px 14px 12px 42px; border:2px solid var(--apc-border); border-radius:var(--apc-radius-sm); font-size:14px; font-family:inherit; background:var(--apc-bg); color:var(--apc-text-primary); transition:border-color var(--apc-transition),box-shadow var(--apc-transition); appearance:none; -webkit-appearance:none; }
.apc-date-input:focus { outline:none; border-color:var(--apc-border-focus); box-shadow:var(--apc-shadow-focus); }
.apc-date-input.apc-input--error { border-color:var(--apc-error); }

/* ── Wishes ── */
.apc-char-counter { font-size:12px; font-weight:500; color:var(--apc-text-hint); margin-left:auto; }
.apc-counter--normal { color:var(--apc-text-hint); }
.apc-counter--warn { color:var(--apc-warn); }
.apc-counter--danger { color:var(--apc-error); }
.apc-wishes-input { width:100%; padding:12px 14px; border:2px solid var(--apc-border); border-radius:var(--apc-radius-sm); font-size:14px; font-family:inherit; background:var(--apc-bg); color:var(--apc-text-primary); resize:vertical; min-height:80px; line-height:1.55; transition:border-color var(--apc-transition),box-shadow var(--apc-transition); box-sizing:border-box; }
.apc-wishes-input:focus { outline:none; border-color:var(--apc-border-focus); box-shadow:var(--apc-shadow-focus); }
.apc-wishes-input::placeholder { color:var(--apc-text-hint); }
.apc-field-hint { margin:6px 0 0; font-size:12px; color:var(--apc-text-muted); }

/* ── Delivery ── */
.apc-shipping-section { background:var(--apc-bg-light); border-radius:var(--apc-radius-md); padding:18px 18px 0; border:1px solid var(--apc-border); }
.apc-shipping-section .apc-section-title { margin-bottom:14px; }
.apc-region-selector { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.apc-region-option { flex:1; min-width:95px; padding:9px 12px; background:var(--apc-bg); border:1.5px solid var(--apc-border); border-radius:var(--apc-radius-pill); cursor:pointer; transition:all var(--apc-transition); display:flex; align-items:center; justify-content:center; gap:7px; user-select:none; }
.apc-region-option:hover { border-color:var(--apc-accent); background:var(--apc-accent-light); }
.apc-region-option.active { background:var(--apc-accent); border-color:var(--apc-accent); box-shadow:var(--apc-shadow-focus); }
.apc-region-option.active .apc-region-dot { background:#fff; }
.apc-region-option.active .apc-region-text { color:#fff; }
.apc-region-dot { width:7px; height:7px; border-radius:50%; background:var(--apc-text-hint); flex-shrink:0; transition:background var(--apc-transition); }
.apc-region-text { font-size:12px; font-weight:600; color:var(--apc-text-secondary); transition:color var(--apc-transition); white-space:nowrap; }
.apc-delivery-info { padding:12px 0 18px; border-top:1px solid var(--apc-border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; }
.apc-delivery-label { font-size:13px; color:var(--apc-text-muted); display:flex; align-items:center; }
.apc-delivery-date { font-size:13px; font-weight:700; color:var(--apc-success); }

/* ── Errors ── */
.apc-error-message,.apc-upload-error { font-size:12px; color:var(--apc-error); margin-top:7px; }
.apc-loading { opacity:0.55; pointer-events:none; }

/* ── Responsive ── */
@media(max-width:768px) {
    .apc-customizer-container { margin:20px 0; }
    .apc-section { padding:16px 0; }
    .apc-variant-grid { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; }
    .apc-variant-btn { padding:12px 6px 10px; }
    .apc-variant-size { font-size:11px; }
    .apc-variant-price { font-size:15px; }
    .apc-upload-area { padding:22px 14px; }
    .apc-thumb { width:60px; height:60px; }
    .apc-region-option { min-width:80px; padding:8px 10px; }
    .apc-shipping-section { padding:14px 14px 0; }
}
@media(max-width:480px) {
    .apc-variant-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
    .apc-variant-btn.active::after { top:-6px; right:-6px; width:16px; height:16px; font-size:9px; }
    .apc-region-option { flex:1; min-width:auto; padding:7px 6px; }
    .apc-region-text { font-size:11px; }
    .apc-delivery-info { flex-direction:column; align-items:flex-start; gap:4px; }
    .apc-wishes-input { min-height:72px; }
}