/* ==========================================
   Ashtech Presidential Towers - MOBILE VERSION CSS
   Exact Figma Mobile Design Match
   ========================================== */

/* ===== MOBILE BREAKPOINTS ===== */
/* This file applies to screens 768px and below */

@media (max-width: 768px) {

    /* ===== GLOBAL MOBILE RESET ===== */
    body {
        font-size: 14px;
        overflow-x: hidden;
    }

    /* ===== NAVIGATION - MOBILE ===== */
    .navbar {
        padding: 11px 16px !important;
    }

    .navbar .container-fluid {
        padding: 0 !important;
    }

    .navbar-toggler {
        border: none;
        padding: 8px;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    /* Logo size mobile */
    .navbar img {
        width: 100px !important;
        height: auto !important;
    }

    .nav-link-custom {
        font-size: 16px;
        padding: 12px 0;
        display: block;
    }

    .btn-cta {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
        margin-top: 16px;
    }

    /* ===== HERO SECTION - MOBILE ===== */
    .hero-section {
        height: auto !important;
        padding-bottom: 0px;
        position: relative;
        padding-top: 70px !important;
    }

    .hero-subtitle {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .offer-card {
        /* margin-top: 40px; */
        border-radius: 8px;
        background: #4f3312;
        display: flex;
        align-items: center;
    }

    .hero-content {
        padding-top: 30px;
        text-align: center;
        color: #fff;
    }

    .hero-background {
        top: 67px;
    }

    .banner-form-container-parent {
        display: block;
        position: relative;
        z-index: 4;
        margin-top: 0px;
        padding: 0 0px;
    }

    .banner-form-container {
        padding: 22px 18px 20px;
        background:
            radial-gradient(circle at top right, rgba(235, 220, 192, 0.52), transparent 38%),
            linear-gradient(180deg, rgba(113, 84, 28, 0.98) 0%, rgba(85, 63, 21, 0.98) 100%);
    }

    .banner-form-title {
        margin: 0 0 18px !important;
        color: #ffffff;
        font-family: 'Montserrat', serif;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    #banner-form {
        display: grid;
        gap: 14px;
    }

    #banner-form .banner-query-box {
        position: relative;
        margin: 0 !important;
    }

    #banner-form .form-control,
    #banner-form .banner-query-submit {
        border-radius: 16px;
    }

    #banner-form .form-control {
        min-height: 54px;
        padding: 14px 16px;
        border: 1px solid rgba(235, 220, 192, 0.14);
        background: rgba(247, 242, 237, 0.1);
        color: #ffffff;
        font-size: 15px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    #banner-form .form-control::placeholder {
        color: rgba(247, 242, 237, 0.72);
    }

    #banner-form .form-control:focus {
        border-color: rgba(235, 220, 192, 0.42);
        background: rgba(247, 242, 237, 0.14);
        box-shadow: 0 0 0 3px rgba(189, 140, 46, 0.12);
        color: #ffffff;
    }

    #banner-form .form-control[disabled] {
        width: 58px !important;
        min-width: 58px;
        padding: 14px 10px;
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        background: linear-gradient(180deg, rgba(235, 220, 192, 0.18) 0%, rgba(189, 140, 46, 0.14) 100%);
        color: #ebdcc0;
        opacity: 1;
        text-align: center;
    }

    #banner-form .banner-query-box.d-flex {
        align-items: stretch !important;
    }

    #banner-form .banner-query-box.d-flex .banner-query-text {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    #banner-form .banner-query-box[style*="display: flex"] {
        gap: 10px;
        margin: 2px 0 2px !important;
        align-items: flex-start !important;
    }

    #banner_checkbox {
        width: 18px;
        height: 18px;
        margin-top: 2px;
        accent-color: #bd8c2e;
        flex-shrink: 0;
    }

    #banner-form .sidecondition-label {
        color: rgba(247, 242, 237, 0.82);
        font-size: 13px;
        line-height: 1.5;
        cursor: pointer;
    }

    #banner-form .sidecheck-box {
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        padding: 12px 14px;
        border-radius: 14px;
        background: #ffffff;
        color: #4f3312;
        font-size: 12px;
        line-height: 1.5;
        box-shadow: 0 16px 28px rgba(8, 4, 3, 0.22);
        z-index: 5;
    }

    #banner-form .banner-query-submit {
        width: 100%;
        min-height: 54px;
        border: 0;
        background: linear-gradient(135deg, #ebdcc0 0%, #d1ae6d 45%, #bd8c2e 100%);
        color: #4f3312;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        box-shadow: 0 16px 28px rgba(189, 140, 46, 0.26);
    }

    #banner-form .banner-query-submit:disabled {
        opacity: 0.55;
        box-shadow: none;
    }

    #banner-form .bannerbuttonload {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    #banner-form .error-banner {
        display: none;
        margin-top: 8px;
        color: #f6c8c8;
        font-size: 12px;
        line-height: 1.4;
    }

    .map-container,
    .map-placeholder {
        min-height: 340px;
    }

    .map-placeholder {
        padding: 32px 20px;
    }

    .map-placeholder-title {
        font-size: 24px;
    }

    .map-placeholder-copy {
        font-size: 16px;
    }

    .mobile-nav {
        gap: 20px;
        flex-wrap: nowrap !important;
    }

    .rera-info p {
        color: white;
        font-size: 12px;
        margin: 0;
        padding-right: 0px;
        text-align: center;
    }

    .location-badge {
        display: inline-flex;
        align-items: center;
        margin-bottom: 350px;
        gap: 10px;
        padding: 0px;
        background: none;
    }

    .offer-percentage,
    .offer-scheme {
        color: #FFF;
        text-align: center;
        font-size: 40px;
        font-style: normal;
        letter-spacing: 1.2px;
    }

    .offer-label {
        color: #FFF;
        text-align: center;
        font-family: Poppins;
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: capitalize;
    }

    .offer-percentage,
    .offer-scheme {
        color: #FFF;
        text-align: center;
        font-size: 40px;
        font-style: normal;
        letter-spacing: 1.2px;
    }

    .offer-divider {
        transform: rotate(90deg);
    }

    .rera-info {
        padding-right: 0px;
        margin-top: 10px;
    }

    .key-features-row {
        grid-template-columns: repeat(2, 1fr);
        padding: 0px;
        border-radius: 0px;
        margin-top: 0px;
        gap: 10px;
        background: none;
        width: 100%;
    }

    #banner-details {
        background: #715520;
        padding: 50px 10px 0px;
    }

    .feature-item {
        text-align: center;
        color: white;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        padding: 16px;
        max-width: 100%;
        border-radius: 15px;
        min-width: 100%;
    }

    .aboutus-mobile-img {
        border-radius: 15px;
        width: 100%;
    }

    .about-content {
        padding: 30px 0px 0px;
        position: relative;
    }

    #highlights .container-fluid,
    #plans .container-fluid {
        padding: 0px !important;
    }

    .features-list li {
        font-size: 15px;
        padding: 0px;
        padding-left: 20px;
        position: relative;
        text-align: justify;
    }

    .features-content {
        background-color: #ffffff;
    }

    .location-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .amenity-tabs {
        position: absolute;
        bottom: 30px;
        left: 10px;
        display: flex;
        gap: 24px;
        background: rgba(0, 0, 0, 0.7);
        padding: 24px 32px;
        border-radius: 16px;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        top: auto;
        transform: none;
        width: 100%;
        justify-content: start;
    }

    .amenity-tabs::-webkit-scrollbar {
        height: 6px;
    }

    .amenity-tabs::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 10px;
    }

    .amenities-item {
        flex-basis: 43%;
        border-radius: 8px;
        border: 1px solid #c79d4d;
        padding: 32px 11px;
    }

    .btn-site-visit {
        position: fixed;
        bottom: 0px;
        right: 0px;
        top: auto;
        transform: none;
        border-radius: 0px;
        left: 0px;
        text-align: center;
        justify-content: center;
    }

    .thank-you-container {
        width: 100%;
        padding: 0px 10px;
    }

    .input-group-text {
        border-bottom: 0px;
    }

    .modal-content {
        padding-right: 0px !important;
    }

    .about-content p {
        text-align: justify;
        font-size: 14px;
    }

    .about-section {
        padding: 30px 0px;
    }
}

