/* CODCP V7.2 PRO - styles */

/* root variable: primary color will be set by inline JS via CSS variable on body */
:root {
    --codcp-primary: #007bff; /* fallback */
    --codcp-primary-contrast: #fff;
}

/* [تعديل هام] عزل تنسيقات الإضافة لفرض نفسها على القالب */
#codcp-checkout-form-container,
#codcp-checkout-form-container * {
    box-sizing: border-box !important;
}

/* Container */
.codcp-form-container {
    max-width: 680px;
    width: 100%; /* [تعديل] لضمان العرض الكامل داخل الحاوية */
    clear: both; /* [تعديل] لمنع تداخل القوالب */
    margin: 18px auto;
    padding: 18px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #ebeff3;
    /* ✅ [تعديل الأداء] تم تحويل الظل لثابت لحل مشكلة الثقل والتكسرات في السكرول */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); 
    /* animation: codcp-glowPulse 4s ease-in-out infinite; <-- تم تعطيله لأنه يسبب الثقل */
    direction: rtl;
}

@keyframes codcp-glowPulse {
    0% {
        box-shadow: 0 0 28px rgba(0, 123, 255, 0.25);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 48px rgba(0, 123, 255, 0.45);
        transform: scale(1.012);
    }
    100% {
        box-shadow: 0 0 28px rgba(0, 123, 255, 0.25);
        transform: scale(1);
    }
}

/* Title */
.codcp-form-title {
    font-size: 1.25rem;
    font-weight: 800;
    text-align: center;
    margin: 0 0 14px 0;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--codcp-primary);
    color: #1a1a1a;
}

/* =================================================== */
/* START: MODIFIED CREATIVE FORM HEADER                */
/* =================================================== */
.creative-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px 30px 25px !important; /* <-- التعديل هنا: تقليل الارتفاع بالقوة */
    border-radius: 12px 12px 0 0;
    position: relative;
    overflow: visible !important; /* CRUCIAL FIX: Allows the circle to show */
    color: var(--codcp-primary-contrast, #ffffff);
    background: linear-gradient(135deg, color-mix(in srgb, var(--codcp-primary) 85%, #000000 10%), var(--codcp-primary));
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin: -18px -18px 25px -18px;
}

.creative-form-header .header-content {
    flex-grow: 1;
    z-index: 1;
}

.creative-form-header .header-content h3 {
    margin: 0 0 5px 0;
    font-size: 1.2em;
    font-weight: bold;
    color: inherit;
}

.creative-form-header .header-content p {
    margin: 0;
    font-size: 0.9em;
    opacity: 0.9;
    color: inherit;
}

.creative-form-header .header-icon {
    margin-left: 20px;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: codcp-pulse-icon 2.5s infinite ease-in-out;
    z-index: 1;
}

.creative-form-header .header-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--codcp-primary-contrast, #ffffff);
}

/* New styles for the arrow circle */
.codcp-animated-arrow-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 40px !important;   /* <-- التعديل هنا: تصغير الدائرة بالقوة */
    height: 40px !important;  /* <-- التعديل هنا: تصغير الدائرة بالقوة */
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    animation: codcp-bounce-new 2s infinite;
}

.codcp-animated-arrow-container .codcp-arrow-icon {
    width: 24px !important;   /* <-- التعديل هنا: ضبط حجم السهم بالقوة */
    height: 24px !important;  /* <-- التعديل هنا: ضبط حجم السهم بالقوة */
    fill: var(--codcp-primary);
}


@keyframes codcp-pulse-icon {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
    }
    50% {
        transform: scale(1.1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* New keyframe for the bouncing circle */
@keyframes codcp-bounce-new {
    0%, 20%, 50%, 80%, 100% {
        transform: translate(-50%, 50%) translateY(0);
    }
    40% {
        transform: translate(-50%, 50%) translateY(-10px);
    }
    60% {
        transform: translate(-50%, 50%) translateY(-5px);
    }
}
/* =================================================== */
/* END: MODIFIED CREATIVE FORM HEADER                  */
/* =================================================== */

/* ____________________________________________________________________ */
/* START: [CORRECTED] STYLES FOR FLOATING LABEL & SECTION TITLE */
/* ____________________________________________________________________ */

/* 1. New Section Title Style (المعلومات الشخصية) */
.codcp-section-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #333;
    margin: 24px 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.codcp-section-title span {
    font-size: 1.2rem;
    color: var(--codcp-primary);
    /* [MODIFIED] Pulse Animation for Section Title Icon */
    animation: codcp-pulse-small 2s infinite ease-in-out; 
}
/* [NEW] Keyframes for Section Title Pulse Animation (Pulsating effect) */
@keyframes codcp-pulse-small {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}


/* 2. Grid of inputs */
.codcp-input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 12px; /* Increased vertical gap */
    margin-bottom: 12px;
}

/* 3. Input Group Structure for Floating Label - CORRECTED */
.codcp-input-group {
    position: relative; /* Base for floating label */
}

/* Floating Label & Icon Base Style - CORRECTED */
.codcp-input-group label {
    position: absolute;
    top: 50%;
    right: 45px; /* Initial position next to icon */
    transform: translateY(-50%);
    font-weight: 600;
    font-size: 0.95rem;
    color: #999;
    background-color: #fff;
    padding: 0 5px;
    transition: all 0.2s ease-out;
    pointer-events: none;
    z-index: 1;
}

/* Icon Style (Embedded Emoji) - CORRECTED */
.codcp-input-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--codcp-primary);
    z-index: 1;
    pointer-events: none;
}

