/* =================================================
   FORMINATOR RADIO CARD STYLE – RTL (FARSI)
   WITH BORDER + SHADOW (FINAL)
   Module ID: 21
   ================================================= */

/* =========================
   BLACK LIGHT SHADOW 
   OUTER CONTAINER
   ========================= 
#forminator-module-21 .forminator-pagination--content {
    background: #ffffff;
    border: 1.5px solid #e3e8ee;
    border-radius: 20px; 
    padding: 18px 16px 22px;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.08),
        0 18px 34px rgba(0, 0, 0, 0.06);
}*/

/* =========================
   BLUE SOLID SHADOW
   OUTER CONTAINER
   ========================= 
#forminator-module-21 .forminator-pagination--content {
    border: 2px solid #45bdf0;
    box-shadow:
        0 8px 0 rgba(69, 189, 240, 0.9);
}*/

/* =========================
   Force Use Font Family 
   ========================= */
* {
	font-family: 'ShayanWeb-Font', Tahoma, sans-serif !important;
}

/* =========================
   BLACK LIGHT SHADOW
   OUTER CONTAINER
   ========================= */
#forminator-module-21 .forminator-pagination--content {
    background: #ffffff;
    border: 1.5px solid #e3e8ee;
    border-radius: 20px;
    padding: 18px 16px 22px;
    box-shadow:
        -12px 15px 3px 0px rgba(69, 189, 240, 0.6);
}


/* Container */
#forminator-module-21 {
    max-width: 520px;
    margin: 0 auto;
    padding: 10% 0 12px 12px;
}

/* Question title */
#forminator-module-21 .forminator-label {
    display: block;
    background-color: #45bdf0;
    color: #fff;
    padding: 14px 18px;
    border-radius: 14px;
    font-weight: 600;
    margin-bottom: 18px;
    text-align: right;
    box-shadow:
        -2px 2px 12px 1px rgba(69, 189, 240, 0.6);
}

/* Radio group */
#forminator-module-21 .forminator-field-radio .forminator-field {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

/* Hide native input */
#forminator-module-21 .forminator-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* =========================
   RADIO CARD
   ========================= */
#forminator-module-21 .forminator-radio {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
	margin: 8px !important;
    border-radius: 30px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.25s ease;

    /* BORDER + SHADOW (DEFAULT) */
    border: 1.5px solid #c8efff;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.06),
        0 8px 18px rgba(0, 0, 0, 0.04);
}

/* Hover */
#forminator-module-21 .forminator-radio:hover {
    border-color: #45bdf0;
    background-color: #f6fbfe;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.08),
        0 10px 22px rgba(0, 0, 0, 0.06);
}

/* =========================
   SELECTED CARD
   ========================= */
#forminator-module-21
.forminator-radio:has(input:checked) {
    border-color: #45bdf0;
    background-color: #f7fcff;
    box-shadow:
        0 6px 14px rgba(69, 189, 240, 0.25),
        0 14px 30px rgba(69, 189, 240, 0.18);
}

/* Selected label */
#forminator-module-21
.forminator-radio input:checked ~ .forminator-radio-label {
    color: #1a7fb0;
    font-weight: 600;
}

/* =========================
   LETTER CIRCLE (A, B, C…)
   ========================= */
#forminator-module-21 .forminator-radio-bullet {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    border: 2px solid #9fdaf3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #45bdf0;
    background-color: #fff;
    transition: all 0.25s ease;
}

/* Remove default dot */
#forminator-module-21 .forminator-radio-bullet::before {
    display: none;
}

/* Selected bullet */
#forminator-module-21
.forminator-radio input:checked ~ .forminator-radio-bullet {
    background-color: #45bdf0;
    border-color: #45bdf0;
    color: #fff;
    box-shadow: 0 0 0 6px rgba(69, 189, 240, 0.18);
}

/* =========================
   LABEL TEXT
   ========================= */
#forminator-module-21 .forminator-radio-label {
    flex: 1;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    text-align: right;
}

