.elementor-7430 .elementor-element.elementor-element-3a896c9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-7430 .elementor-element.elementor-element-2616e59 .fluentform-widget-wrapper .ff-el-group .ff-btn-submit{background-color:#1a7efb !important;color:#ffffff !important;}/* Start custom CSS for fluent-form-widget, class: .elementor-element-2616e59 *//* =========================================================
   Lavera - Fluent Forms ID 4
   Complete styling + selectable delivery method cards
   Name Attribute required: receive_method
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800&display=swap');

.fluentform_wrapper_4,
.fluentform_wrapper_4 *,
#fluentform_4,
#fluentform_4 * {
    box-sizing: border-box;
    font-family: "Tajawal", sans-serif !important;
}

.fluentform_wrapper_4 {
    width: min(680px, calc(100% - 30px));
    margin: 42px auto !important;
    padding: 0 !important;
    direction: rtl !important;
}

#fluentform_4 {
    width: 100%;
    margin: 0 !important;
    padding: 38px 38px 42px !important;
    direction: rtl !important;
    border: 1px solid #eadbdd !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 94% 3%, rgba(187, 64, 82, 0.075), transparent 25%),
        linear-gradient(180deg, #ffffff 0%, #fffdfd 100%) !important;
    box-shadow:
        0 24px 60px rgba(70, 38, 41, 0.085),
        0 5px 15px rgba(70, 38, 41, 0.03) !important;
}

#fluentform_4 .ff-t-container,
#fluentform_4 .ff-el-group,
#fluentform_4 .ff-el-form-top,
#fluentform_4 .ff-el-input--content {
    box-shadow: none !important;
}

#fluentform_4 .ff-el-section-break {
    margin: 0 0 30px !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: center !important;
}

#fluentform_4 .ff-el-section-title,
#fluentform_4 .ff-el-section-break h2,
#fluentform_4 .ff-el-section-break h3,
#fluentform_4 .ff-form-title {
    margin: 0 !important;
    color: #291b1c !important;
    font-size: clamp(31px, 4vw, 42px) !important;
    font-weight: 700 !important;
    line-height: 1.38 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}

#fluentform_4 .ff-section_break_desk,
#fluentform_4 .ff_form_desc,
#fluentform_4 .ff_form_description {
    margin: 9px 0 0 !important;
    color: #907b7f !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.85 !important;
    text-align: center !important;
}

#fluentform_4 .ff-el-section-break::after {
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    margin: 17px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #c9905d, #bb4052);
    box-shadow: 0 6px 15px rgba(187, 64, 82, 0.15);
}

#fluentform_4 .ff-el-group {
    margin-bottom: 21px !important;
}

#fluentform_4 .ff-el-input--label {
    margin-bottom: 9px !important;
}

#fluentform_4 .ff-el-input--label label {
    display: block !important;
    margin: 0 !important;
    color: #332426 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.65 !important;
    text-align: right !important;
}

#fluentform_4 .ff-el-is-required.asterisk,
#fluentform_4 .text-danger,
#fluentform_4 .ff-el-input--label label .ff-el-is-required {
    color: #bb4052 !important;
}

#fluentform_4 input[type="text"],
#fluentform_4 input[type="email"],
#fluentform_4 input[type="tel"],
#fluentform_4 input[type="number"],
#fluentform_4 input[type="url"],
#fluentform_4 select,
#fluentform_4 textarea,
#fluentform_4 .ff-el-form-control {
    width: 100% !important;
    min-height: 56px !important;
    padding: 13px 17px !important;
    border: 1px solid #e8dadd !important;
    border-radius: 15px !important;
    outline: none !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: #342629 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    text-align: right !important;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease !important;
}

#fluentform_4 textarea {
    min-height: 108px !important;
    resize: vertical !important;
}

#fluentform_4 input::placeholder,
#fluentform_4 textarea::placeholder {
    color: #a28d91 !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

#fluentform_4 input:focus,
#fluentform_4 select:focus,
#fluentform_4 textarea:focus,
#fluentform_4 .ff-el-form-control:focus {
    border-color: #bb4052 !important;
    background: #fffdfd !important;
    box-shadow: 0 0 0 4px rgba(187, 64, 82, 0.08) !important;
}

