.tav-pdn-main-form {
    background-color: var(--tav-pdn-form-background-color);
    border: 1px solid #ddd;
    padding: 15px;
    margin: 15px 0;
    border-radius: 10px;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.15);
    direction: inherit; /* Set form direction to RTL */
    text-align: inherit; /* Align text to the right */
    font-family: inherit; /* Inherit the website's font */
    
}

/* Responsive adjustments */
@media screen and (max-width: 1024px) {
    .tav-pdn-main-form {
        padding: 20px;
        margin: 10px 0;
    }
}

@media screen and (max-width: 768px) {
    .tav-pdn-main-form {
        padding: 15px;
        box-shadow: none;
    }
}

@media screen and (max-width: 480px) {
    .tav-pdn-main-form {
        padding: 10px;
        border-radius: 5px;
    }
}


/* OTP Button */
@media screen and (max-width: 480px) {
    .tav-pdn-otp-button {
        padding: 7px 7px !important;
        font-size: 13px !important;
    }
}

.tav-pdn-input-group {
    flex: 0 0 100%; /* عرض کامل در دسکتاپ */
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1024px) { /* حالت تبلت */
    .tav-pdn-input-group {
        flex: 0 0 100%; /* عرض 50% در تبلت */
        max-width: 100%;
    }
}

@media (max-width: 768px) { /* حالت موبایل */
    .tav-pdn-input-group {
        flex: 0 0 100%; /* عرض کامل در موبایل */
        max-width: 100%;
    }
}
@media (max-width: 480) { /* حالت موبایل */
    .tav-pdn-input-group {
        flex: 0 0 100%; /* عرض کامل در موبایل */
        max-width: 100%;
    }
}

@media (max-width: 1024px) {
    .tav-pdn-input-group-elementor {
        flex: 0 0 100% !important;
    }
}
@media (max-width: 767px) {
    .tav-pdn-input-group-elementor {
        flex: 0 0 100% !important;
    }
}
@media (max-width: 480px) {
    .tav-pdn-input-group-elementor {
        flex: 0 0 100% !important;
    }
}

.tav-pdn-input-group-elementor {
    width: 100% !important;
}


.tav-pdn-input{
    direction: inherit; /* Inherit the direction from the page */
    text-align: inherit; /* Align text accordingly */
    font-family: inherit;
}

.tav-pdn-subscription-form {
    padding: 15px;
    margin: 15px 0;
    border-radius: 10px;
    direction: inherit; /* Inherit the direction from the page */
    text-align: inherit; /* Align text accordingly */
    font-family: inherit;
    color: var(--tav-pdn-form-text-color);
}

/* For mobile */
@media screen and (max-width: 768px) {
    .tav-pdn-subscription-form {
        padding: 5px !important;
    }
}

/* Form headings styling */
.tav-pdn-subscription-form h3, .tav-pdn-subscription-form p {
    text-align: inherit;
    font-family: inherit;
    font-size: 20px !important;;
    color: var(--tav-pdn-form-text-color);
}

/* Responsive adjustments */
@media screen and (max-width: 1024px) {
    .tav-pdn-subscription-form h3 {
        font-size: 20px !important;;
    }
    .tav-pdn-subscription-form p {
        font-size: 16px !important;;
    }
}

@media screen and (max-width: 768px) {
    .tav-pdn-subscription-form h3 {
        font-size: 18px !important;;
    }
    .tav-pdn-subscription-form p {
        font-size: 14px !important;
    }
    .tav-pdn-subscription-form label {
    display: block;
    margin-bottom: 10px;
    padding-top: 5px;
    font-size: 16px;
    font-weight: bold;
    color: var(--tav-pdn-form-text-color);
    font-family: inherit;
}
}

@media screen and (max-width: 480px) {
    .tav-pdn-subscription-form h3 {
        font-size: 16px !important;;
    }
    .tav-pdn-subscription-form p {
        font-size: 12px !important;;
    }
}
/* Labels styling */
.tav-pdn-subscription-form label {
    display: block;
    margin-bottom: 10px;
    padding-top: 5px;
    font-size: 16px;
    font-weight: bold;
    color: var(--tav-pdn-form-text-color);
    font-family: inherit;
}

/* Input fields styling */
.tav-pdn-subscription-form input[type="email"],
.tav-pdn-subscription-form input[type="number"],
.tav-pdn-subscription-form input[type="tel"],
.tav-pdn-subscription-form input[type="text"],
.tav-pdn-subscription-form select {
    width: 100%;
    text-align: inherit; /* Align text according to the direction */
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-family: inherit;
    height: 50px;
    font-size: 14px;
    color: var(--tav-pdn-form-text-color);
}