/* =========================
   Buttons
   ========================= */
#forminator-module-21 .forminator-button {
    background-color: #45bdf0;
    color: #fff;
    border-radius: 10px;
    box-shadow: -2px 2px 12px 1px rgba(69, 189, 240, 0.6);
}

/* Hover */
#forminator-module-21 .forminator-button:hover {
    border-color: #45bdf0;
    color: #00579e;
    background-color: #5ec2ec;
    box-shadow: -2px 2px 12px 2px rgba(69, 189, 240, 0.9);
}

/* =========================
   Phone Number
   ========================= */
.forminator-ui.forminator-custom-form[data-design=flat] .forminator-phone  {
    direction: ltr !important;
    text-align: left !important;
    display: flex !important;
	align-items: center !important;
}
[dir=rtl] .forminator-iti-input.iti.iti--allow-dropdown .iti__country-container{
	display: contents !important;
}

[dir=rtl] .forminator-iti-input.iti.iti .iti__selected-dial-code {
    margin-right: 16px !important;
}
/* =========================
   Remove focus border from ALL forminator inputs
   ========================= */
.forminator-input:focus,
.forminator-textarea:focus,
.forminator-select:focus,
.forminator-field--phone:focus,
.forminator-field--text:focus,
.forminator-field--number:focus,
.forminator-field--email:focus,
.forminator-field--textarea:focus,
.forminator-pagination:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
}

/* =========================
   AUTO LETTERS FOR RADIO SELECT
   ========================= */
#forminator-module-21 .forminator-radio:nth-child(2) .forminator-radio-bullet::after { content: "A"; }
#forminator-module-21 .forminator-radio:nth-child(3) .forminator-radio-bullet::after { content: "B"; }
#forminator-module-21 .forminator-radio:nth-child(4) .forminator-radio-bullet::after { content: "C"; }
#forminator-module-21 .forminator-radio:nth-child(5) .forminator-radio-bullet::after { content: "D"; }
#forminator-module-21 .forminator-radio:nth-child(6) .forminator-radio-bullet::after { content: "E"; }
#forminator-module-21 .forminator-radio:nth-child(7) .forminator-radio-bullet::after { content: "F"; }
#forminator-module-21 .forminator-radio:nth-child(8) .forminator-radio-bullet::after { content: "G"; }
#forminator-module-21 .forminator-radio:nth-child(9) .forminator-radio-bullet::after { content: "H"; }
#forminator-module-21 .forminator-radio:nth-child(10) .forminator-radio-bullet::after { content: "I"; }
#forminator-module-21 .forminator-radio:nth-child(11) .forminator-radio-bullet::after { content: "J"; }
#forminator-module-21 .forminator-radio:nth-child(12) .forminator-radio-bullet::after { content: "K"; }
#forminator-module-21 .forminator-radio:nth-child(13) .forminator-radio-bullet::after { content: "L"; }
#forminator-module-21 .forminator-radio:nth-child(14) .forminator-radio-bullet::after { content: "M"; }
#forminator-module-21 .forminator-radio:nth-child(15) .forminator-radio-bullet::after { content: "N"; }

/* =========================
   CHECKBOX CARD STYLING (Same as Radio)
   ========================= */

/* Checkbox container */
#forminator-module-21 .forminator-field-checkbox .forminator-field {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

/* Hide native checkbox */
#forminator-module-21 .forminator-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Checkbox card */
#forminator-module-21 .forminator-checkbox {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    margin: 8px !important;
    border-radius: 30px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    
    /* BORDER + SHADOW (DEFAULT) - SAME AS RADIO */
    border: 1.5px solid #c8efff;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.06),
        0 8px 18px rgba(0, 0, 0, 0.04);
}

/* Checkbox hover */
#forminator-module-21 .forminator-checkbox:hover {
    border-color: #45bdf0;
    background-color: #f6fbfe;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.08),
        0 10px 22px rgba(0, 0, 0, 0.06);
}

