/* ============================================================
   Hanout Checkout Form — Modern UI
   خط: Noto Kufi Arabic (من Google Fonts)
   مستوحى من تصميم COD Order Form v7
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300;400;500;600;700&display=swap');

/* ─── متغيرات CSS (تُطغى من المخصِّص) ────────────────────── */
:root {
    --hcf-primary:       #2563EB;
    --hcf-primary-dark:  #1D4ED8;
    --hcf-primary-light: #DBEAFE;
    --hcf-accent:        #10B981;
    --hcf-accent-dark:   #059669;
    --hcf-border:        #E2E8F0;
    --hcf-border-focus:  #93C5FD;
    --hcf-bg:            #FFFFFF;
    --hcf-bg-subtle:     #F8FAFC;
    --hcf-text:          #1E293B;
    --hcf-text-muted:    #64748B;
    --hcf-radius:        12px;
    --hcf-radius-sm:     8px;
    --hcf-shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --hcf-shadow-focus:  0 0 0 3px rgba(37,99,235,.18);
    --hcf-font:          'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;
    --hcf-transition:    .18s ease;
    --hcf-office-c:      #2563EB;
    --hcf-home-c:        #10B981;
}

/* ─── الغلاف الرئيسي ─────────────────────────────────────── */
#hcf-checkout-wrap {
    position: relative;
    padding: 28px 24px;
    border: 1.5px solid var(--hcf-border);
    border-radius: var(--hcf-radius);
    margin-top: 40px;
    background: var(--hcf-bg);
    box-shadow: var(--hcf-shadow);
    font-family: var(--hcf-font);
    color: var(--hcf-text);
    direction: rtl;
    overflow: hidden;
}

#hcf-checkout-wrap::before {
    content: '';
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hcf-primary), var(--hcf-accent));
}

/* ─── عنوان إضافي ────────────────────────────────────────── */
.hcf-info-title {
    text-align: center;
    margin-bottom: 20px;
}
.hcf-info-title h3 {
    display: inline-block;
    padding: 6px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--hcf-text);
    border-bottom: 2px solid var(--hcf-primary-light);
    font-family: var(--hcf-font);
    margin: 0;
}

/* ─── شبكة الحقول ────────────────────────────────────────── */
#codplugin_woo_single_form,
.hcf-fields-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, 1fr);
    font-family: var(--hcf-font);
}

.hcf-full-col { grid-column: 1 / -1; }

@media (max-width: 520px) {
    #codplugin_woo_single_form,
    .hcf-fields-grid { grid-template-columns: 1fr; }
    .hcf-full-col { grid-column: 1; }
}

.codplugin-field { margin: 0; }

/* ─── حقول الإدخال ───────────────────────────────────────── */
#hcf-checkout-wrap input[type="text"],
#hcf-checkout-wrap input[type="tel"],
#hcf-checkout-wrap input[type="email"],
#hcf-checkout-wrap select,
#hcf-checkout-wrap textarea {
    font-family: var(--hcf-font);
    font-size: 14px;
    color: var(--hcf-text);
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid var(--hcf-border);
    border-radius: var(--hcf-radius-sm);
    background: var(--hcf-bg);
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--hcf-transition), box-shadow var(--hcf-transition);
    outline: none;
    direction: rtl;
    text-align: right;
}

#hcf-checkout-wrap input::placeholder { color: var(--hcf-text-muted); font-family: var(--hcf-font); }

#hcf-checkout-wrap input:focus,
#hcf-checkout-wrap select:focus {
    border-color: var(--hcf-primary) !important;
    box-shadow: var(--hcf-shadow-focus) !important;
    outline: none;
}

#hcf-checkout-wrap input:valid,
#hcf-checkout-wrap select:valid {
    border-color: var(--hcf-accent) !important;
}

#hcf-checkout-wrap input:required:focus:invalid,
#hcf-checkout-wrap select:required:focus:invalid {
    border-color: #EF4444 !important;
}