/* Input/Select Base Style - CORRECTED */
.codcp-input-group input[type="text"],
.codcp-input-group input[type="tel"],
.codcp-input-group select {
    width: 100%;
    height: 55px; /* Consistent height */
    padding: 12px 50px 12px 15px; /* top, right (for icon), bottom, left */
    border: 1px solid #d7dbe0;
    border-radius: 10px;
    font-size: 1rem;
    box-sizing: border-box;
    background: #fff;
    position: relative; /* To be above the label initially */
    z-index: 0;
}

/* Floating Label Effect (When focused or has content) - CORRECTED */
.codcp-input-group input:focus + label,
.codcp-input-group input:not(:placeholder-shown) + label,
.codcp-input-group select:focus + label,
.codcp-input-group select:valid + label {
    top: -1px; /* Move label up to sit on the border */
    right: 15px; /* Align with input padding */
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--codcp-primary);
}

/* Special handling for select arrow */
.codcp-input-group select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: left 15px top 50%;
    background-size: .6em;
}

/* Focus state for inputs */
.codcp-input-group input:focus,
.codcp-input-group select:focus {
    border-color: var(--codcp-primary);
    box-shadow: 0 0 0 1px var(--codcp-primary);
}

/* END: [CORRECTED] STYLES FOR FLOATING LABEL & SECTION TITLE */
/* ____________________________________________________________________ */

/* ----------------------------------------------------- */
/* START: SUMMARY BOX STYLES (MODIFIED) */
/* ----------------------------------------------------- */

/* [MODIFICATION] Summary box with very light theme color */
.codcp-summary-wrapper {
    margin-top: 14px;
    padding: 14px;
    border-radius: 10px;
    /* [MODIFICATION] استخدام لون الثيم الأساسي مع تخفيف 5% فقط */
    background: color-mix(in srgb, var(--codcp-primary) 5%, white);
    border: 1px solid color-mix(in srgb, var(--codcp-primary) 15%, white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* ظل ناعم */
}

/* [MODIFICATION] Header (ملخص الطلب) - to accommodate new icon */
.codcp-summary-wrapper .codcp-summary-header {
    font-size: 1.1rem;
    font-weight: 800;
    color: #333; /* Make text color consistent with other titles */
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid color-mix(in srgb, var(--codcp-primary) 25%, white);
}
/* [REMOVED] Old emoji span styling */
.codcp-summary-wrapper .codcp-summary-header span {
    /* This rule is no longer needed */
}

/* rows - تنسيق الصفوف */
.codcp-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    font-size: 0.95rem;
    color: #444;
}

/* [MODIFICATION] Product title span now contains icon and text */
.codcp-summary-row .codcp-product-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.codcp-product-row { 
    border-bottom: 1px dashed #e8eef6; 
    padding-bottom: 10px; 
    margin-bottom: 10px; 
}

/* [REMOVED] Rules that were hiding old emoji spans */
/*
.codcp-summary-row .codcp-product-title span { display: none; }
.codcp-summary-total span:first-child span { display: none; }
.codcp-summary-row span:first-child strong { margin-right: 0 !important; }
*/

/* total row */
.codcp-summary-total { 
    font-size: 1.15rem; 
    font-weight: 800; 
    color: #c82333; 
    margin-top: 12px; 
    border-top: 1px solid color-mix(in srgb, var(--codcp-primary) 20%, white); 
    padding-top: 12px; 
}
.codcp-summary-total span:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333; /* Make total label color consistent */
}