/* Submit button styling */
.tav-pdn-subscription-form input[type="submit"] {
    background-color: var(--submit-button-bg);
    color: var(--submit-button-color);
    border: none;
    padding: var(--submit-button-padding);
    font-size: var(--submit-button-font-size);
    cursor: pointer;
    border-radius: var(--submit-button-border-radius);
    text-align: center;
    font-family: inherit;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.tav-pdn-subscription-form input[type="submit"]:hover {
    background-color: var(--submit-button-hover-bg);
    transform: scale(1.05);
}

/* Default styling for desktop (unchanged) */
#tav-pdn-open-modal {
    display: inline-block;
    background-color: var(--tav-pdn-button-background-color);
    color: var(--tav-pdn-button-text-color);
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    text-align: inherit;
    font-family: inherit;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px 0px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

/* For tablets (768px to 1024px) */
@media screen and (max-width: 1024px) {
    #tav-pdn-open-modal {
        padding: 10px 20px; /* Smaller padding */
        font-size: 14px; /* Slightly smaller font size */
        margin: 8px 0px; /* Reduced margin */
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); /* Slightly lighter shadow */
    }
}

/* For mobile screens (up to 768px) */
@media screen and (max-width: 768px) {
    #tav-pdn-open-modal {
        padding: 8px 15px; /* Smaller padding for smaller screens */
        font-size: 12px; /* Smaller font size for better fit */
        border-radius: 4px; /* Slightly reduced border-radius */
        margin: 6px 0px; /* Smaller margin */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Lighter shadow */
    }
}

/* For small mobile screens (up to 480px) */
@media screen and (max-width: 480px) {
    #tav-pdn-open-modal {
        padding: 6px 10px; /* Compact padding */
        font-size: 10px; /* Smallest font size */
        border-radius: 3px; /* Minimal rounding */
        margin: 5px 0px; /* Minimal margin */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    }
}


#tav-pdn-open-modal:hover {
    background-color: var(--tav-pdn-button-hover-background-color);
    color: var(--tav-pdn-button-hover-text-color);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Modal styling */
.tav-pdn-modal {
    display: none; /* Hidden initially */
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    /* Center children */
    /* display set via JS when opening */
    align-items: center;
    justify-content: center;
    padding: 16px; /* small gutter on mobile */
    box-sizing: border-box;
}

/* Modal content styling */
.tav-pdn-modal-content {
    position: relative;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    background-color: var(--tav-pdn-modal-background-color);
    color: var(--tav-pdn-modal-text-color);
    border: 1px solid #888 !important;
    width: 100%;
    max-width: 550px !important;
    border-radius: 10px !important;
    direction: inherit;
    text-align: inherit;
    font-family: inherit;
    padding: 24px;
    margin: 0; /* remove centering margin */
}

/* Close icon inside modal */
.tav-pdn-modal-content .tav-pdn-close {
    position: absolute;
    top: 10px;
    inset-inline-end: 12px; /* supports RTL/LTR */
    font-size: 22px;
    line-height: 1;
    color: #999;
    cursor: pointer;
}
.tav-pdn-modal-content .tav-pdn-close:hover { color: #333; }

/* Tablet */
@media screen and (max-width: 1024px) {
    .tav-pdn-modal-content {
        max-width: 600px;
        padding: 24px;
    }
}

/* Mobile */
@media screen and (max-width: 768px) {
    .tav-pdn-modal {
        padding: 12px;
    }
    .tav-pdn-modal-content {
        width: 100% !important;
        max-width: 560px !important;
        padding: 20px !important;
    }
}

@media screen and (max-width: 480px) {
    .tav-pdn-modal {
        padding: 10px;
    }
    .tav-pdn-modal-content {
        width: 100% !important;
        max-width: 420px !important;
        padding: 18px !important;
    }
}


/* Close button styling */
.tav-pdn-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.tav-pdn-close:hover,
.tav-pdn-close:focus {
    color: black;
    text-decoration: none;
}

@media screen and (max-width: 768px) {
    .tav-pdn-close {
        font-size: 24px;
    }
}

@media screen and (max-width: 480px) {
    .tav-pdn-close {
        font-size: 20px;
    }
}


.tav-pdn-modal-content h3 {
    direction: inherit; /* Right-to-left direction */
    text-align: inherit;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
}



.tav-pdn-close:hover,
.tav-pdn-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}




.tav-pdn-modal-trigger-text {
    margin: 10px 0px;
    cursor: pointer;
    color: inherit; /* Text color */
    font-family: inherit;
}