/* ─── Select ────────────────────────────────────────────── */
#hcf-checkout-wrap select {
    cursor: pointer;
    color: var(--hcf-text-muted);
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    padding-left: 38px;
    padding-right: 14px;
}

/* ─── بلوك السمات / المتغيرات ────────────────────────────── */
.hcf-var-block {
    margin-top: 16px;
    padding: 16px;
    background: var(--hcf-bg-subtle);
    border: 1.5px solid var(--hcf-border);
    border-radius: var(--hcf-radius-sm);
}

.hcf-var-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hcf-text);
    margin-bottom: 12px;
    font-family: var(--hcf-font);
}

.hcf-attr-section { margin-bottom: 8px; }

.hcf-attr-label {
    font-size: 13px;
    color: var(--hcf-text-muted);
    font-weight: 500;
    margin-bottom: 8px;
    font-family: var(--hcf-font);
}

.hcf-attr-chosen { color: var(--hcf-primary); font-weight: 700; }

/* ─── Swatches ───────────────────────────────────────────── */
.hcf-swatches-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.hcf-swatch {
    position: relative;
    cursor: pointer;
    border: 2px solid var(--hcf-border);
    border-radius: 7px;
    transition: border-color var(--hcf-transition), box-shadow var(--hcf-transition), transform var(--hcf-transition);
    user-select: none;
}

.hcf-swatch-text {
    padding: 7px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hcf-text);
    background: #fff;
    font-family: var(--hcf-font);
    min-width: 48px;
    text-align: center;
}

.hcf-swatch-color {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}

.hcf-swatch-img {
    width: 46px;
    height: 46px;
    border-radius: 7px;
    overflow: hidden;
    padding: 2px;
    background: #fff;
}

.hcf-swatch-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    display: block;
}

.hcf-swatch:hover,
.hcf-swatch-selected {
    border-color: var(--hcf-primary);
    box-shadow: var(--hcf-shadow-focus);
}

.hcf-swatch-selected.hcf-swatch-text {
    background: var(--hcf-primary-light);
    color: var(--hcf-primary);
}

.hcf-swatch-selected.hcf-swatch-color::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
}

.hcf-swatch-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    font-family: var(--hcf-font);
    pointer-events: none;
    z-index: 10;
}

.hcf-swatch-color:hover .hcf-swatch-tip,
.hcf-swatch-img:hover .hcf-swatch-tip { display: block; }

.hcf-selected-var-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--hcf-primary);
    min-height: 20px;
    font-family: var(--hcf-font);
    margin-top: 6px;
}