/* Selected checkbox card */
#forminator-module-21 .forminator-checkbox:has(input:checked) {
    border-color: #45bdf0;
    background-color: #f7fcff;
    box-shadow:
        0 6px 14px rgba(69, 189, 240, 0.25),
        0 14px 30px rgba(69, 189, 240, 0.18);
}

/* Selected checkbox label */
#forminator-module-21 .forminator-checkbox input:checked ~ .forminator-checkbox-label {
    color: #1a7fb0;
    font-weight: 600;
}

/* =========================
   CHECKBOX BULLET (LETTER CIRCLE)
   ========================= */
#forminator-module-21 .forminator-checkbox-box {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    border: 2px solid #9fdaf3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #45bdf0;
    background-color: #fff;
    transition: all 0.25s ease;
    position: relative;
}

/* Remove default checkbox tick */
#forminator-module-21 .forminator-checkbox-box::before {
    display: none !important;
}

/* Selected checkbox bullet */
#forminator-module-21 .forminator-checkbox input:checked ~ .forminator-checkbox-box {
    background-color: #45bdf0;
    border-color: #45bdf0;
    color: #fff;
    box-shadow: 0 0 0 6px rgba(69, 189, 240, 0.18);
}

/* Checkbox tick icon */
#forminator-module-21 .forminator-checkbox input:checked ~ .forminator-checkbox-box::after {
    content: "✓";
    font-size: 18px;
    font-weight: bold;
    color: white;
}

/* Checkbox label */
#forminator-module-21 .forminator-checkbox-label {
    flex: 1;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    text-align: right;
}

/* =========================
   AUTO LETTERS FOR CHECKBOXES
   Apply letters A, B, C... to checkboxes
   ========================= */
 
/* For first checkbox group (checkbox-1) */
#forminator-module-21 #checkbox-1 .forminator-checkbox:nth-child(2) .forminator-checkbox-box::before { content: "A"; }
#forminator-module-21 #checkbox-1 .forminator-checkbox:nth-child(3) .forminator-checkbox-box::before { content: "B"; }
#forminator-module-21 #checkbox-1 .forminator-checkbox:nth-child(4) .forminator-checkbox-box::before { content: "C"; }
#forminator-module-21 #checkbox-1 .forminator-checkbox:nth-child(5) .forminator-checkbox-box::before { content: "D"; }
#forminator-module-21 #checkbox-1 .forminator-checkbox:nth-child(6) .forminator-checkbox-box::before { content: "E"; }
#forminator-module-21 #checkbox-1 .forminator-checkbox:nth-child(7) .forminator-checkbox-box::before { content: "F"; }
#forminator-module-21 #checkbox-1 .forminator-checkbox:nth-child(8) .forminator-checkbox-box::before { content: "G"; }

/* For second checkbox group (checkbox-2) */
#forminator-module-21 #checkbox-2 .forminator-checkbox:nth-child(2) .forminator-checkbox-box::before { content: "A"; }
#forminator-module-21 #checkbox-2 .forminator-checkbox:nth-child(3) .forminator-checkbox-box::before { content: "B"; }
#forminator-module-21 #checkbox-2 .forminator-checkbox:nth-child(4) .forminator-checkbox-box::before { content: "C"; }
#forminator-module-21 #checkbox-2 .forminator-checkbox:nth-child(5) .forminator-checkbox-box::before { content: "D"; }
#forminator-module-21 #checkbox-2 .forminator-checkbox:nth-child(6) .forminator-checkbox-box::before { content: "E"; }
#forminator-module-21 #checkbox-2 .forminator-checkbox:nth-child(7) .forminator-checkbox-box::before { content: "F"; }

/* =========================
   Error Messages
   ========================= */
.forminator-error-message{
	background-color: #F9E4E8;
    color: #333333;
	font-size: 12px;
    font-family: inherit;
    font-weight: 500;
}
/* =========================
   RTL FIX (FARSI)
   ========================= */
html[dir="rtl"] #forminator-module-21 .forminator-radio {
    flex-direction: row-reverse;
} 