#fluentform_4 select {
    cursor: pointer !important;
}

/* Receive method cards */
#fluentform_4 .ff-el-group:has(input[name="receive_method"]) {
    margin-top: 8px !important;
    margin-bottom: 25px !important;
}

#fluentform_4 .ff-el-group:has(input[name="receive_method"]) .ff-el-input--content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    overflow: visible !important;
}

#fluentform_4 .ff-el-group:has(input[name="receive_method"]) .ff-el-form-check {
    position: relative !important;
    isolation: isolate;
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* The real radio stays active and covers the whole card */
#fluentform_4 .ff-el-group:has(input[name="receive_method"]) input[name="receive_method"][type="radio"] {
    position: absolute !important;
    z-index: 5 !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

#fluentform_4 .ff-el-group:has(input[name="receive_method"]) .ff-el-form-check-label {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-height: 158px !important;
    margin: 0 !important;
    padding: 61px 18px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e7d8db !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, #ffffff, #fff9f8) !important;
    box-shadow: 0 11px 28px rgba(73, 39, 42, 0.045) !important;
    color: #3c2b2e !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.85 !important;
    text-align: center !important;
    cursor: pointer !important;
    pointer-events: none !important;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease !important;
}

#fluentform_4 .ff-el-group:has(input[name="receive_method"]) .ff-el-form-check-label::before {
    position: absolute;
    top: 17px;
    right: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #bb4052;
    background: rgba(187, 64, 82, 0.09);
    font-family: Arial, sans-serif !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    transform: translateX(50%);
    transition:
        color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

#fluentform_4 .ff-el-group:has(input[name="receive_method"]) .ff-el-form-check:nth-child(1) .ff-el-form-check-label::before {
    content: "⌂";
}

#fluentform_4 .ff-el-group:has(input[name="receive_method"]) .ff-el-form-check:nth-child(2) .ff-el-form-check-label::before {
    content: "➜";
}

#fluentform_4 .ff-el-group:has(input[name="receive_method"]) .ff-el-form-check:nth-child(1) .ff-el-form-check-label::after {
    content: "مجاني";
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #ffffff;
    background: #bb4052;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.45;
}

#fluentform_4 .ff-el-group:has(input[name="receive_method"]) .ff-el-form-check:nth-child(2) .ff-el-form-check-label::after {
    content: "شحن 95 جنيه";
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #bb4052;
    background: rgba(187, 64, 82, 0.09);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.45;
}

#fluentform_4 .ff-el-group:has(input[name="receive_method"]) .ff-el-form-check:hover .ff-el-form-check-label {
    transform: translateY(-4px) !important;
    border-color: rgba(187, 64, 82, 0.30) !important;
    box-shadow: 0 17px 35px rgba(73, 39, 42, 0.09) !important;
}

/* Selected state */
#fluentform_4 .ff-el-group:has(input[name="receive_method"]) .ff-el-form-check:has(input[name="receive_method"]:checked) .ff-el-form-check-label {
    transform: translateY(-2px) !important;
    border: 2px solid #bb4052 !important;
    background:
        radial-gradient(circle at 88% 10%, rgba(187, 64, 82, 0.10), transparent 30%),
        linear-gradient(145deg, #fff8f8, #ffffff) !important;
    color: #8f2f3e !important;
    box-shadow:
        0 16px 38px rgba(187, 64, 82, 0.14),
        0 0 0 4px rgba(187, 64, 82, 0.055) !important;
}

#fluentform_4 .ff-el-group:has(input[name="receive_method"]) .ff-el-form-check:has(input[name="receive_method"]:checked) .ff-el-form-check-label::before {
    content: "✓" !important;
    color: #ffffff !important;
    background: #bb4052 !important;
    box-shadow: 0 8px 18px rgba(187, 64, 82, 0.22);
    font-family: "Tajawal", sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}