/* ─── جدول راديو للمتغيرات (متعددة السمات) ──────────────── */
.variation-prices { font-size: 15px; font-family: var(--hcf-font); }
.variation-prices bdi { font-weight: 700; color: var(--hcf-primary); }
.variation-prices .crossed-price bdi { font-weight: 400; color: #94A3B8; }

.radio-variation-prices { margin-top: 12px; }

.radio-variation-prices tbody {
    display: grid;
    background: var(--hcf-bg-subtle);
    padding: 10px;
    border-radius: var(--hcf-radius-sm);
}

.radio-variation-prices tr {
    position: relative;
    border: 1.5px solid var(--hcf-border);
    margin: 3px 0;
    border-radius: var(--hcf-radius-sm);
    padding: 6px 14px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: border-color var(--hcf-transition), box-shadow var(--hcf-transition);
}

.radio-variation-prices tr:hover { border-color: var(--hcf-primary); box-shadow: var(--hcf-shadow-focus); }

#hcf-checkout-wrap .radio-variation-prices td { border: none; }
.radio-variation-prices tr td:last-child { margin-right: auto; }

.radio-variation-prices input[type="radio"] { position: relative; accent-color: var(--hcf-primary); }

.radio-variation-prices input[type="radio"]:before {
    content: '';
    width: 20px; height: 20px;
    border-radius: 50%;
    display: inline-block;
    background: #fff;
    border: 2px solid var(--hcf-border);
    transition: all .12s ease;
    margin-top: -2px; margin-left: -2px;
}

.radio-variation-prices input[type="radio"]:checked::before {
    border-color: var(--hcf-primary);
    background: var(--hcf-primary);
}

.radio-variation-prices input[type="radio"]:checked::after {
    content: '';
    display: block;
    position: absolute;
    top: 3px; left: 5px;
    width: 6px; height: 12px;
    border: 2px solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.radio-variation-prices tr.checked-var { border-color: var(--hcf-primary) !important; box-shadow: var(--hcf-shadow-focus); }

.checked::after {
    content: "الأكثر طلباً";
    position: absolute;
    top: -8px; right: 10px;
    display: inline-block;
    padding: 0 10px;
    line-height: 18px;
    background: var(--hcf-primary);
    color: #fff;
    border-radius: 99px;
    font-size: .72em;
    font-family: var(--hcf-font);
    vertical-align: middle;
}

html[lang="fr-FR"] .checked::after { content: "Populaire"; }
html[lang="en-US"] .checked::after,
html[lang="en"] .checked::after { content: "Most Popular"; }

.variation-prices:not(.radio-variation-prices) .checked::after { top: 12px; }

/* ─── الـ Native Swatches wrapper ────────────────────────── */
.hcf-native-swatches { margin-top: 16px; }
.hcf-native-swatches .single_add_to_cart_button { display: none !important; }
.hcf-native-swatches .woocommerce-variation-add-to-cart { display: none !important; }
.hcf-native-swatches .variations_form { background: transparent; }

/* ─── بلوك طريقة التوصيل ─────────────────────────────────── */
.hcf-delivery-wrap {
    margin-top: 20px;
    padding: 16px;
    background: var(--hcf-bg-subtle);
    border: 1.5px solid var(--hcf-border);
    border-radius: var(--hcf-radius-sm);
}

.hcf-delivery-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hcf-text);
    margin-bottom: 12px;
    font-family: var(--hcf-font);
}

.hcf-delivery-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 400px) { .hcf-delivery-cards { grid-template-columns: 1fr; } }

.hcf-d-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 2px solid var(--hcf-border);
    border-radius: var(--hcf-radius-sm);
    cursor: pointer;
    transition: border-color var(--hcf-transition), box-shadow var(--hcf-transition), background var(--hcf-transition);
    user-select: none;
    font-family: var(--hcf-font);
}

.hcf-d-card input[type=radio] { display: none; }

.hcf-d-card:hover { border-color: var(--hcf-primary); }

.hcf-d-card-selected { border-color: var(--hcf-primary) !important; background: var(--hcf-primary-light) !important; }
.hcf-d-card[data-method="home"].hcf-d-card-selected { border-color: var(--hcf-accent) !important; background: #ecfdf5 !important; }

.hcf-d-card-icon { font-size: 22px; line-height: 1; }

.hcf-d-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hcf-d-card-body strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--hcf-text);
    font-family: var(--hcf-font);
}

.hcf-d-card-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--hcf-primary);
    font-family: var(--hcf-font);
}

.hcf-home-price { color: var(--hcf-accent); }

