/* =========================================================
   LA MANTILLE — THANK YOU PAGE
   Invoice + Support Cards
   ========================================================= */

/* ---------- 1. مربع إرسال الفاتورة ---------- */

#invoice-form,
#invoice-form.thankyou-block {
    background: #F3E8DA !important;
    background-color: #F3E8DA !important;
    border: 1px solid #E3D2BE !important;
    border-radius: 16px !important;
    padding: 24px 18px !important;
    box-shadow: none !important;
    color: #5A4A3A !important;
}


/* الدائرة الخاصة بأيقونة الفاتورة */
#invoice-form .bg-gray-100,
#invoice-form [class*="bg-gray"] {
    background: #E4D1B8 !important;
    background-color: #E4D1B8 !important;
    color: #5A4A3A !important;
}


/* الأيقونة */
#invoice-form i,
#invoice-form i::before,
#invoice-form svg {
    color: #5A4A3A !important;
    fill: #5A4A3A !important;
}


/* النص */
#invoice-form p,
#invoice-form .text-sm {
    color: #5A4A3A !important;
}


/* الفورم */
#invoice-form form {
    border-radius: 10px !important;
    overflow: hidden !important;
}


/* حقل البريد */
#invoice-form input[type="email"] {
    background: #FFF9F0 !important;
    background-color: #FFF9F0 !important;

    color: #5A4A3A !important;

    border: 1px solid #D8C4AC !important;

    min-height: 40px !important;

    box-shadow: none !important;
}


/* النص داخل حقل البريد */
#invoice-form input[type="email"]::placeholder {
    color: #A48E78 !important;
    opacity: 1 !important;
}


/* عند الضغط على حقل البريد */
#invoice-form input[type="email"]:focus {
    border-color: #8A6A45 !important;

    outline: none !important;

    box-shadow:
        0 0 0 2px rgba(138, 106, 69, 0.10) !important;
}


/* زر إرسال */
#invoice-form button,
#invoice-form input[type="submit"],
#invoice-form .s-button-element {
    background: #8A6A45 !important;
    background-color: #8A6A45 !important;

    color: #FFFFFF !important;

    border-color: #8A6A45 !important;

    box-shadow: none !important;

    font-weight: 600 !important;
}


/* كل العناصر داخل زر إرسال */
#invoice-form button *,
#invoice-form .s-button-element * {
    color: #FFFFFF !important;
}


/* Hover */
#invoice-form button:hover,
#invoice-form input[type="submit"]:hover,
#invoice-form .s-button-element:hover {
    background: #5A4A3A !important;
    background-color: #5A4A3A !important;

    color: #FFFFFF !important;

    border-color: #5A4A3A !important;
}



/* =========================================================
   2. مربع الدعم
   ========================================================= */

/*
   سلة تضع مربع الدعم داخل thankyou-block.
   نستهدف مربع الدعم الذي يحتوي على الهاتف
   أو البريد.
*/

main .thankyou-block:has(.sicon-phone),
main .thankyou-block:has(a[href^="tel:"]),
main .thankyou-block:has(.sicon-mail-letter) {

    background: #F3E8DA !important;
    background-color: #F3E8DA !important;

    border: 1px solid #E3D2BE !important;

    border-radius: 16px !important;

    padding: 24px 18px !important;

    box-shadow: none !important;

    color: #5A4A3A !important;
}


/* دائرة الأيقونة */
main .thankyou-block:has(.sicon-phone) .bg-gray-100,
main .thankyou-block:has(a[href^="tel:"]) .bg-gray-100,
main .thankyou-block:has(.sicon-mail-letter) .bg-gray-100 {

    background: #E4D1B8 !important;
    background-color: #E4D1B8 !important;

    color: #5A4A3A !important;
}


/* عنوان الدعم */
main .thankyou-block:has(.sicon-phone) p,
main .thankyou-block:has(a[href^="tel:"]) p,
main .thankyou-block:has(.sicon-mail-letter) p {

    color: #5A4A3A !important;

    font-weight: 600 !important;
}


/* رقم الهاتف والبريد */
main .thankyou-block:has(.sicon-phone) a,
main .thankyou-block:has(a[href^="tel:"]) a,
main .thankyou-block:has(.sicon-mail-letter) a {

    color: #5A4A3A !important;

    font-weight: 700 !important;

    text-decoration: none !important;
}


/* النصوص الأخرى */
main .thankyou-block:has(.sicon-phone) .text-sm,
main .thankyou-block:has(a[href^="tel:"]) .text-sm,
main .thankyou-block:has(.sicon-mail-letter) .text-sm {

    color: #5A4A3A !important;
}


/* أيقونات الدعم */
main .thankyou-block:has(.sicon-phone) i,
main .thankyou-block:has(a[href^="tel:"]) i,
main .thankyou-block:has(.sicon-mail-letter) i,

main .thankyou-block:has(.sicon-phone) i::before,
main .thankyou-block:has(a[href^="tel:"]) i::before,
main .thankyou-block:has(.sicon-mail-letter) i::before {

    color: #8A6A45 !important;
}


/* Hover رقم الهاتف / البريد */
main .thankyou-block:has(.sicon-phone) a:hover,
main .thankyou-block:has(a[href^="tel:"]) a:hover,
main .thankyou-block:has(.sicon-mail-letter) a:hover {

    color: #8A6A45 !important;
}



/* =========================================================
   3. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /* الفاتورة */
    #invoice-form,
    #invoice-form.thankyou-block {

        padding: 22px 14px !important;

        border-radius: 14px !important;

        margin-bottom: 16px !important;
    }


    #invoice-form p {
        font-size: 13px !important;

        line-height: 1.7 !important;
    }


    #invoice-form input[type="email"] {
        font-size: 13px !important;
    }


    #invoice-form button,
    #invoice-form input[type="submit"],
    #invoice-form .s-button-element {

        font-size: 13px !important;
    }


    /* الدعم */
    main .thankyou-block:has(.sicon-phone),
    main .thankyou-block:has(a[href^="tel:"]),
    main .thankyou-block:has(.sicon-mail-letter) {

        padding: 22px 14px !important;

        border-radius: 14px !important;

        margin-bottom: 16px !important;
    }


    main .thankyou-block:has(.sicon-phone) p,
    main .thankyou-block:has(a[href^="tel:"]) p,
    main .thankyou-block:has(.sicon-mail-letter) p {

        font-size: 13px !important;

        line-height: 1.7 !important;
    }


    main .thankyou-block:has(.sicon-phone) a,
    main .thankyou-block:has(a[href^="tel:"]) a,
    main .thankyou-block:has(.sicon-mail-letter) a {

        font-size: 13px !important;
    }
}