/* shipping options - No changes here */
.codcp-shipping-row-container { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.codcp-shipping-option {
    border: 1px solid #e6ecf5;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.codcp-shipping-option input[type="radio"] { display: none; }
.codcp-shipping-option label {
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
}
.codcp-shipping-option label .shipping-cost-label { font-weight: 800; color: var(--codcp-primary); }

.codcp-shipping-option input[type="radio"]:checked + label {
    border-left: 4px solid var(--codcp-primary);
    background: color-mix(in srgb, var(--codcp-primary) 8%, white);
    color: #0b2b4a;
}

/* ----------------------------------------------------- */
/* END: SUMMARY BOX STYLES (MODIFIED) */
/* ----------------------------------------------------- */

/* ----------------------------------------------------- */
/* START: SHAKE ANIMATIONS (NEW) */
/* ----------------------------------------------------- */
@keyframes codcp-shake-subtle {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

.codcp-shake-subtle {
    animation: codcp-shake-subtle 0.15s ease-in-out infinite alternate; /* اهتزاز مستمر خفيف */
}

@keyframes codcp-shake-error {
    0% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-8px); }
    80% { transform: translateX(8px); }
    100% { transform: translateX(0); }
}

.codcp-shake-error-active {
    animation: codcp-shake-error 0.5s; /* اهتزاز مرة واحدة وقوي */
}

/* ----------------------------------------------------- */
/* END: SHAKE ANIMATIONS (NEW) */
/* ----------------------------------------------------- */


/* ✅ زر الطلب خارج حاوية الملخص */
.codcp-submit-button-outside {
    display: block;
    width: 100%;
    margin-top: 20px !important;
    text-align: center;
}

/* Submit button */
.codcp-submit-button {
    background: linear-gradient(180deg, var(--codcp-primary), color-mix(in srgb, var(--codcp-primary) 85%, black));
    color: var(--codcp-primary-contrast);
    border: none;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 140px;
    box-shadow: 0 6px 18px rgba(12,60,140,0.12);
    position: relative;
    overflow: hidden;
    animation: codcp-pulse 2.5s infinite ease-in-out;
}
.codcp-submit-button::before {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: rgba(255,255,255,0.4);
    transform: skewX(-25deg);
    animation: codcp-shine 3s infinite;
}
@keyframes codcp-shine { 0%{left:-100%;} 50%{left:120%;} 100%{left:120%;} }
@keyframes codcp-pulse { 0%,100%{box-shadow:0 0 0 rgba(0,0,0,0);} 50%{box-shadow:0 0 12px rgba(0,123,255,0.35);} }

.codcp-submit-button:disabled { opacity: 0.6; cursor: not-allowed; }

/* Loading overlay */
.codcp-loading-spinner-overlay {
    position: absolute;
    inset: 0;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,255,255,0.7);
    border-radius: 10px;
    z-index: 30;
}
.codcp-loading-spinner-small {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid #f3f3f3;
    border-top-color: var(--codcp-primary);
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* messages */
.codcp-error-message { background: #ffe6e6; color: #8b0000; padding: 10px; border-radius: 8px; font-weight:600; }
.codcp-success-message { background: #e6ffed; color: #115c26; padding: 14px; border-radius: 8px; font-weight:700; text-align:center; }

/* Responsive */
@media (max-width: 520px) {
    .codcp-input-grid { grid-template-columns: 1fr; }
}

/* small cosmetic */
.required { color: #d93025; margin-left:6px; font-weight:900; }

/* ==================================================================== */
/* START MODIFICATION: QUANTITY SECTION WITH THUMBNAIL */
/* ==================================================================== */
.codcp-quantity-section {
    margin: 18px 0 10px;
    padding: 12px;
    border: 1px solid #e5eaf1;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(3, 24, 66, 0.05);
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: flex-start; /* Aligns items to the start (right in RTL) */
    gap: 12px; 
}

/* New style for the product thumb container */
.codcp-quantity-product-thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}
.codcp-quantity-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.codcp-quantity-label {
    font-weight: 800;
    color: #333;
    font-size: 1.05rem;
    margin-bottom: 0;
}

.codcp-quantity-control {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    margin-top: 0;
    flex-direction: row-reverse;
    gap: 8px;
    margin-right: auto; /* Pushes the counter to the end (left in RTL) */
}
/* ==================================================================== */
/* END MODIFICATION: QUANTITY SECTION */
/* ==================================================================== */

/* الأزرار - تم التعديل لتصغير الحجم ومطابقة التنسيق المربع الفاتح مع الظل الناعم (المواصفات الجديدة) */
.codcp-qty-btn {
    width: 38px;
    height: 38px;
    border: none;
    background: #f7f7f7;
    color: #222;
    font-size: 1.3em;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 6px; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}
.codcp-qty-btn:hover {
    background: #ebebeb;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08);
}
.codcp-qty-btn:active {
    background: #dfdfdf;
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* حقل الكمية - تم التعديل ليطابق الصورة (فقط الرقم بدون حدود) */
.codcp-quantity-control input[type="number"] {
    width: 25px;
    height: 38px;
    text-align: center;
    border: none;
    outline: none;
    font-weight: 700;
    font-size: 1.1em;
    color: #111;
    background: transparent;
    appearance: textfield;
}
.codcp-quantity-control input::-webkit-outer-spin-button,
.codcp-quantity-control input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* تحسين على الشاشات الصغيرة */
@media (max-width: 520px) {
    .codcp-qty-btn {
        width: 36px;
        height: 36px;
        font-size: 1.2em;
    }
    .codcp-quantity-control input[type="number"] {
        width: 22px;
        height: 36px;
        font-size: 1em;
    }
}

/* ==================================================================== */
/* START MODIFICATION: VARIATIONS SECTION (COLORS & SIZES) */
/* ==================================================================== */
.codcp-variations-section {
    margin: 16px 0;
    padding: 14px;
    background: #fff;
    border: 1px solid #e7ebf2;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(3,24,66,0.05);
}

.codcp-attribute-row {
    margin-bottom: 14px;
}
.codcp-attribute-row:last-child {
    margin-bottom: 0;
}

.codcp-attribute-label {
    font-weight: 800;
    color: #333;
    display: block;
    margin-bottom: 8px;
    font-size: 1.05rem;
}

/* ألوان */
.codcp-color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.codcp-color-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 0 1px #ddd, 0 4px 8px rgba(0,0,0,0.1);
    position: relative; 
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Checkmark Icon using ::after */
.codcp-color-circle::after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3e%3cpath fill='none' stroke-width='2.2' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' d='M1 4.2l3.1 3.1L10 1'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(0);
    opacity: 0;
    transition: all 0.2s ease-in-out;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3)); /* Adds shadow to the checkmark */
}
.codcp-color-circle:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 0 0 1px #ccc, 0 6px 12px rgba(0,0,0,0.15);
}
.codcp-color-circle.selected {
    box-shadow: 0 0 0 2px var(--codcp-primary);
}
.codcp-color-circle.selected::after {
    transform: scale(1);
    opacity: 1;
}

