/* WP Product Warranty — Frontend Styles */
:root {
    --wpw-green: #1D9E75; --wpw-green-light: #E1F5EE;
    --wpw-amber: #BA7517; --wpw-amber-light: #FAEEDA;
    --wpw-red: #A32D2D;   --wpw-red-light: #FCEBEB;
    --wpw-blue: #185FA5;  --wpw-blue-light: #E6F1FB;
    --wpw-gray: #5F5E5A;  --wpw-gray-light: #F1EFE8;
    --wpw-radius: 8px; --wpw-border: #e0e0e0;
}
.wpw-notice { padding:14px 18px; border-radius:var(--wpw-radius); background:var(--wpw-blue-light); color:var(--wpw-blue); margin:16px 0; font-size:14px; }
.wpw-notice-warn { background:var(--wpw-amber-light); color:var(--wpw-amber); }
.wpw-notice-err  { background:var(--wpw-red-light);   color:var(--wpw-red); }

/* Product grid */
.wpw-product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; margin:20px 0; }
.wpw-product-card { background:#fff; border:1px solid var(--wpw-border); border-radius:var(--wpw-radius); overflow:hidden; }
.wpw-product-card.wpw-expired { opacity:.75; }
.wpw-product-header { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--wpw-border); }
.wpw-product-name { font-weight:600; font-size:14px; }
.wpw-product-body { padding:16px; }
.wpw-product-row { display:flex; justify-content:space-between; font-size:13px; margin-bottom:8px; }
.wpw-product-row span { color:#888; }
.wpw-product-footer { padding:12px 16px; border-top:1px solid var(--wpw-border); }

/* Warranty bar */
.wpw-warranty-bar { height:6px; background:#eee; border-radius:3px; margin:12px 0 4px; overflow:hidden; }
.wpw-warranty-fill { height:100%; background:var(--wpw-green); border-radius:3px; transition:width .5s; }
.wpw-days-left { font-size:12px; color:var(--wpw-green); margin:0 0 8px; }

/* Badges */
.wpw-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:500; background:var(--wpw-gray-light); color:var(--wpw-gray); }
.wpw-badge-ok      { background:var(--wpw-green-light); color:#085041; }
.wpw-badge-warn    { background:var(--wpw-amber-light); color:#633806; }
.wpw-badge-err     { background:var(--wpw-red-light);   color:#791F1F; }
.wpw-badge-pending { background:var(--wpw-blue-light);  color:#0C447C; }

/* Buttons */
.wpw-btn { display:inline-block; padding:9px 20px; background:var(--wpw-green); color:#fff; border-radius:var(--wpw-radius); text-decoration:none; font-size:14px; border:none; cursor:pointer; }
.wpw-btn:hover { background:#0F6E56; color:#fff; }
.wpw-btn-sm { padding:5px 12px; font-size:13px; }

/* Form */
.wpw-form { background:#f9f9f9; padding:24px; border-radius:var(--wpw-radius); border:1px solid var(--wpw-border); margin:16px 0; }
.wpw-form-row { margin-bottom:16px; }
.wpw-form-row label { display:block; font-size:13px; font-weight:500; margin-bottom:6px; color:#444; }
.wpw-input, .wpw-select { width:100%; padding:9px 12px; border:1px solid var(--wpw-border); border-radius:6px; font-size:14px; }
.wpw-select-product-wrap { margin-bottom:20px; }
.wpw-select-product-wrap label { display:block; margin-bottom:8px; font-weight:600; }

/* Repair status tracker */
.wpw-repair-status { max-width:680px; margin:0 auto; }
.wpw-result-card { background:#fff; border:1px solid var(--wpw-border); border-radius:var(--wpw-radius); overflow:hidden; margin-top:20px; }
.wpw-result-table { width:100%; border-collapse:collapse; }
.wpw-result-table th { background:#f7f7f7; text-align:left; padding:10px 14px; font-size:13px; color:#666; width:30%; border-bottom:1px solid var(--wpw-border); }
.wpw-result-table td { padding:10px 14px; font-size:14px; border-bottom:1px solid var(--wpw-border); }

/* Step tracker */
.wpw-steps { display:flex; align-items:center; padding:20px 16px; overflow-x:auto; }
.wpw-step { text-align:center; flex-shrink:0; }
.wpw-step-dot { width:14px; height:14px; border-radius:50%; background:#ddd; margin:0 auto 6px; }
.wpw-step-label { font-size:11px; color:#aaa; white-space:nowrap; }
.wpw-step-done .wpw-step-dot { background:var(--wpw-green); }
.wpw-step-done .wpw-step-label { color:var(--wpw-green); }
.wpw-step-active .wpw-step-dot { background:var(--wpw-amber); box-shadow:0 0 0 3px var(--wpw-amber-light); }
.wpw-step-active .wpw-step-label { color:var(--wpw-amber); font-weight:600; }
.wpw-step-line { flex:1; height:2px; background:#ddd; min-width:20px; }
.wpw-loading { color:#888; font-style:italic; }

/* WC account table */
.wpw-table { font-size:13px; }
.wpw-staff-note { background:#fffbea; color:#6b5800; font-size:12px; padding:8px 14px !important; }

/* ── v1.1 My Account ────────────────────────────────────────── */
.wpw-myaccount { max-width:800px; }
.wpw-section-title { font-size:16px; font-weight:600; color:#1a1a2e; margin:24px 0 14px; padding-bottom:8px; border-bottom:2px solid #1D9E75; }
.wpw-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:24px; }
.wpw-sum-card { background:#f9f9f9; border-radius:8px; padding:14px; text-align:center; border:1px solid #e5e5e5; }
.wpw-sum-card.wpw-sum-ok   { border-top:3px solid #1D9E75; }
.wpw-sum-card.wpw-sum-warn { border-top:3px solid #BA7517; }
.wpw-sum-value { font-size:26px; font-weight:700; color:#1a1a2e; }
.wpw-sum-label { font-size:12px; color:#888; margin-top:4px; }

/* Registration cards */
.wpw-reg-card { background:#fff; border:1px solid #e5e5e5; border-radius:10px; margin-bottom:16px; overflow:hidden; }
.wpw-reg-card.wpw-card-expired { opacity:.8; }
.wpw-reg-card-head { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid #f0f0f0; background:#fafafa; }
.wpw-reg-product { font-size:15px; font-weight:600; }
.wpw-reg-card-body { padding:16px 18px; }
.wpw-reg-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin-bottom:14px; font-size:13px; }
.wpw-reg-meta-grid span { color:#888; display:block; margin-bottom:2px; font-size:12px; }
.wpw-countdown-wrap { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.wpw-countdown-num { font-size:40px; font-weight:700; color:#1D9E75; line-height:1; }
.wpw-countdown-label { font-size:14px; color:#888; }
.wpw-war-bar { height:8px; background:#eee; border-radius:4px; overflow:hidden; margin-bottom:4px; }
.wpw-war-fill { height:100%; background:#1D9E75; border-radius:4px; }
.wpw-war-bar-label { font-size:11px; color:#aaa; margin-bottom:12px; }
.wpw-reg-card-foot { padding:12px 18px; border-top:1px solid #f0f0f0; background:#fafafa; }
.wpw-empty-state { text-align:center; padding:40px 20px; color:#888; }
.wpw-empty-state .wpw-btn { margin-top:12px; }

/* Repair options */
.wpw-repair-option { border:1px solid #e5e5e5; border-radius:10px; padding:20px; margin-bottom:16px; }
.wpw-option-warranty { border-left:4px solid #1D9E75; }
.wpw-option-nowarranty { border-left:4px solid #BA7517; }
.wpw-option-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:15px; }
.wpw-option-badge { font-size:11px; padding:3px 10px; border-radius:20px; font-weight:600; }
.wpw-option-badge.ok { background:#E1F5EE; color:#085041; }
.wpw-option-badge.warn { background:#FAEEDA; color:#633806; }
.wpw-option-desc { font-size:13px; color:#666; margin-bottom:14px; }
.wpw-option-empty { font-size:13px; color:#aaa; font-style:italic; margin:0; }
.wpw-product-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.wpw-pick-card { background:#f9f9f9; border:1px solid #e5e5e5; border-radius:8px; padding:14px; }
.wpw-pick-card.wpw-pick-expired { background:#fffbf5; }
.wpw-pick-name { font-size:14px; font-weight:600; margin-bottom:6px; }
.wpw-pick-meta { font-size:12px; color:#888; margin-bottom:10px; }
.wpw-days { color:#1D9E75; }

/* Repair rows */
.wpw-repair-list { border:1px solid #e5e5e5; border-radius:8px; overflow:hidden; }
.wpw-repair-row { display:grid; grid-template-columns:100px 1fr 1fr 90px 110px; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid #f0f0f0; font-size:13px; }
.wpw-repair-row:last-child { border-bottom:none; }
.wpw-repair-row:hover { background:#fafafa; }
.wpw-repair-ticket { font-family:monospace; font-size:12px; }
.wpw-repair-note { grid-column:1/-1; background:#fffbea; border-radius:4px; padding:6px 10px; font-size:12px; color:#6b5800; }
.wpw-btn-outline { background:transparent; border:1px solid var(--wpw-green); color:var(--wpw-green); }
.wpw-btn-outline:hover { background:var(--wpw-green-light); }
@media(max-width:600px){
    .wpw-summary-grid { grid-template-columns:1fr 1fr; }
    .wpw-repair-row { grid-template-columns:1fr 1fr; }
    .wpw-product-picker { grid-template-columns:1fr; }
}

/* ── Product autocomplete dropdown ─────────────────────────── */
.custom-dropdown, #product-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 9999;
    background: #fff; border: 1px solid #ddd; border-top: none;
    border-radius: 0 0 8px 8px; max-height: 420px; overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.custom-dropdown .wpw-dd-item:nth-child(n+11),
#product-dropdown .wpw-dd-item:nth-child(n+11) { display: none; }
.wpw-dd-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f5f5f5;
    transition: background .15s;
}
.wpw-dd-item:hover, .wpw-dd-item.active { background: #f0faf5; }
.wpw-dd-item:last-child { border-bottom: none; }
.wpw-dd-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.wpw-dd-name  { font-size: 14px; color: #222; flex: 1; }
.wpw-dd-sku   { font-size: 11px; color: #aaa; font-family: monospace; }
.wpw-dd-empty { padding: 12px 14px; font-size: 13px; color: #aaa; text-align: center; }

/* ── Product preview box ────────────────────────────────────── */
#product-preview-box {
    animation: wpw-fadein .2s ease;
}
@keyframes wpw-fadein { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

/* ── v1.5: dropdown no-photo placeholder ───────────────────── */
.wpw-dd-nophoto {
    width:40px; height:40px; border-radius:4px; flex-shrink:0;
    background:var(--wpw-gray-light,#F1EFE8);
    border:0.5px solid var(--wpw-border,#e0e0e0);
}

/* ── v1.5: preview box no-photo placeholder ─────────────────── */
.wpw-preview-nophoto {
    width:200px; height:200px; border-radius:8px;
    background:var(--wpw-gray-light,#F1EFE8);
    border:1px dashed #ccc; margin:0 auto 12px;
}

/* ── v1.5: preview image 500px ──────────────────────────────── */
#product-preview-img {
    max-width:500px; width:100%; height:auto;
    border-radius:8px; display:block; margin:0 auto;
}

/* ── v1.5: product picker card — ปุ่มขนานกัน ───────────────── */
.wpw-pick-card {
    display:flex; flex-direction:column;
}
.wpw-pick-card .wpw-btn,
.wpw-pick-card .wpw-btn-outline {
    margin-top:auto;
}
.wpw-product-picker {
    align-items:stretch;
}

/* ── v1.5: registration card product image ──────────────────── */
.wpw-reg-product-img {
    width:80px; height:80px; object-fit:cover;
    border-radius:var(--wpw-radius,8px);
    border:1px solid var(--wpw-border,#e0e0e0);
    flex-shrink:0;
}
.wpw-reg-card-head {
    display:flex; justify-content:space-between;
    align-items:center; gap:12px;
    padding:14px 16px; border-bottom:1px solid var(--wpw-border,#e0e0e0);
    background:#fafafa;
}
.wpw-reg-product-info { flex:1; }

/* v1.5 — dropdown no-photo placeholder */
.wpw-dd-nophoto { width:40px;height:40px;border-radius:4px;flex-shrink:0;background:#F1EFE8;border:0.5px solid #e0e0e0; }

/* v1.5 — preview no-photo placeholder */
.wpw-preview-nophoto { width:200px;height:200px;border-radius:8px;background:#F1EFE8;border:1px dashed #ccc;margin:0 auto 12px; }

/* v1.5 — preview image 500px */
#product-preview-img { max-width:500px;width:100%;height:auto;border-radius:8px;display:block;margin:0 auto; }

/* v1.5 — pick card buttons aligned */
.wpw-pick-card { display:flex;flex-direction:column; }
.wpw-pick-card .wpw-btn, .wpw-pick-card .wpw-btn-outline { margin-top:auto; }
.wpw-product-picker { align-items:stretch; }

/* v1.5 — reg card product image */
.wpw-reg-product-img { width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid #e0e0e0;flex-shrink:0; }
.wpw-reg-card-head { display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #e5e5e5;background:#fafafa; }
.wpw-reg-product-info { flex:1; }

/* v1.6.5 — repair card product image */
.wpw-pick-thumb { width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;border:1px solid #e0e0e0;margin-bottom:8px;display:block; }
.wpw-pick-thumb-ph { width:100%;aspect-ratio:1;background:#F1EFE8;border-radius:6px;border:1px dashed #ccc;margin-bottom:8px; }
.wpw-pick-thumb-expired { opacity:.7;filter:grayscale(30%); }
.wpw-pick-thumb-ph-expired { background:#FAECE7; }

/* v1.6.5 — My Account pagination */
.wpw-myacc-pagination { display:flex;gap:6px;margin-top:20px;justify-content:center;flex-wrap:wrap; }
.wpw-page-btn { display:inline-block;padding:6px 14px;border:1px solid var(--wpw-border,#e0e0e0);border-radius:6px;font-size:13px;color:var(--wpw-green,#1D9E75);text-decoration:none;background:#fff; }
.wpw-page-btn:hover { background:var(--wpw-green-light,#E1F5EE); }
.wpw-page-active { background:var(--wpw-green,#1D9E75);color:#fff;border-color:var(--wpw-green,#1D9E75); }