/*
Theme Name: rattil-theme
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.13.3.1789855700
Updated: 2026-09-19 22:08:20

*/



/* ==========================================================
   RATTIL ONLINE - FREE TRIAL FORM
   Contact Form 7
========================================================== */


/* =========================
   GENERAL / RESET
========================= */

.rattil-trial-form,
.rattil-trial-form *,
.rattil-trial-form *::before,
.rattil-trial-form *::after {
    box-sizing: border-box !important;
}

.wpcf7,
.wpcf7 form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}


/* =========================
   MAIN FORM CARD
========================= */

.rattil-trial-form {
    width: 100%;
    max-width: 660px;
    min-width: 0;

    margin: 0 auto;
    padding: 42px 40px 40px;

    background: #ffffff;

    border: 1px solid #e9e2d2;
    border-radius: 20px;

    box-shadow:
        0 2px 4px rgba(40, 30, 10, 0.04),
        0 8px 18px rgba(40, 30, 10, 0.08);

    font-family: "Inter", sans-serif;

    overflow: hidden;
}


/* =========================
   FIELDS
========================= */

.rattil-trial-form .rattil-field {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0 0 20px;
}


/* =========================
   LABELS
========================= */

.rattil-trial-form label {
    display: block;

    width: 100%;

    margin: 0 0 7px;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.3px;

    color: #594000;
}


/* =========================
   CF7 CONTROL WRAPPER
========================= */

.rattil-trial-form .wpcf7-form-control-wrap {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;
}


/* =========================
   INPUTS + SELECT
========================= */

.rattil-trial-form input[type="text"],
.rattil-trial-form input[type="tel"],
.rattil-trial-form input[type="email"],
.rattil-trial-form select {
    display: block;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 56px;

    margin: 0;
    padding: 0 20px;

    background-color: #ffffff;

    border: 1px solid #ded3bd;
    border-radius: 10px;

    outline: none;

    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;

    color: #333333;

    box-shadow: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}


/* =========================
   PLACEHOLDER
========================= */

.rattil-trial-form input::placeholder {
    color: #777777;
    opacity: 1;
}


/* =========================
   INPUT FOCUS
========================= */

.rattil-trial-form input[type="text"]:focus,
.rattil-trial-form input[type="tel"]:focus,
.rattil-trial-form input[type="email"]:focus,
.rattil-trial-form select:focus {
    border-color: #dca600;

    box-shadow:
        0 0 0 3px rgba(220, 166, 0, 0.10);

    background-color: #ffffff;
}


/* =========================
   SELECT
========================= */