/* أحجام */
.codcp-size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.codcp-size-box {
    padding: 0;
    width: 48px;
    height: 48px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: #f7f7f7;
    color: #333;
    position: relative; 
    display: flex; 
    align-items: center;
    justify-content: center;
}
/* Checkmark Icon using ::after */
.codcp-size-box::after {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3e%3cpath fill='none' stroke-width='2' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' d='M1 4.2l3.1 3.1L10 1'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.codcp-size-box:hover {
    border-color: #bbb;
}
.codcp-size-box.selected {
    background: var(--codcp-primary);
    border-color: var(--codcp-primary);
    color: transparent; /* Hides the text to show the checkmark clearly */
}
.codcp-size-box.selected::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
/* ==================================================================== */
/* END MODIFICATION: VARIATIONS SECTION */
/* ==================================================================== */

/* ======================================== */
/* 🧩 قسم الموديلات (قائمة عمودية احترافية) */
/* ======================================== */
.codcp-models-section {
    margin: 18px 0;
    padding: 14px;
    border: 1px solid #e6eaf1;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(3, 24, 66, 0.05);
}

.codcp-models-toggle {
    width: 100%;
    background: var(--codcp-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    margin-bottom: 12px;
    transition: background 0.2s ease;
    position: relative;
    overflow: hidden;
    animation: codcp-pulse 2.5s infinite ease-in-out;
    display: flex; /* [NEW] For aligning text and arrow */
    justify-content: center; /* [NEW] Center content */
    align-items: center; /* [NEW] Vertically align */
    gap: 10px; /* [NEW] Space between text and arrow */
}

/* [MODIFIED] Animated Arrow for Models Toggle Button */
.codcp-arrow-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-style: solid;
    border-width: 0 2px 2px 0;
    border-color: currentColor;
    transform: translateY(-2px) rotate(45deg); /* Points down */
    transition: transform 0.3s ease; /* Made transition smoother */
}

.codcp-models-toggle.active .codcp-arrow-indicator {
    transform: translateY(0) rotate(-135deg); /* Points up */
}


.codcp-models-toggle::before {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: rgba(255,255,255,0.4);
    transform: skewX(-25deg);
    animation: codcp-shine 3s infinite;
}
.codcp-models-toggle:hover {
    background: color-mix(in srgb, var(--codcp-primary) 85%, black);
}