#fluentform_4 .ff-el-group:has(input[name="receive_method"]) .ff-el-form-check:has(input[name="receive_method"]:checked) .ff-el-form-check-label::after {
    color: #ffffff !important;
    background: #bb4052 !important;
    box-shadow: 0 7px 16px rgba(187, 64, 82, 0.18);
}

#fluentform_4 .ff-el-group:has(input[name="receive_method"]) input[name="receive_method"]:focus-visible ~ .ff-el-form-check-label,
#fluentform_4 .ff-el-group:has(input[name="receive_method"]) input[name="receive_method"]:focus-visible + .ff-el-form-check-label {
    outline: 3px solid rgba(187, 64, 82, 0.20) !important;
    outline-offset: 3px !important;
}

/* Submit */
#fluentform_4 .ff_submit_btn_wrapper,
#fluentform_4 .ff-btn-wrap {
    margin-top: 28px !important;
    text-align: center !important;
}

#fluentform_4 .ff-btn-submit,
#fluentform_4 button[type="submit"],
#fluentform_4 input[type="submit"] {
    width: 100% !important;
    min-height: 58px !important;
    padding: 14px 25px !important;
    border: 1px solid #bb4052 !important;
    border-radius: 999px !important;
    outline: none !important;
    background: linear-gradient(135deg, #bb4052, #983344) !important;
    box-shadow: 0 14px 28px rgba(187, 64, 82, 0.22) !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease !important;
}

#fluentform_4 .ff-btn-submit:hover,
#fluentform_4 button[type="submit"]:hover,
#fluentform_4 input[type="submit"]:hover {
    transform: translateY(-3px) !important;
    background: linear-gradient(135deg, #c64a5c, #8f2f40) !important;
    box-shadow: 0 18px 36px rgba(187, 64, 82, 0.30) !important;
}

/* Errors and success */
#fluentform_4 .ff-el-is-error .ff-el-form-control {
    border-color: #dc4a5d !important;
    box-shadow: 0 0 0 3px rgba(220, 74, 93, 0.07) !important;
}

#fluentform_4 .error,
#fluentform_4 .ff-el-error,
#fluentform_4 .text-danger {
    margin-top: 6px !important;
    color: #bb4052 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

#fluentform_4 .ff-message-success {
    padding: 18px !important;
    border: 1px solid rgba(45, 150, 93, 0.18) !important;
    border-radius: 16px !important;
    background: rgba(45, 150, 93, 0.07) !important;
    color: #216b43 !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    text-align: center !important;
}

/* Mobile */
@media (max-width: 600px) {
    .fluentform_wrapper_4 {
        width: min(100% - 22px, 680px);
        margin: 25px auto !important;
    }

    #fluentform_4 {
        padding: 28px 18px 32px !important;
        border-radius: 22px !important;
    }

    #fluentform_4 .ff-el-section-title,
    #fluentform_4 .ff-el-section-break h2,
    #fluentform_4 .ff-el-section-break h3,
    #fluentform_4 .ff-form-title {
        font-size: 29px !important;
        line-height: 1.42 !important;
    }

    #fluentform_4 .ff-el-group:has(input[name="receive_method"]) .ff-el-input--content {
        grid-template-columns: 1fr !important;
        gap: 11px !important;
    }

    #fluentform_4 .ff-el-group:has(input[name="receive_method"]) .ff-el-form-check-label {
        min-height: 128px !important;
        padding: 56px 15px 17px !important;
        border-radius: 17px !important;
        font-size: 14px !important;
    }

    #fluentform_4 input[type="text"],
    #fluentform_4 input[type="email"],
    #fluentform_4 input[type="tel"],
    #fluentform_4 input[type="number"],
    #fluentform_4 select,
    #fluentform_4 textarea,
    #fluentform_4 .ff-el-form-control {
        min-height: 53px !important;
        padding: 12px 15px !important;
        font-size: 14px !important;
    }

    #fluentform_4 .ff-btn-submit,
    #fluentform_4 button[type="submit"],
    #fluentform_4 input[type="submit"] {
        min-height: 56px !important;
        font-size: 16px !important;
    }
}/* End custom CSS */