/* ===== MOBILE TOUCH FEEDBACK ===== */
@media (max-width: 768px) {

    button:disabled,
    .btn:disabled {
        cursor: not-allowed !important;
    }

    button:active,
    .btn:active,
    a:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    /* Better tap targets */
    .location-tab,
    .amenity-tab {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    /* Remove hover effects on mobile */
    button:hover,
    .btn:hover,
    a:hover {
        transform: none;
        filter: none;
    }

    .modal-close {
        top: 15px !important;
        right: 15px !important;
    }
}

/* ===== MOBILE SCROLLBAR STYLING ===== */
@media (max-width: 768px) {

    .amenity-tabs::-webkit-scrollbar {
        width: 6px;
    }

    .amenity-tabs::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
    }

    .amenity-tabs::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
    }

    .amenity-tabs::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
    }

}

/* ===== MOBILE FORM ENHANCEMENTS ===== */
@media (max-width: 768px) {

    /* Make form inputs more mobile-friendly */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        font-size: 16px !important;
        /* Prevents zoom on iOS */
        -webkit-appearance: none;
        appearance: none;
    }

    /* Better focus states */
    .form-control-custom:focus {
        border-bottom-width: 2px;
    }

}

@media (min-width: 768px) and (max-width: 1366px) {
    .features-list li {
        font-size: 14px;
        padding: 5px 0;
        padding-left: 32px;
        position: relative;
    }

    .features-title {
        font-size: 32px;
        margin-bottom: 10px;
        color: var(--primary-green);
    }

    .features-title,
    .contact-title,
    .section-title,
    .floor-plans-title {
        font-size: 26px;
        font-weight: 800;
    }

    .navbar-nav .nav-link,
    .feature-item p {
        font-size: 16px;
    }

    .feature-item h6 {
        font-size: 21px;
        font-weight: 500;
        margin-bottom: 8px;
    }
}


@media (min-width: 1367px) and (max-width: 1660px) {
    .features-list li {
        font-size: 16px;
        padding: 10px 0;
        padding-left: 32px;
        position: relative;
    }

    .features-title,
    .contact-title,
    .section-title,
    .floor-plans-title {
        font-size: 26px;
        font-weight: 800;
    }
}

/* ===== END OF MOBILE CSS ===== */