.codcp-models-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.codcp-model-card {
    /* **1. إبقاء البطاقة قابلة للضغط كبديل للـ Checkbox** */
    cursor: pointer;

    /* التنسيقات الأساسية */
    display: flex;
    align-items: center;
    /* توزيع العناصر: الصورة والعنوان في البداية (يسار)، والعداد في النهاية (يمين) */
    justify-content: space-between;
    border: 1px solid #e3e7ef;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fafbfc;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.codcp-model-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* **❌ 2. إخفاء مربع الاختيار بالكامل** */
.codcp-model-checkbox {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
}

/* [MODIFICATION] Re-enabling visual selection for model cards */
.codcp-model-card.selected {
    background: color-mix(in srgb, var(--codcp-primary) 8%, white) !important;
    border-color: var(--codcp-primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--codcp-primary) 20%, white) !important;
}
.codcp-model-card.selected .codcp-model-title {
    color: #1a1a1a;
}
.codcp-model-card.selected .codcp-model-thumb img {
    border-color: var(--codcp-primary);
}


/* **4. ترتيب الصورة والعنوان ليكونوا على خط واحد** */
.codcp-model-thumb {
    /* تجميع الصورة في حاوية لضبط الهامش والترتيب */
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /* إزالة الهامش الأيسر (حيث كان مربع الاختيار) */
    margin-right: 0;
}
.codcp-model-thumb img {
    /* لا تغيير هنا */
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #ddd;
    /* إزالة الهامش الأيسر الذي كان للـ Checkbox وإضافة مسافة بين الصورة والعنوان */
    margin-left: 10px;
    flex-shrink: 0;
}
.codcp-model-meta {
    /* السماح للعنوان باحتلال المساحة المتبقية */
    flex: 1;
    text-align: right;
    margin-right: 10px; /* مسافة يمين العنوان */
    margin-left: 10px; /* مسافة يسار العنوان (من الصورة) */
    min-width: 0; /* مهم لكسر النص عند الحاجة */
}
.codcp-model-title {
    /* لضمان ظهور الاسم على خط واحد والاختصار إذا كان طويلاً */
    font-weight: 700;
    color: #222;
    font-size: 1rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* **5. العداد (إعادة تفعيل العداد المربع العادي بجانب العنوان)** */
.codcp-model-qty {
    /* تطبيق نفس شكل عداد الكمية الأفقية والمربعة */
    display: flex;
    align-items: center;
    /* الترتيب: جعل الناقص (-) في اليمين والزائد (+) في اليسار */
    flex-direction: row-reverse;
    gap: 8px; /* تقليل المسافة */
    flex-shrink: 0; /* منع تقلص العداد */
}

/* إعادة تفعيل أزرار الزيادة والنقصان */
.codcp-model-plus, .codcp-model-minus {
    width: 38px;
    height: 38px;
    border-radius: 6px; /* حواف مربعة ناعمة */
    border: none;
    background: #f7f7f7; /* اللون الأساسي: أبيض مائل للرمادي الفاتح جدًا */
    color: #222; /* لون الأيقونة: أسود نقي */
    font-size: 1.3em;
    font-weight: 900;
    cursor: pointer;
    display: flex; /* إعادة التفعيل */
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); /* الظل الناعم */
}
.codcp-model-plus:hover, .codcp-model-minus:hover {
    transform: translateY(-1px);
    background: #ebebeb; /* لون أغمق قليلاً عند التحويم */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08);
}
.codcp-model-plus:active, .codcp-model-minus:active {
    transform: translateY(0);
    background: #dfdfdf;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}


/* إعادة تنسيق حقل الكمية ليكون مربعاً ومخفياً الحدود كما في عداد المنتج الرئيسي */
.codcp-model-qty-input {
    width: 25px;
    height: 38px; /* مطابقة لارتفاع الأزرار الجديدة */
    border: none; /* إزالة الحدود */
    text-align: center;
    font-weight: 700;
    font-size: 1.1em;
    color: #111;
    background: transparent;
    appearance: textfield;
    padding: 0; /* إزالة البادينغ الداخلي */
    box-shadow: none; /* إزالة أي ظل قديم */
    border-radius: 0; /* إزالة الحدود الدائرية السابقة */
}
.codcp-model-qty-input::-webkit-outer-spin-button,
.codcp-model-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* إزالة التعديلات التي كانت للـ Checkbox المُخفى */
.codcp-model-card.selected .codcp-model-qty-input {
    color: #111 !important; /* إعادة اللون الأصلي */
    border-color: transparent !important; /* إعادة الحدود الشفافة */
    background: transparent !important; /* إعادة الخلفية الشفافة */
}


.codcp-note {
    font-size: 0.85rem;
    color: #666;
    margin-top: 10px;
    text-align: center;
}

/* Responsive */
@media (max-width: 520px) {
    .codcp-variations-section,
    .codcp-models-section {
        padding: 12px;
    }
    .codcp-model-card {
        /* إبقاء العناصر أفقية على الجوال لتحقيق التصميم المطلوب */
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    .codcp-model-thumb img {
        width: 48px;
        height: 48px;
        margin-left: 8px; /* مسافة يمين الصورة */
    }
    .codcp-model-meta {
        /* إبقاء flex: 1 لضمان الاسم يحتل بقية المساحة */
        flex: 1;
        margin-right: 8px;
        margin-left: 8px;
        text-align: right;
    }
    /* تحسين على الشاشات الصغيرة للموديلات */
    .codcp-model-plus, .codcp-model-minus {
        width: 36px;
        height: 36px;
        font-size: 1.2em;
    }
    .codcp-model-qty-input {
        width: 22px;
        height: 36px;
        font-size: 1em;
    }
}
/* ======= CODCP: force small circular qty buttons + model buttons override ======= */

/* ensure our vars exist */
:root { --codcp-primary: var(--codcp-primary, #007bff); --codcp-primary-contrast: #fff; }

/* reset box-sizing locally inside our widget to avoid theme weirdness */
#codcp-checkout-form-container,
#codcp-checkout-form-container * {
    box-sizing: border-box !important;
}

/* Target quantity and model controls specifically with high specificity */
#codcp-checkout-form-container .codcp-quantity-control,
#codcp-checkout-form-container .codcp-quantity-box,
#codcp-checkout-form-container .codcp-model-qty {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* التعديل 1.2: إضافة تنسيق لضمان أن القسم الرئيسي لكمية المنتج يكون موزّعًا أفقيًا */
#codcp-checkout-form-container .codcp-quantity-section {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 14px !important; /* للحفاظ على البادينغ الداخلي */
    padding-bottom: 14px !important; /* للحفاظ على البادينغ الداخلي */
    margin-top: 18px !important; /* للحفاظ على المسافات الخارجية */
    margin-bottom: 10px !important; /* للحفاظ على المسافات الخارجية */
}
#codcp-checkout-form-container .codcp-quantity-label {
    margin-bottom: 0 !important;
}


/* Square light buttons (+ and -) - OVERRIDE TO NEW STYLE */
#codcp-checkout-form-container button.codcp-qty-btn,
#codcp-checkout-form-container .codcp-model-plus,
#codcp-checkout-form-container .codcp-model-minus {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    line-height: 38px !important;
    padding: 0 !important;
    border-radius: 6px !important; /* SQUARE */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 18px !important; /* LARGER + / - SYMBOL */
    font-weight: 800 !important;
    color: #222 !important; /* DARK COLOR */
    background: #f7f7f7 !important; /* LIGHT GREY/WHITE */
    border: none !important;
    /* Shadow for lift effect - تم تصفير الظل هنا لضمان أن الكود الأقدم لا يطغى على الجديد */
    box-shadow: 0 0 0 0 rgba(0,0,0,0) !important;
    vertical-align: middle !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
/* **✅ إعادة تفعيل أزرار العداد في قسم الـ Override** */
#codcp-checkout-form-container .codcp-model-plus,
#codcp-checkout-form-container .codcp-model-minus {
    display: inline-flex !important;
}


