/* =========================================================
   Mobile Responsive Fixes - VisaTitans
   Comprehensive mobile UI fixes for buttons, spacing & layout
   ========================================================= */

/* ===== 1. HEADER / NAVIGATION FIXES ===== */

/* Login/Register button: prevent overflow on small screens */
@media (max-width: 480px) {
    .header .btn-login {
        font-size: 11px !important;
        padding: 6px 10px !important;
        white-space: nowrap;
    }
    
    .header .btn-login .fas {
        display: none; /* Hide icon on very small screens to save space */
    }
    
    .header .nav_topbar .navbar-brand img {
        width: 120px !important;
    }
    
    .header .d-flex.zoom80 {
        gap: 4px !important;
    }
    
    .header .user {
        height: 32px !important;
        width: 32px !important;
    }
    
    .header .user img {
        width: 32px !important;
        height: 32px !important;
    }
}

@media (max-width: 380px) {
    .header .btn-login {
        font-size: 10px !important;
        padding: 5px 8px !important;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Mobile navbar: ensure overlay doesn't block content */
@media (max-width: 1199px) {
    .navbar-collapse.show {
        overflow-y: auto;
        padding-bottom: 20px;
    }
    
    .navbar-collapse .navbar-nav .nav-item {
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    
    .navbar-collapse .nav-button {
        padding: 15px 20px;
    }
}

/* ===== 2. HOMEPAGE FIXES ===== */

/* Hero section text overflow on very small screens */
@media (max-width: 414px) {
    .home-index .best-visa h1,
    .home-index .best-visa h2 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
    
    .home-index .best-visa p {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
}

/* Visa search form tabs: prevent overflow */
@media (max-width: 480px) {
    .home-index2 .nav-tabs {
        flex-wrap: wrap;
        gap: 4px;
        justify-content: center !important;
    }
    
    .home-index2 .nav-tabs .nav-item {
        margin: 2px !important;
    }
    
    .home-index2 .nav-tabs .nav-item button {
        font-size: 11px !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
    }
    
    .home-index2 input.submit_btn {
        font-size: 13px !important;
        padding: 12px 16px !important;
        width: 100% !important;
    }
}

/* Success story counters: fix font size for small screens */
@media (max-width: 480px) {
    .our_story .fs-50,
    .our_story [data-kt-countup] {
        font-size: 28px !important;
    }
    
    .our_story h3 {
        font-size: 13px !important;
    }
}

/* Requested visas cards: fix image and text overflow */
@media (max-width: 414px) {
    .requested-visas .image {
        height: 120px !important;
    }
    
    .requested-visas .card_heading {
        font-size: 14px !important;
    }
    
    .requested-visas p {
        font-size: 12px !important;
    }
}

/* Blog section on homepage */
@media (max-width: 480px) {
    .home-index-6 .visa-blog-anchor {
        font-size: 14px !important;
    }
    
    .home-index-6 .anchor {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
}

/* ===== 3. LANDING PAGE / VISA DETAILS FIXES ===== */

/* Req step sections: fix bookmark label and radio alignment */
@media (max-width: 767px) {
    .inner-sec-4 .req_step {
        padding: 12px !important;
    }
    
    .inner-sec-4 .req_step .bookmark {
        width: 100% !important;
        margin-bottom: 10px;
    }
    
    .inner-sec-4 .req_step .bookmark .bookmark_text {
        font-size: 13px !important;
    }
    
    /* Radio buttons: ensure proper wrapping */
    .inner-sec-4 .req_step .gap-10 {
        gap: 10px !important;
        flex-wrap: wrap;
    }
    
    .inner-sec-4 .req_step .form-check {
        min-width: auto !important;
    }
    
    .inner-sec-4 .req_step .form-check label {
        font-size: 12px !important;
    }
}

/* Apply button: fix overlap with footer */
@media (max-width: 767px) {
    .view_all.apply_btn a {
        bottom: 15px !important;
        z-index: 9999 !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
        border-radius: 8px !important;
    }
    
    /* Give footer padding to not be hidden behind fixed apply button */
    .footer {
        padding-bottom: 70px !important;
    }
}

/* ===== 4. LOGIN / REGISTER PAGE FIXES ===== */

/* Auth tabs: fix on small screens */
@media (max-width: 414px) {
    .auth-tabs .auth-tab {
        font-size: 14px !important;
        padding: 12px 10px !important;
    }
    
    .auth-title {
        font-size: 28px !important;
    }
}

/* Registration form: email + verification code layout */
@media (max-width: 576px) {
    .auth-form-col .input-group {
        flex-wrap: wrap;
    }
    
    .auth-form-col .input-group input {
        border-radius: 30px !important;
        margin-bottom: 8px;
    }
    
    .auth-form-col .input-group .btn {
        width: 100%;
        border-radius: 30px !important;
    }
    
    #email-verification-section .input-group {
        flex-wrap: wrap;
    }
    
    #email-verification-section .input-group input {
        border-radius: 8px !important;
        margin-bottom: 8px;
    }
    
    #email-verification-section .input-group .btn {
        width: 100%;
        border-radius: 8px !important;
    }
    
    /* Password strength text */
    .password-strength-text {
        font-size: 11px !important;
    }
}

/* Terms & conditions checkbox alignment */
@media (max-width: 480px) {
    .form-check.d-flex {
        gap: 10px;
    }
    
    .form-check-label {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
}

/* ===== 5. DYNAMIC VISA FORM FIXES ===== */

/* Quick start card header: prevent button overflow */
@media (max-width: 576px) {
    .quick-start-header .d-flex.align-items-center.gap-2 {
        flex-wrap: wrap;
        width: 100%;
        gap: 8px !important;
    }
    
    .quick-start-header .btn-scan-passport {
        width: 100%;
        font-size: 13px !important;
        padding: 8px 12px !important;
    }
    
    .quick-start-duration-badge {
        width: 100%;
        text-align: center;
    }
    
    .quick-start-title {
        font-size: 16px !important;
    }
    
    .quick-start-subtitle {
        font-size: 13px !important;
    }
}

/* Quick start grid: single column on very small screens */
@media (max-width: 480px) {
    .quick-start-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* Form action buttons: ensure no overlap and proper spacing */
@media (max-width: 768px) {
    .form-actions {
        position: relative !important; /* Override sticky on mobile to prevent overlap */
        margin-bottom: 20px;
    }
    
    .form-actions .d-flex {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    
    .form-actions .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
    
    /* Hide less important buttons on very small screens to reduce clutter */
    .form-actions .btn-outline-secondary#cancelBtn,
    .form-actions .btn-outline-warning#cancelEditBtn {
        order: 10; /* Push to bottom */
    }
}

/* Optional banner: fix on mobile */
@media (max-width: 480px) {
    .vt-optional-banner {
        padding: 10px !important;
        font-size: 13px !important;
    }
    
    .vt-optional-banner-inner {
        flex-direction: column;
        text-align: center;
        gap: 6px;
    }
}

/* Form progress steps: already handled but ensure spacing */
@media (max-width: 480px) {
    .form-progress-wrapper {
        padding: 12px 8px !important;
    }
    
    .step-item {
        gap: 8px !important;
    }
    
    .step-circle {
        width: 40px !important;
        height: 40px !important;
    }
    
    .step-circle i {
        font-size: 1rem !important;
    }
    
    .step-title {
        font-size: 12px !important;
    }
    
    .step-subtitle {
        font-size: 10px !important;
    }
}

/* Saved applicants on mobile */
@media (max-width: 480px) {
    .applicant-card-header {
        padding: 10px !important;
    }
    
    .applicant-btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
    
    .applicant-name {
        font-size: 14px !important;
    }
}

/* ===== 6. ACCOUNT DASHBOARD FIXES ===== */

/* Account sidebar on mobile: make it a horizontal scrollable bar */
@media (max-width: 992px) {
    .account-sidebar {
        padding: 15px !important;
    }
    
    .account-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .account-nav-item {
        flex: 0 0 auto;
        margin-bottom: 0 !important;
    }
    
    .account-nav-link {
        padding: 8px 12px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }
    
    .account-nav-link i {
        font-size: 14px !important;
    }
}

/* Account content: reduce padding on mobile */
@media (max-width: 576px) {
    .account-content {
        padding: 15px !important;
    }
    
    .account-content-title {
        font-size: 22px !important;
    }
}

/* Dashboard hero tiles: fix text overflow */
@media (max-width: 480px) {
    .vt-hero-tile {
        padding: 14px 16px !important;
    }
    
    .vt-hero-tile__value {
        font-size: 24px !important;
    }
    
    .vt-hero-tile__label {
        font-size: 12px !important;
    }
    
    .vt-hero-tile__icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
}

/* Attention needed: ensure button doesn't overflow */
@media (max-width: 480px) {
    .vt-attention-item {
        padding: 12px !important;
    }
    
    .vt-attention-item__action .vt-btn {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
    
    .vt-attention-item__country {
        font-size: 14px !important;
    }
}

/* Draft items: fix alignment */
@media (max-width: 480px) {
    .vt-draft-item {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    
    .vt-draft-item .vt-btn {
        width: 100%;
        text-align: center;
    }
}

/* ===== 7. APPLICANT PROFILE PAGE FIXES ===== */

@media (max-width: 576px) {
    .applicant-header {
        padding: 20px 15px !important;
        gap: 15px !important;
    }
    
    .applicant-name-large {
        font-size: 20px !important;
    }
    
    .applicant-type-large {
        font-size: 13px !important;
    }
    
    .applicant-avatar-large {
        width: 70px !important;
        height: 70px !important;
        font-size: 28px !important;
    }
    
    .applicant-header-actions .btn {
        font-size: 13px !important;
        padding: 10px 16px !important;
    }
    
    /* Quick summary: 2 columns with smaller gaps */
    .quick-summary {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .summary-card {
        padding: 12px !important;
    }
    
    .summary-card-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
    
    .summary-card-label {
        font-size: 10px !important;
    }
    
    .summary-card-value {
        font-size: 13px !important;
    }
    
    /* Info cards */
    .info-card {
        padding: 16px !important;
    }
    
    .info-card-title {
        font-size: 15px !important;
    }
    
    .info-item {
        gap: 10px !important;
        padding: 10px 0 !important;
    }
    
    .info-item-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }
    
    .info-item-label {
        font-size: 11px !important;
    }
    
    .info-item-value {
        font-size: 13px !important;
    }
    
    /* Dynamic sections */
    .dynamic-section-header {
        padding: 12px 14px !important;
    }
    
    .dynamic-section-title {
        font-size: 14px !important;
    }
    
    .dynamic-section-content {
        padding: 14px !important;
    }
    
    .dynamic-field {
        padding: 10px 12px !important;
    }
    
    .dynamic-field-label {
        font-size: 11px !important;
    }
    
    .dynamic-field-value {
        font-size: 13px !important;
    }
    
    /* Application items */
    .application-item {
        padding: 12px !important;
    }
    
    .application-item-title {
        font-size: 14px !important;
    }
    
    .application-item-ref {
        font-size: 11px !important;
    }
}

/* ===== 8. PAYMENT SUMMARY FIXES ===== */

@media (max-width: 576px) {
    .payment-summary-container {
        padding: 80px 12px 20px !important;
    }
    
    .summary-card {
        padding: 20px 15px !important;
    }
    
    .summary-card h3 {
        font-size: 18px !important;
    }
    
    /* Coupon input: stack vertically */
    .coupon-input-group {
        flex-wrap: wrap !important;
    }
    
    .coupon-input-group input {
        width: 100% !important;
        flex: none !important;
        margin-bottom: 8px;
    }
    
    .coupon-input-group button {
        width: 100% !important;
        padding: 12px 20px !important;
    }
    
    /* Order summary: fix font sizes */
    .order-summary-item .label {
        font-size: 14px !important;
    }
    
    .order-summary-item .value {
        font-size: 14px !important;
    }
    
    .order-summary-item.total .label {
        font-size: 16px !important;
    }
    
    .order-summary-item.total .value {
        font-size: 18px !important;
    }
    
    /* Payment method options: single column */
    .payment-method-options {
        flex-direction: column !important;
    }
    
    .payment-method-option {
        min-width: auto !important;
        width: 100%;
    }
    
    .payment-method-option .icon {
        font-size: 32px !important;
    }
    
    .payment-method-option .title {
        font-size: 15px !important;
    }
    
    /* Cash payment methods: single column */
    .cash-payment-methods {
        grid-template-columns: 1fr !important;
    }
    
    /* Action buttons */
    .action-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .action-buttons button {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
    }
}

/* ===== 9. BLOG PAGES FIXES ===== */

@media (max-width: 576px) {
    .blog-detail-2 .user_detail {
        width: 100% !important;
    }
    
    .blog-detail-3 {
        padding-inline: 10px !important;
    }
    
    .blog-detail-3 img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    .blog-detail-4 .comment {
        padding: 12px !important;
    }
}

/* ===== 10. FOOTER FIXES ===== */

@media (max-width: 480px) {
    .footer .contact-list li {
        margin-bottom: 10px;
    }
    
    .footer .contact-list li a {
        font-size: 12px !important;
    }
    
    .footer .foot-copyright p {
        font-size: 12px !important;
    }
    
    .footer .social-icons {
        gap: 6px !important;
    }
}

/* ===== 11. COOKIE MODAL FIXES ===== */

@media (max-width: 576px) {
    .cookiesModal .modal-dialog {
        margin: 10px !important;
    }
    
    .cookiesModal .modal-content {
        margin-top: auto;
        margin-bottom: 15px;
    }
    
    .cookiesModal .modal-body {
        font-size: 13px !important;
        padding: 15px !important;
        line-height: 1.5 !important;
    }
    
    .cookiesModal .modal-footer {
        padding: 10px 15px 15px !important;
    }
    
    .cookiesModal .modal-footer .btn {
        width: 100%;
        padding: 12px !important;
        font-size: 14px !important;
    }
}

/* ===== 12. DOCUMENT UPLOAD PAGE FIXES ===== */

@media (max-width: 576px) {
    .upload_doc .btn_parent {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .upload_doc .files,
    .upload_doc .button1 {
        width: 100% !important;
        text-align: center !important;
    }
    
    .upload_doc .blue_btn,
    .upload_doc .button1.orange {
        width: 100% !important;
        font-size: 13px !important;
    }
}

/* ===== 13. CONTACT PAGE FIXES ===== */

@media (max-width: 576px) {
    .contact-sec-2 .contact_form {
        padding: 15px !important;
    }
    
    .contact-sec-2 .slider_text h5 {
        font-size: 14px !important;
    }
}

/* ===== 14. DESTINATION / COUNTRY SELECTION FIXES ===== */

@media (max-width: 480px) {
    .destination-sec-3 .country_list .country {
        width: 100% !important;
    }
    
    .destination-sec-3 .filter_list {
        max-width: 100% !important;
    }
    
    .destination_form {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

/* ===== 15. SERVICES LISTING FIXES ===== */

@media (max-width: 576px) {
    .inner-sec-3 .Cust-card,
    .inner-sec-5 .Cust-card {
        width: 100% !important;
        min-height: auto !important;
        padding: 12px !important;
    }
    
    .Cust-card-wrapper {
        gap: 10px !important;
    }
}

/* ===== 16. GENERAL UTILITY FIXES ===== */

/* Prevent horizontal overflow globally */
body {
    overflow-x: hidden;
}

/* Ensure content images are responsive (exclude icons and flags) */
.blog-detail-3 img,
.blog_description img,
.account-content img,
.privacy-sec-2 img,
.terms-sec-2 img,
.inner-sec-content img {
    max-width: 100%;
    height: auto;
}

/* Fix select2 containers on mobile */
@media (max-width: 576px) {
    .select2-container {
        width: 100% !important;
    }
    
    .select2-container .select2-selection--single {
        height: 44px !important;
    }
}

/* Touch-friendly: ensure minimum touch target size for primary action elements */
@media (max-width: 768px) {
    .form-actions button,
    .form-actions .btn,
    .auth-form-col .btn,
    .account-content .btn,
    .payment-summary-container .btn,
    .upload_doc .btn,
    input[type="submit"] {
        min-height: 44px;
    }
    
    .form-check-input[type="radio"],
    .form-check-input[type="checkbox"] {
        min-height: 20px;
        min-width: 20px;
    }
}

/* Fix overflow for long text on mobile */
@media (max-width: 576px) {
    .text-truncate-mobile {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Prevent table overflow in content areas */
    .blog-detail-3 table,
    .blog_description table,
    .privacy-sec-2 table,
    .terms-sec-2 table,
    .account-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix long URLs and text */
    .blog-detail-3,
    .blog_description,
    .privacy-sec-2,
    .terms-sec-2 {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* ===== 17. APPLICATION SUBMITTED PAGE FIXES ===== */

@media (max-width: 576px) {
    .application-submitted-container {
        padding: 15px !important;
    }
    
    .application-submitted-container .btn {
        width: 100% !important;
        margin-bottom: 8px;
    }
}

/* ===== 18. ADDITIONAL SERVICES PAGE FIXES ===== */

@media (max-width: 576px) {
    .additional-services .service-card {
        padding: 15px !important;
    }
    
    .additional-services .service-card .btn {
        width: 100% !important;
    }
}

/* ===== 19. TRACKING PAGE FIXES ===== */

@media (max-width: 576px) {
    .track-form input {
        font-size: 14px !important;
    }
    
    .track-form .btn {
        width: 100% !important;
    }
}

/* ===== 20. VT DESIGN SYSTEM MOBILE OVERRIDES ===== */

@media (max-width: 576px) {
    .vt-section-title {
        font-size: 18px !important;
    }
    
    .vt-card {
        padding: 16px !important;
    }
    
    .vt-btn {
        font-size: 13px !important;
        padding: 8px 14px !important;
    }
    
    .vt-btn-sm {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
}

/* Upcoming deadlines rows on mobile */
@media (max-width: 480px) {
    .vt-upcoming-row {
        gap: 10px !important;
    }
    
    .vt-upcoming-date {
        width: 48px !important;
    }
    
    .vt-upcoming-day {
        font-size: 16px !important;
    }
    
    .vt-upcoming-actions .vt-btn {
        font-size: 12px !important;
    }
}

/* ===== 21. SCROLL-TO-TOP BUTTON FIX ===== */

/* Prevent overlap with fixed apply button */
@media (max-width: 767px) {
    #kt_scrolltop {
        bottom: 70px !important;
        right: 10px !important;
    }
}

/* ===== 22. GLOBAL SPACING CONSISTENCY ===== */

@media (max-width: 576px) {
    .padding {
        padding: 2em 0 !important;
    }
    
    .p_inline {
        padding-inline: 10px !important;
    }
    
    .p_bottom {
        padding-bottom: 1.5em !important;
    }
    
    section {
        overflow-x: hidden;
    }
}