/* ─── ملخص الطلب ─────────────────────────────────────────── */
div#codplugin_order_history {
    height: 48px;
    cursor: pointer;
    border-bottom: 1.5px solid var(--hcf-border);
    background: var(--hcf-bg-subtle);
    padding: 0 14px;
    margin-bottom: 0;
    margin-top: 18px;
    border-top-left-radius: var(--hcf-radius-sm);
    border-top-right-radius: var(--hcf-radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

span#codplugin_h_o {
    font-family: var(--hcf-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--hcf-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

span#codplugin_h_o svg { color: var(--hcf-primary); }
div#codplugin_h_left { display: flex; align-items: center; }
div#codplugin_h_left svg { color: var(--hcf-text-muted); transition: transform .2s ease; }
#hcf-checkout-wrap.hcf-summary-collapsed div#codplugin_h_left svg { transform: rotate(-90deg); }

#codplugin_show_hide {
    background: var(--hcf-bg-subtle);
    padding: 10px 14px;
    border-bottom-left-radius: var(--hcf-radius-sm);
    border-bottom-right-radius: var(--hcf-radius-sm);
    border: 1.5px solid var(--hcf-border);
    border-top: none;
    font-family: var(--hcf-font);
}

#codplugin_show_hide table { margin-bottom: 0; }
#hcf-checkout-wrap table { border: none; font-family: var(--hcf-font); border-collapse: collapse; }
#hcf-checkout-wrap td {
    border: none;
    border-bottom: 1.5px dashed var(--hcf-border);
    padding: 10px 6px;
    font-size: 13px;
    color: var(--hcf-text);
}

#hcf-checkout-wrap .full-price td { font-weight: 700; border-bottom: 0; font-size: 14px; }
#hcf-checkout-wrap .full-price td:last-child { color: var(--hcf-primary); }

.summary-product-title { font-weight: 600 !important; font-family: var(--hcf-font); }
.summary-select-state { font-size: 13px; opacity: .7; font-family: var(--hcf-font); }
.codplugin_currency { display: none; }

/* بادج الكمية */
#hcf-sum-qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    height: 18px;
    min-width: 18px;
    padding: 0 5px;
    background: var(--hcf-primary);
    border-radius: 99px;
    color: #fff;
    font-weight: 700;
    font-family: var(--hcf-font);
}
#hcf-sum-qty::before { content: 'x '; }

#hcf-d-free span {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    height: 22px;
    padding: 0 10px;
    background: var(--hcf-accent);
    border-radius: 99px;
    color: #fff;
    font-family: var(--hcf-font);
}

.best-offer {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    padding: 2px 8px;
    background: var(--hcf-primary);
    color: #fff;
    border-radius: 99px;
    font-family: var(--hcf-font);
    font-weight: 600;
}

/* ─── Footer: كمية + زر التأكيد ─────────────────────────── */
#hcf-checkout-wrap .form-footer {
    display: grid;
    grid-gap: 12px;
    grid-template-columns: 120px 1fr;
    margin-top: 16px;
    align-items: center;
}

.form-qte {
    display: grid;
    grid-template-columns: 36px 44px 36px;
    border: 1.5px solid var(--hcf-border);
    border-radius: var(--hcf-radius-sm);
    overflow: hidden;
    height: 48px;
}

#codplugin_add_button,
#codplugin_count_button,
#codplugin_remove_button {
    font-family: var(--hcf-font);
    font-size: 18px;
    text-align: center;
    line-height: 44px;
    cursor: pointer;
    color: var(--hcf-text);
    transition: background var(--hcf-transition), color var(--hcf-transition);
    user-select: none;
}

#codplugin_add_button {
    border-right: 1.5px solid var(--hcf-border);
    font-weight: 700;
}
#codplugin_add_button:hover { background: var(--hcf-primary-light); color: var(--hcf-primary); }

#codplugin_remove_button {
    border-left: 1.5px solid var(--hcf-border);
    font-weight: 700;
}
#codplugin_remove_button:hover { background: #FEE2E2; color: #EF4444; }

#codplugin_count_button {
    font-size: 15px;
    font-weight: 600;
    background: var(--hcf-bg-subtle);
    cursor: default;
}