/* Hover and Active states for Square Light Buttons */
#codcp-checkout-form-container button.codcp-qty-btn:hover,
#codcp-checkout-form-container .codcp-model-plus:hover,
#codcp-checkout-form-container .codcp-model-minus:hover {
    transform: translateY(-1px) !important;
    background: #ebebeb !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}
#codcp-checkout-form-container button.codcp-qty-btn:active,
#codcp-checkout-form-container .codcp-model-plus:active,
#codcp-checkout-form-container .codcp-model-minus:active {
    background: #dfdfdf !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}


/* Middle number: make it invisible border and transparent background */
#codcp-checkout-form-container .codcp-quantity-control input[type="number"],
#codcp-checkout-form-container .codcp-model-qty-input {
    /* **✅ إعادة تنسيق العداد ليكون مربعاً/مستطيلاً بدون حدود** */
    width: 25px !important; /* narrower width for just the number */
    height: 38px !important;
    min-width: 25px !important;
    min-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important; /* REMOVE BORDER RADIUS */
    text-align: center !important;
    background: transparent !important;
    border: none !important; /* REMOVE BORDER */
    font-weight: 700 !important;
    font-size: 16px !important; /* SLIGHTLY LARGER FONT FOR NUMBER */
    color: #111 !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: none !important;
    box-shadow: none !important;
}


