/* COD Algeria Pro — Frontend */

.cod-order-form-wrap {
    margin-top: 24px;
    font-family: 'Cairo','Tajawal',sans-serif;
}

/* ── Variants ──────────────────────────────── */
.cod-variants-section { margin-bottom: 20px; }
.cod-variant-group    { margin-bottom: 16px; }
.cod-variant-label    { font-size:.88rem;font-weight:700;color:#374151;margin-bottom:8px; }
.cod-variant-selected { color:#1A6FFF;font-weight:700;margin-right:6px; }
.cod-variant-options  { display:flex;flex-wrap:wrap;gap:8px; }

.cod-variant-btn {
    padding:8px 16px;border:2px solid #DDE1E7;border-radius:8px;
    background:#fff;font-size:.88rem;font-weight:600;cursor:pointer;
    transition:all .15s;color:#374151;
}
.cod-variant-btn:hover  { border-color:#1A6FFF;color:#1A6FFF; }
.cod-variant-btn.active { border-color:#1A6FFF;background:#EBF2FF;color:#1A6FFF; }

.cod-variant-btn--color {
    width:36px;height:36px;padding:0;border-radius:50%;border:3px solid transparent;
}
.cod-variant-btn--color:hover { transform:scale(1.15); }
.cod-variant-btn--color.active { border-color:#1A6FFF;box-shadow:0 0 0 3px #EBF2FF; }

/* ── Upsell Banner ─────────────────────────── */
.cod-upsell-banner {
    background:linear-gradient(135deg,#FFF7ED,#FFEDD5);
    border:2px solid #F97316;border-radius:10px;
    padding:12px 16px;text-align:center;
    animation:cod-pulse 2s ease-in-out infinite;
}
#cod-upsell-text { font-weight:700;font-size:.95rem;color:#C2410C; }
@keyframes cod-pulse {
    0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,.3)}
    50%{box-shadow:0 0 0 8px rgba(249,115,22,0)}
}

/* ── Price Box ─────────────────────────────── */
.cod-price-box {
    background:#F8F9FA;border:1px solid #E4E6EA;border-radius:12px;
    padding:16px 20px;margin-bottom:20px;
}
.cod-price-main { display:flex;align-items:center;justify-content:space-between; }
.cod-price-label { font-size:.9rem;color:#6B7280;font-weight:600; }
.cod-price-value { font-size:1.8rem;font-weight:900;color:#FF4D2D;font-family:'Cairo',sans-serif; }
.cod-price-breakdown { margin-top:12px;border-top:1px solid #E4E6EA;padding-top:12px; }
.cod-breakdown-row { display:flex;justify-content:space-between;padding:4px 0;font-size:.88rem; }
.cod-breakdown-row span:first-child { color:#6B7280; }
.cod-breakdown-row span:last-child  { font-weight:700; }
.cod-breakdown-total { font-size:1rem!important;border-top:1px solid #E4E6EA;margin-top:6px;padding-top:8px!important; }
.cod-breakdown-total span { color:#FF4D2D!important;font-weight:900!important; }

/* ── Form ──────────────────────────────────── */
.cod-form-title { font-size:1rem;font-weight:700;margin-bottom:16px;color:#1A1F2E; }
.cod-field { margin-bottom:14px; }
.cod-field label { display:block;font-size:.88rem;font-weight:700;color:#374151;margin-bottom:5px; }
.cod-req { color:#EF4444; }
.cod-field input,
.cod-field select,
.cod-field textarea {
    width:100%;padding:11px 14px;
    border:2px solid #DDE1E7;border-radius:10px;
    font-size:.95rem;font-family:inherit;background:#fff;
    color:#1A1F2E;outline:none;transition:border-color .2s;
    direction:rtl;box-sizing:border-box;
}
.cod-field input:focus,
.cod-field select:focus,
.cod-field textarea:focus { border-color:#1A6FFF;box-shadow:0 0 0 3px #EBF2FF; }
.cod-input-err           { border-color:#EF4444!important; }
.cod-field-err           { display:block;color:#EF4444;font-size:.8rem;margin-top:4px;display:none; }

/* ── Qty ───────────────────────────────────── */
.cod-qty-field { display:flex;align-items:center;gap:16px; }
.cod-qty-field label { white-space:nowrap;margin-bottom:0; }
.cod-qty-ctrl { display:flex;align-items:center;border:2px solid #DDE1E7;border-radius:10px;overflow:hidden; }
.cod-qty-btn {
    width:44px;height:44px;background:#F0F2F5;border:none;
    font-size:1.3rem;cursor:pointer;transition:background .15s;
    display:flex;align-items:center;justify-content:center;
}
.cod-qty-btn:hover { background:#DDE1E7; }
#cod-qty {
    width:52px;height:44px;border:none;border-radius:0;
    border-right:1px solid #DDE1E7;border-left:1px solid #DDE1E7;
    text-align:center;font-weight:700;font-size:1rem;
    padding:0;background:#fff;
    -moz-appearance:textfield;
}
#cod-qty::-webkit-inner-spin-button,
#cod-qty::-webkit-outer-spin-button { -webkit-appearance:none; }

/* ── Submit Button ─────────────────────────── */
.cod-submit-btn {
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;padding:18px 24px;
    background:#FF4D2D;color:#fff;border:none;
    border-radius:14px;font-size:1.15rem;font-weight:800;
    cursor:pointer;transition:all .25s;box-shadow:0 6px 20px rgba(255,77,45,.4);
    font-family:'Cairo','Tajawal',sans-serif;margin-top:4px;
    animation:submit-pulse 3s ease-in-out infinite;
}
.cod-submit-btn:hover { background:#E03D20;transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,77,45,.5);animation:none; }
.cod-submit-btn:disabled { opacity:.7;cursor:not-allowed;animation:none; }
@keyframes submit-pulse {
    0%,100%{box-shadow:0 6px 20px rgba(255,77,45,.4)}
    50%{box-shadow:0 6px 28px rgba(255,77,45,.65)}
}

/* ── Trust Bar ─────────────────────────────── */
.cod-trust-bar {
    display:flex;justify-content:center;gap:16px;flex-wrap:wrap;
    margin-top:12px;padding-top:12px;border-top:1px solid #F0F2F5;
}
.cod-trust-bar span { font-size:.8rem;font-weight:600;color:#6B7280; }

/* ── Thank You ─────────────────────────────── */
.cod-thankyou {
    background:linear-gradient(135deg,#F0FDF4,#DCFCE7);
    border:2px solid #22C55E;border-radius:16px;
    padding:32px 24px;text-align:center;
}
.cod-ty-icon { font-size:3.5rem;margin-bottom:12px; }
.cod-ty-msg  { font-size:1.05rem;font-weight:600;color:#166534;line-height:1.7;white-space:pre-wrap; }
.cod-wa-btn  {
    display:inline-flex;align-items:center;gap:8px;
    margin-top:20px;padding:14px 28px;
    background:#25D366;color:#fff;border-radius:12px;
    font-weight:700;font-size:1rem;text-decoration:none;
    transition:background .2s;
}
.cod-wa-btn:hover { background:#1EBE56; }

/* ── Loop Button ───────────────────────────── */
.cod-loop-btn {
    display:block;width:100%;padding:10px;
    background:#FF4D2D;color:#fff!important;border-radius:8px;
    font-weight:700;text-align:center;text-decoration:none!important;
    margin-top:8px;transition:background .2s;font-size:.9rem;
}
.cod-loop-btn:hover { background:#E03D20; }

@media(max-width:480px){
    .cod-submit-btn{font-size:1rem;padding:16px;}
    .cod-trust-bar{gap:10px;}
    .cod-trust-bar span{font-size:.75rem;}
}