/* ==========================================================================
   Ride07 Taxi Services - Custom Mobile Responsiveness Fixes
   ========================================================================== */

/* ----------------------------------------------------
   1. Global UI & Utilities
   ---------------------------------------------------- */

/* Google Recaptcha Scaling for Extra-Small Mobile Screens (e.g. 320px iPhone SE) */
@media (max-width: 350px) {
    .g-recaptcha {
        transform: scale(0.77);
        transform-origin: left top;
        display: inline-block;
    }
    .g-recaptcha-wrapper {
        height: 60px;
        overflow: hidden;
    }
}

/* Responsive Borders for Trust Badges Section */
.trust-badge-col {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.trust-badge-col:last-child {
    border-bottom: none;
}
@media (min-width: 768px) {
    .trust-badge-col {
        border-bottom: none;
    }
    /* Grid layout on tablet (2x2) */
    .trust-badge-col:nth-child(odd) {
        border-right: 1px solid rgba(0, 0, 0, 0.08);
    }
    .trust-badge-col:nth-child(1),
    .trust-badge-col:nth-child(2) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
}
@media (min-width: 992px) {
    /* Row layout on desktop (1x4) */
    .trust-badge-col {
        border-bottom: none !important;
    }
    .trust-badge-col:not(:last-child) {
        border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    }
    .trust-badge-col:nth-child(2) {
        border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    }
}

/* ----------------------------------------------------
   2. Navigation Header & Logo
   ---------------------------------------------------- */

/* Adjust header spacing on smaller screens */
@media (max-width: 576px) {
    .main-navbar-header .navbar {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    .site-logo {
        max-height: 48px !important;
    }
}

/* ----------------------------------------------------
   3. Trust & Conversion Sections
   ---------------------------------------------------- */

/* Adjust padding on the call-to-action wrapper card on mobile */
@media (max-width: 767px) {
    .tc-cta-wrapper {
        padding: 30px 20px !important;
        border-radius: 12px !important;
    }
    .tc-cta-title {
        font-size: 26px !important;
    }
    .tc-cta-subtitle {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }
    .tc-cta-list {
        margin-bottom: 20px !important;
    }
}

/* ----------------------------------------------------
   4. Footer Links Alignment Fix
   ---------------------------------------------------- */

/* 
   Explicitly align footer links as flex-row. This fixes the gap issue 
   where icons aligned far left and text centered on mobile, keeping 
   them inline and aligned properly.
*/
.footer-links li a {
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    padding: 6px 0;
}
.footer-links li a i {
    flex-shrink: 0;
    margin-right: 8px !important;
}

/* ----------------------------------------------------
   5. Admin Panel Dashboard Responsiveness
   ---------------------------------------------------- */

@media (max-width: 991px) {
    /* Stack brand and controls vertically */
    .admin-header .container-fluid {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
}

@media (max-width: 767px) {
    /* Stack filter elements on mobile */
    .header-controls {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    .filter-form {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 10px !important;
    }
    
    .search-input, 
    .date-select {
        width: 100% !important;
    }
    
    #header_custom_dates {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
    }
    
    #header_custom_dates input {
        width: 100% !important;
    }
    
    .divider {
        display: none !important;
    }
    
    .admin-main {
        padding: 16px 12px !important;
    }
    
    /* Make table scrollable container visible */
    .table-responsive {
        border-radius: 4px !important;
    }
}