/* إزالة التعديل الذي كان للـ Checkbox المُخفى */
#codcp-checkout-form-container .codcp-model-card.selected .codcp-model-qty-input {
    color: #111 !important;
    border-color: transparent !important;
    background: transparent !important;
}


/* remove theme padding/line-height that may inflate button sizes */
#codcp-checkout-form-container button.codcp-qty-btn * ,
#codcp-checkout-form-container button.codcp-qty-btn {
    padding: 0 !important;
    line-height: 1 !important;
}

/* Force small icons if theme uses pseudo elements */
#codcp-checkout-form-container .codcp-qty-btn::before,
#codcp-checkout-form-container .codcp-qty-btn::after {
    display: none !important;
}

/* Very important: override global button/font-size inheritance that some themes set */
#codcp-checkout-form-container,
#codcp-checkout-form-container input,
#codcp-checkout-form-container button,
#codcp-checkout-form-container select,
#codcp-checkout-form-container label {
    font-size: 14px !important;
    font-family: inherit !important;
}

/* Ensure flex shrink so nothing stretches */
#codcp-checkout-form-container .codcp-quantity-control > * {
    flex-shrink: 0 !important;
}

/* Make model qty area aligned and compact */
#codcp-checkout-form-container .codcp-model-qty {
    gap: 8px !important;
}
#codcp-checkout-form-container .codcp-model-qty-input {
    width: 25px !important;
    height: 38px !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
    text-align: center !important;
}

/* If theme forces .button styles (Bootstrap-like), neutralize them for our buttons */
#codcp-checkout-form-container button.codcp-qty-btn.button,
#codcp-checkout-form-container .codcp-model-plus.button,
#codcp-checkout-form-container .codcp-model-minus.button {
    padding: 0 !important;
    height: 38px !important;
    width: 38px !important;
    border-radius: 6px !important;
    font-size: 18px !important;
}

/* Mobile tweak */
@media (max-width:520px){
    /* التعديل 2.2: لضمان أن بطاقة الموديل تظل أفقية على الجوال */
    #codcp-checkout-form-container .codcp-model-card {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    #codcp-checkout-form-container .codcp-model-meta {
        margin-left: 8px !important;
        margin-right: 8px !important;
        text-align: right !important;
    }
    #codcp-checkout-form-container button.codcp-qty-btn,
    #codcp-checkout-form-container .codcp-model-plus,
    #codcp-checkout-form-container .codcp-model-minus {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 16px !important;
    }
    #codcp-checkout-form-container .codcp-quantity-control input[type="number"],
    #codcp-checkout-form-container .codcp-model-qty-input {
        width: 22px !important;
        height: 36px !important;
        min-width: 22px !important;
        font-size: 15px !important;
    }
}

/* ========================================================== */
/* START: NEW ICON STYLES V7.2.2 (ADDITION)                   */
/* ========================================================== */

/* --- 1. Main Section Title Icon (Animated) --- */
.section-title-with-icon .main-icon {
    color: var(--codcp-primary);
    font-size: 1.5rem; /* حجم مناسب بجانب العنوان */
    vertical-align: middle;
    /* تطبيق الأنيميشن */
    animation: pulse-animation-main 2.5s infinite ease-in-out;
}