/* ─── زر التأكيد ─────────────────────────────────────────── */
#hcf-nrwooconfirm,
#nrwooconfirm {
    font-family: var(--hcf-font);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;
    background: linear-gradient(135deg, var(--hcf-primary) 0%, var(--hcf-primary-dark) 100%);
    color: #fff !important;
    border: none;
    height: 48px;
    padding: 0 20px;
    border-radius: var(--hcf-radius-sm);
    cursor: pointer;
    width: 100%;
    transition: opacity var(--hcf-transition), transform var(--hcf-transition), box-shadow var(--hcf-transition);
    box-shadow: 0 4px 14px rgba(37,99,235,.35);
    display: block;
}

#hcf-nrwooconfirm:hover:not([disabled]),
#nrwooconfirm:hover:not(:disabled) {
    opacity: .92;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37,99,235,.4);
}

#hcf-nrwooconfirm[disabled],
#nrwooconfirm:disabled { opacity: .5; cursor: not-allowed; }

/* ATC + Confirm side by side */
#nrwooconfirm.atc-buy-button {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    background: none !important;
    box-shadow: none;
    padding: 0;
    height: auto;
}

#nrwooconfirm.atc-buy-button .button,
#nrwooconfirm.atc-buy-button input {
    font-family: var(--hcf-font);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: var(--hcf-radius-sm);
    padding: 0 12px;
    border: none;
    cursor: pointer;
    transition: opacity var(--hcf-transition), transform var(--hcf-transition);
    white-space: normal;
    text-align: center;
}

#nrwooconfirm.atc-buy-button .button {
    background: linear-gradient(135deg, var(--hcf-accent) 0%, var(--hcf-accent-dark) 100%);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(16,185,129,.35);
}

#nrwooconfirm.atc-buy-button input {
    background: linear-gradient(135deg, var(--hcf-primary) 0%, var(--hcf-primary-dark) 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(37,99,235,.35);
}

/* ─── Sold Individually ──────────────────────────────────── */
.sold-individual .form-qte { display: none; }
#hcf-checkout-wrap .sold-individual.form-footer { grid-template-columns: 1fr; }

/* ─── واتساب ─────────────────────────────────────────────── */
.whatsapp-order-section { margin: 14px auto 0; text-align: center; }

.whatsapp-order-section #hcf-whatsapp-btn {
    font-family: var(--hcf-font);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #25D466, #1DA851);
    border-radius: 50px;
    padding: 10px 22px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(37,212,102,.35);
    transition: opacity var(--hcf-transition), transform var(--hcf-transition);
}
.whatsapp-order-section #hcf-whatsapp-btn:hover { opacity: .9; transform: translateY(-1px); }

/* ─── Spinner ────────────────────────────────────────────── */
#codplugin_gif { text-align: center; padding: 20px 0; }

.hcf-spinner {
    display: inline-block;
    width: 44px;
    height: 44px;
    border: 4px solid var(--hcf-border);
    border-top-color: var(--hcf-primary);
    border-radius: 50%;
    animation: hcf-spin .7s linear infinite;
}

@keyframes hcf-spin { to { transform: rotate(360deg); } }

/* ─── صفحة الشكر السريعة ─────────────────────────────────── */
#hcf-fast-thanks {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.97);
    border-radius: var(--hcf-radius);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
}

#codplugin-thanks-box {
    background: #fff;
    padding: 28px;
    border-radius: var(--hcf-radius);
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    text-align: center;
    max-width: 480px;
    width: 90%;
}

.order-summary-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 48px;
    padding: 0 14px;
    font-weight: 700;
    font-size: 16px;
    background: linear-gradient(135deg, var(--hcf-primary) 0%, var(--hcf-primary-dark) 100%);
    color: #fff;
    font-family: var(--hcf-font);
    border-radius: var(--hcf-radius-sm) var(--hcf-radius-sm) 0 0;
    margin: -28px -28px 20px;
}

.thanks-box-title {
    font-size: 20px;
    font-weight: 700;
    margin: 16px 0 10px;
    font-family: var(--hcf-font);
    color: var(--hcf-text);
}