html[dir="rtl"] #forminator-module-21 .forminator-radio-bullet {
    margin-left: 0;
    margin-right: 12px;
} 

/* =========================
   pagination Alignment
   ========================= */
.forminator-pagination-progress {
	display: flex;
    align-items: center;
    flex-direction: column;
	font-size: medium;
}

/* =========================
   FirstPage
   ========================= */
#forminator-custom-form-21--page-0 {
	padding-top: 10px;
}

.forminator-ui.forminator-custom-form[data-design=flat] .forminator-input{
	border: solid 1px rgba(69, 189, 240, 0.9) !important;
	/*border-radius: 0 10px 10px 0 !important;*/
	border-radius: 10px !important;
	padding: 15px !important;
	font-size: medium;
}
#forminator-custom-form-21--page-0 .forminator-pagination--content .forminator-row .forminator-col-12 .forminator-field .forminator-name--field{
	margin-top: 50px;
}

#forminator-custom-form-21--page-0 .forminator-pagination--content{
	background: rgb(69 189 240) !important;
	box-shadow: -2px 3px 20px 0px rgba(69, 189, 240, 0.6) !important;
	position: relative;
}

#forminator-custom-form-21--page-0 .forminator-pagination--content::before {
    content: "";
    background-image: url('Login-Banner.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 100px;
    position: absolute;
    top: -50px; /* Half above, half inside */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* =========================
   Banner
   ========================= */
/* Container styling */
#ash-page-content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Forminator container - takes 70% on desktop */
#ash-page-content .forminator-guttenberg {
    flex: 1 1 70%;
    min-width: 300px;
    order: 2; /* Form comes second in DOM, shows on right */
}

/* Image container - takes 30% on desktop */
#ash-page-content .ash-banner-image {
    flex: 1 1 50%;
    min-width: 250px;
    order: 1; /* Image comes first visually on left */
    background-image: url('/wp-content/uploads/2025/12/footer.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 300px;
}

/* Check if #forminator-custom-form-21--page-0 exists on the page */
body:has(#forminator-custom-form-21--page-0:not([hidden])) .ash-wellcome-image{
    background-image: url('/wp-content/uploads/2025/12/Wellcome.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 150px;
	display: block; /* Show by default */
}

/* Hide by default */
body:has(#forminator-custom-form-21--page-0[hidden]) .ash-wellcome-image,
.ash-wellcome-image {
    display: none;
}

/* =========================
   Banner: Responsive
   ========================= */
/* Desktop: Image on left, Form on right */
@media (min-width: 992px) {
    #ash-page-content {
        flex-wrap: nowrap; /* Prevent wrapping on desktop */
    }
    
    #ash-page-content .ash-banner-image {
        margin-right: 30px;
    }
}

/* Tablet: 50/50 split */
@media (max-width: 992px) and (min-width: 768px) {
    #ash-page-content {
        flex-direction: column;
    }
	#ash-page-content .ash-banner-image {
        order: 3; /* Move image to bottom */
        width: 100%;
        min-height: 200px;
        margin-top: 30px;
    }
}

/* Mobile: Stack vertically (image below form) */

@media (max-width: 767px) {
    #ash-page-content {
        flex-direction: column;
    }
    
    #ash-page-content .ash-banner-image {
        order: 3; /* Move image to bottom  */
        width: 100%;
        min-height: 200px;
        margin-top: 30px;
    }
}
 
/* For very small screens */
@media (max-width: 480px) {
    #ash-page-content .ash-banner-image {
        min-height: 150px;
        margin-top: 20px;
    }
}




/* =========================
   MOBILE
   ========================= */
@media (max-width: 480px) {
    #forminator-module-21 .forminator-radio {
        padding: 12px 14px;
    }

    #forminator-module-21 .forminator-radio-bullet {
        width: 32px;
        height: 32px;
        min-width: 32px; 
        font-size: 14px;
    }

    #forminator-module-21 .forminator-radio-label {
        font-size: 14px;
    }
	
}