/* تعريف الأنيميشن (تأثير النبض للعنوان الرئيسي) */
@keyframes pulse-animation-main {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

/* --- 2. Icons Inside Input Fields --- */

/* الغلاف الحاضن للحقل والأيقونة (تمت إضافة هذا الكلاس في PHP) */
.input-with-icon-wrapper {
    position: relative; /* ضروري لتحديد موقع الأيقونة */
}

/* تنسيق أيقونة الحقل نفسها */
.input-with-icon-wrapper .field-icon {
    position: absolute;
    top: 50%;
    right: 15px; /* وضع الأيقونة على اليمين لتناسب التصميم الحالي */
    transform: translateY(-50%);
    color: var(--codcp-primary);
    opacity: 0.6; /* شفافية بسيطة لجمالية أكثر */
    font-size: 1rem; /* حجم مناسب لداخل الحقل */
    pointer-events: none; /* لمنع الأيقونة من اعتراض نقرات الفأرة */
    z-index: 2; /* للتأكد من أنها فوق أي خلفية ولكن تحت الـ label عند التركيز */
}

/* عند التركيز على الحقل، نجعل الأيقونة أكثر وضوحاً */
.input-with-icon-wrapper input:focus ~ .field-icon,
.input-with-icon-wrapper select:focus ~ .field-icon {
    opacity: 1;
}

/* تعديل موقع الـ Label ليتناسب مع وجود الأيقونة الجديدة */
/* الكود الحالي يضع الـ label عند right: 45px وهو مناسب تماماً */
/* لا حاجة لتغييره */

/* ملاحظة: الكود الحالي للحقول .codcp-input-group input, .codcp-input-group select */
/* يحتوي على padding-right: 50px وهو مثالي لإفساح المجال للأيقونة الجديدة. */
/* لذلك لا حاجة لإضافة padding جديد. */

/* ========================================================== */
/* END: NEW ICON STYLES V7.2.2 (ADDITION)                     */
/* ========================================================== */


/* ========================================================== */
/* START: NEW SUMMARY ICON STYLES (ADDITION)                  */
/* ========================================================== */

/* --- 1. Summary Title Icon (Animated) --- */
.main-summary-icon {
    color: var(--codcp-primary);
    font-size: 1.4rem; /* حجم مناسب بجانب العنوان */
    /* Reuse the same animation as the other main icon */
    animation: pulse-animation-main 2.5s infinite ease-in-out;
}

/* --- 2. Icons inside summary rows --- */
.row-icon {
    color: var(--codcp-primary);
    opacity: 0.85;
    font-size: 1em; /* Matches the text size in the row */
    vertical-align: middle;
}

/* ========================================================== */
/* END: NEW SUMMARY ICON STYLES (ADDITION)                    */
/* ========================================================== */
/* * إخفاء بالقوة لنموذج خيارات المنتج والكمية الافتراضي
 * هذا الكود يتجاوز تخصيصات القوالب
*/
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .quantity,
.woocommerce div.product form.cart div[class*="value"],
.woocommerce div.product form.cart .single_variation_wrap {
    display: none !important;
}
/* =============================================== */
/* الأنيميشن الجديد: اهتزاز زر الطلب                */
/* =============================================== */

/* الخطوة الأولى: تعريف حركة الاهتزاز */
@keyframes shake-and-wait {
  /* الاهتزاز يحدث في أول 15% من مدة الأنيميشن */
  0%, 15%, 100% {
    transform: translateX(0); /* يعود إلى مكانه الطبيعي */
  }
  2%, 6%, 10% {
    transform: translateX(-6px); /* يتحرك لليسار */
  }
  4%, 8%, 12% {
    transform: translateX(6px); /* يتحرك لليمين */
  }
}

/* الخطوة الثانية: تطبيق الحركة على زر الطلب */
.codcp-submit-button {
  /* تطبيق الأنيميشن الذي عرفناه في الأعلى */
  animation-name: shake-and-wait;
  
  /* مدة الأنيميشن بالكامل (اهتزاز + فترة انتظار) */
  animation-duration: 4s;
  
  /* تكرار الأنيميشن إلى ما لا نهاية */
  animation-iteration-count: infinite;
  
  /* يجعل الحركة تبدو طبيعية وسلسة */
  animation-timing-function: ease-in-out;
}

/* ========================================================== */
/* START: Floating Action Buttons (FAB) Styles              */
/* ========================================================== */

.codcp-fab-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 10px;
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none; /* Allow clicks to pass through the container */
    direction: rtl;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease;
}

.codcp-fab-container.is-hidden {
    transform: translateY(100%);
    opacity: 0;
}

.codcp-fab-actions {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Make buttons equal height */
    gap: 8px;
    max-width: 500px;
    margin: 0 auto;
    pointer-events: auto; /* Enable clicks on the buttons themselves */
}

.codcp-fab-main {
    flex-grow: 1;
    background-color: var(--codcp-primary);
    color: var(--codcp-primary-contrast);
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    animation: codcp-fab-pulse 2s infinite ease-in-out;
    transition: background-color 0.2s;
}

.codcp-fab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: auto; /* Let padding and font-size define height */
    background-color: #fff;
    color: #444;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1.5rem;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.codcp-fab-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.codcp-fab-whatsapp:hover {
    background-color: #25D366;
    color: #fff;
    border-color: #25D366;
}

.codcp-fab-phone:hover {
    background-color: var(--codcp-primary);
    color: var(--codcp-primary-contrast);
    border-color: var(--codcp-primary);
}

@keyframes codcp-fab-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}
/* ========================================================== */
/* END: Floating Action Buttons (FAB) Styles                */
/* ========================================================== */