.rattil-trial-form select {
    padding-left: 20px;
    padding-right: 45px;

    cursor: pointer;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background-image:
        linear-gradient(45deg, transparent 50%, #667080 50%),
        linear-gradient(135deg, #667080 50%, transparent 50%);

    background-position:
        calc(100% - 21px) 24px,
        calc(100% - 16px) 24px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;
}


/* =========================
   TWO COLUMN ROW
========================= */

.rattil-trial-form .rattil-form-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 20px;

    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.rattil-trial-form .rattil-form-row .rattil-field {
    min-width: 0;
    margin-bottom: 0;
}


/* =========================
   SUBMIT WRAPPER
========================= */

.rattil-trial-form .rattil-submit-wrap {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin-top: 35px;

    position: relative;

    /*
     يسمح لحجم خط الزر أن يتفاعل
     مع عرض الكونتينر نفسه
    */
    container-type: inline-size;
}


/* =========================
   SUBMIT BUTTON
========================= */

.rattil-trial-form input[type="submit"],
.rattil-trial-form .wpcf7-submit {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 68px;

    margin: 0 !important;

    padding: 15px 18px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: #e1a900 !important;

    color: #ffffff !important;

    font-family: "Inter", sans-serif !important;

    /*
       fallback لو المتصفح لا يدعم cqw
    */
    font-size: clamp(14px, 3vw, 21px) !important;

    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;

    text-align: center !important;

    cursor: pointer !important;

    box-shadow:
        0 9px 20px rgba(225, 169, 0, 0.22) !important;

    overflow: hidden !important;
    text-overflow: clip !important;

    -webkit-appearance: none !important;
    appearance: none !important;

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/*
   حجم النص بناء على عرض الزر نفسه
   وليس عرض الشاشة
*/
@supports (font-size: 1cqw) {

    .rattil-trial-form input[type="submit"],
    .rattil-trial-form .wpcf7-submit {
        font-size: clamp(
            12px,
            6.8cqw,
            21px
        ) !important;
    }
}


/* =========================
   BUTTON HOVER
========================= */

.rattil-trial-form input[type="submit"]:hover,
.rattil-trial-form .wpcf7-submit:hover {
    background: #d39e00 !important;

    transform: translateY(-1px);

    box-shadow:
        0 11px 24px rgba(225, 169, 0, 0.28) !important;
}


/* =========================
   BUTTON ACTIVE
========================= */

.rattil-trial-form input[type="submit"]:active,
.rattil-trial-form .wpcf7-submit:active {
    transform: translateY(0);
}


/* =========================
   BOTTOM NOTE
========================= */

.rattil-trial-form .rattil-form-note {
    width: 100%;
    max-width: 100%;

    margin-top: 18px;

    padding: 0 5px;

    text-align: center;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.3px;

    color: #707070;

    overflow-wrap: break-word;
}

.rattil-trial-form .rattil-form-note span {
    display: inline-block;
    margin: 0 4px;
}


/* =========================
   CF7 DEFAULT PARAGRAPHS
========================= */

.rattil-trial-form p {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================
   CF7 SPINNER
========================= */

.rattil-trial-form .wpcf7-spinner {
    position: absolute;

    right: 12px;
    top: 50%;

    margin: 0;

    transform: translateY(-50%);
}


/* =========================
   VALIDATION
========================= */

.rattil-trial-form .wpcf7-not-valid {
    border-color: #dc3232 !important;
}

.rattil-trial-form .wpcf7-not-valid-tip {
    display: block;

    margin-top: 5px;

    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
}


/* =========================
   CF7 RESPONSE MESSAGE
========================= */

.wpcf7 form .wpcf7-response-output {
    width: 100%;
    max-width: 660px;

    margin: 15px auto 0 !important;

    padding: 12px 15px !important;

    border-radius: 8px;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 18px;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 767px) {

    .rattil-trial-form {
        width: 100%;
        max-width: 100%;

        padding: 30px 24px 28px;

        border-radius: 18px;
    }


    .rattil-trial-form .rattil-form-row {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .rattil-trial-form .rattil-submit-wrap {
        margin-top: 28px;
    }


    .rattil-trial-form input[type="submit"],
    .rattil-trial-form .wpcf7-submit {
        width: 100% !important;
        max-width: 100% !important;

        min-height: 62px;

        padding:
            14px
            14px !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .rattil-trial-form {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: auto;
        margin-right: auto;

        padding: 26px 18px 25px;

        border-radius: 16px;
    }


    .rattil-trial-form .rattil-field {
        margin-bottom: 20px;
    }


    .rattil-trial-form .rattil-form-row {
        display: grid;

        grid-template-columns: 1fr;

        gap: 0;

        width: 100%;
        min-width: 0;
    }


    .rattil-trial-form .rattil-form-row .rattil-field {
        margin-bottom: 20px;
    }


    .rattil-trial-form .rattil-form-row .rattil-field:last-child {
        margin-bottom: 0;
    }


    .rattil-trial-form input[type="text"],
    .rattil-trial-form input[type="tel"],
    .rattil-trial-form input[type="email"],
    .rattil-trial-form select {
        width: 100% !important;
        max-width: 100% !important;

        height: 54px;

        padding-left: 17px;

        font-size: 15px;
        line-height: 22px;
    }


    .rattil-trial-form select {
        padding-right: 42px;

        background-position:
            calc(100% - 20px) 23px,
            calc(100% - 15px) 23px;
    }


    .rattil-trial-form .rattil-submit-wrap {
        width: 100%;
        max-width: 100%;

        margin-top: 26px;

        padding: 0;
    }


    .rattil-trial-form input[type="submit"],
    .rattil-trial-form .wpcf7-submit {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: 58px;

        margin: 0 !important;

        padding:
            13px
            12px !important;

        border-radius: 999px !important;
    }


    .rattil-trial-form .rattil-form-note {
        margin-top: 15px;

        padding: 0;

        font-size: 11px;
        line-height: 17px;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 420px) {

    .rattil-trial-form {
        padding:
            24px
            16px;
    }


    .rattil-trial-form label {
        font-size: 12px;
        line-height: 18px;
    }


    .rattil-trial-form input[type="text"],
    .rattil-trial-form input[type="tel"],
    .rattil-trial-form input[type="email"],
    .rattil-trial-form select {
        height: 52px;

        padding-left: 15px;

        font-size: 14px;
    }


    .rattil-trial-form input[type="submit"],
    .rattil-trial-form .wpcf7-submit {
        min-height: 56px;

        padding:
            12px
            10px !important;

        font-size: 14px !important;
    }

}


/* ==========================================================
   VERY NARROW CONTAINER
   لو الفورم داخل Elementor Column ضيق جداً
========================================================== */

@media (max-width: 350px) {

    .rattil-trial-form {
        padding:
            20px
            12px;
    }


    .rattil-trial-form input[type="submit"],
    .rattil-trial-form .wpcf7-submit {
        min-height: 54px;

        padding:
            11px
            8px !important;

        font-size: 12px !important;
    }


    .rattil-trial-form .rattil-form-note {
        font-size: 10px;
        line-height: 15px;
    }

}