.thanks-box-content {
    font-size: 14px;
    color: var(--hcf-text-muted);
    font-family: var(--hcf-font);
}

/* ─── Animation ──────────────────────────────────────────── */
@keyframes hcf-shake {
    0%,100%{transform:translate3d(0,0,0)}
    4%,46%{transform:translate3d(-2px,0,0)}
    8%,42%{transform:translate3d(2px,0,0)}
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
    #hcf-checkout-wrap { padding: 20px 15px; }
    #hcf-checkout-wrap .form-footer { grid-template-columns: 100px 1fr; }
    .hcf-var-block { padding: 12px; }
}

/* ─── Invalid field highlight ───────────────────────────── */
#hcf-checkout-wrap input.hcf-invalid,
#hcf-checkout-wrap select.hcf-invalid {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important;
    animation: hcf-shake-field .3s ease;
}
@keyframes hcf-shake-field {
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-4px)}
    75%{transform:translateX(4px)}
}

/* ─── City select wrapper ───────────────────────────────── */
#hcf-city-wrap {
    display: none;
}

/* ── v4 overrides ─────────────────────────────────────── */
#hcf-order-summary-header {
    height: 48px;
    cursor: pointer;
    border-bottom: 1.5px solid var(--hcf-border);
    background: var(--hcf-bg-subtle);
    padding: 0 14px;
    margin-top: 18px;
    border-top-left-radius: var(--hcf-radius-sm);
    border-top-right-radius: var(--hcf-radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#hcf-order-summary-header span#codplugin_h_o {
    font-family: var(--hcf-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--hcf-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
#hcf-order-summary-header #codplugin_h_o svg { color: var(--hcf-primary); }
#hcf-order-summary-header #codplugin_h_left { display: flex; align-items: center; }
#hcf-chev { transition: transform .2s ease; color: var(--hcf-text-muted); }

#hcf-show-hide {
    background: var(--hcf-bg-subtle);
    padding: 10px 14px;
    border-bottom-left-radius: var(--hcf-radius-sm);
    border-bottom-right-radius: var(--hcf-radius-sm);
    border: 1.5px solid var(--hcf-border);
    border-top: none;
    font-family: var(--hcf-font);
}
#hcf-show-hide table { margin-bottom: 0; border-collapse: collapse; }
#hcf-checkout-wrap #hcf-show-hide td {
    border: none;
    border-bottom: 1.5px dashed var(--hcf-border);
    padding: 10px 6px;
    font-size: 13px;
}

.hcf-d-card-active {
    border-color: var(--hcf-primary) !important;
    background: var(--hcf-primary-light) !important;
}
.hcf-d-card[data-method="home"].hcf-d-card-active {
    border-color: var(--hcf-accent) !important;
    background: #ecfdf5 !important;
}
input.hcf-invalid, select.hcf-invalid {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important;
}
#hcf-city-wrap { display: none; }
.hcf-sel-price { font-size: 14px; font-weight: 700; color: var(--hcf-primary); margin-top: 6px; min-height: 18px; font-family: var(--hcf-font); }

/* ── Native Swatches form visibility fix ───────────────── */
.hcf-native-swatches { margin-top: 14px; }
.hcf-native-swatches form.cart { display: block !important; }
.hcf-native-swatches .single_add_to_cart_button,
.hcf-native-swatches .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.hcf-native-swatches .button.single_add_to_cart_button,
.hcf-native-swatches input[type=submit].single_add_to_cart_button {
    display: none !important;
}
/* إظهار السمات بشكل جيد */
.hcf-native-swatches .variations { width: 100%; margin-bottom: 10px; }
.hcf-native-swatches .variations td, .hcf-native-swatches .variations th { padding: 6px 0; }
.hcf-native-swatches .woocommerce-variation-description { font-size: 13px; color: #64748b; }
.hcf-native-swatches .woocommerce-variation.single_variation { min-height: auto !important; }