/**
 * Mobile Optimization CSS
 * Aplica otimizações mobile para todo o sistema
 * Projeto: Encontre Profissionais
 */

/* ===================================
   GLOBAL ICON SPACING IN BUTTONS
   =================================== */
/* Ensure icons have proper spacing from text in buttons and links */
.btn i,
button i,
a.btn i,
[type="submit"] i,
[type="button"] i {
    margin-right: 6px;
}

/* Icons at the end of text (for right-aligned icons) */
.btn i:last-child:not(:first-child),
button i:last-child:not(:first-child),
a.btn i:last-child:not(:first-child) {
    margin-right: 0;
    margin-left: 6px;
}

/* Icons that are the only child (icon-only buttons) */
.btn i:only-child,
button i:only-child,
a.btn i:only-child {
    margin-right: 0;
    margin-left: 0;
}

/* Inline styled buttons and links with icons */
a[style*="padding"] i:first-child,
button[style*="padding"] i:first-child,
span[style*="padding"] i:first-child {
    margin-right: 6px;
}

/* Links styled as buttons (common pattern in this project) */
a[style*="background"] i.fas:first-child,
a[style*="background"] i.far:first-child,
a[style*="background"] i.fa:first-child,
button[style*="background"] i.fas:first-child,
button[style*="background"] i.far:first-child,
button[style*="background"] i.fa:first-child {
    margin-right: 6px;
}

/* Span with icons inside buttons/links */
.btn span i:first-child,
button span i:first-child {
    margin-right: 6px;
}

/* ===================================
   MOBILE OPTIMIZATION - 768px
   =================================== */
@media (max-width: 768px) {
    /* Remover menu da direita em mobile */
    #rightsidebar,
    .right_sidebar,
    .right-icon-bar,
    .right_icon_bar,
    .settingbar {
        display: none !important;
    }

    /* Left Sidebar - Hidden by default on mobile */
    #left-sidebar,
    .sidebar {
        position: fixed !important;
        left: -280px !important;
        width: 260px !important;
        z-index: 9999 !important;
        transition: left 0.3s ease !important;
    }

    /* Sidebar visible when toggled */
    #left-sidebar.open,
    .sidebar.open,
    body.offcanvas-active #left-sidebar,
    body.offcanvas-active .sidebar {
        left: 0 !important;
    }

    /* Main Content - Full width on mobile */
    #main-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }

    /* Remove right icon bar space */
    .right_icon_bar,
    .right-icon-bar,
    .rightbar,
    .right-bar {
        display: none !important;
        width: 0 !important;
    }

    /* Theme wrapper adjustments */
    .theme-blush #main-content,
    .theme-cyan #main-content,
    .theme-green #main-content,
    .theme-orange #main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        float: none !important;
        position: relative !important;
    }

    /* Override calc() widths from theme */
    #main-content[style*="calc"],
    .theme-blush #main-content,
    #wrapper #main-content {
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* Wrapper adjustments */
    #wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Navbar full width */
    .navbar {
        left: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    .navbar .container-fluid {
        padding: 8px 12px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .navbar-brand {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Container Global */
    .container, .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Cards Gerais */
    .card {
        margin-bottom: 16px !important;
    }

    .card-header {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    .card-body {
        padding: 16px !important;
    }

    .card-title {
        font-size: 16px !important;
    }

    /* Tables */
    .table-responsive {
        font-size: 12px !important;
    }

    .table thead th {
        font-size: 11px !important;
        padding: 10px 8px !important;
    }

    .table tbody td {
        font-size: 12px !important;
        padding: 10px 8px !important;
    }

    /* Buttons */
    .btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    .btn-sm {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    .btn-lg {
        padding: 10px 18px !important;
        font-size: 14px !important;
    }

    /* Forms */
    .form-label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .form-control {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    .form-select {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    .form-text, small {
        font-size: 11px !important;
    }

    /* Badges */
    .badge {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    /* Alerts */
    .alert {
        padding: 12px 14px !important;
        font-size: 13px !important;
    }

    .alert-heading {
        font-size: 14px !important;
    }

    /* Modals */
    .modal-header {
        padding: 14px 16px !important;
    }

    .modal-title {
        font-size: 15px !important;
    }

    .modal-body {
        padding: 16px !important;
    }

    .modal-footer {
        padding: 12px 16px !important;
    }

    /* Pagination */
    .pagination {
        font-size: 12px !important;
    }

    .page-link {
        padding: 6px 10px !important;
    }

    /* Headings */
    h1 {
        font-size: 22px !important;
    }

    h2 {
        font-size: 20px !important;
    }

    h3 {
        font-size: 18px !important;
    }

    h4 {
        font-size: 16px !important;
    }

    h5 {
        font-size: 14px !important;
    }

    h6 {
        font-size: 13px !important;
    }

    /* Breadcrumbs */
    .breadcrumb {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    /* List Groups */
    .list-group-item {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    /* Progress Bars */
    .progress {
        height: 16px !important;
    }

    /* Nav Tabs/Pills */
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    /* Dropdowns */
    .dropdown-menu {
        font-size: 13px !important;
    }

    .dropdown-item {
        padding: 8px 14px !important;
    }
}

/* ===================================
   MOBILE OPTIMIZATION - 576px
   =================================== */
@media (max-width: 576px) {
    /* Container mais compacto */
    .container, .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Cards */
    .card-header {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    .card-body {
        padding: 14px !important;
    }

    /* Tables - Hide less important columns */
    .table thead th:nth-child(n+4),
    .table tbody td:nth-child(n+4) {
        display: none;
    }

    .table {
        font-size: 11px !important;
    }

    /* Buttons - Full width on small screens */
    .btn:not(.btn-sm):not(.btn-lg) {
        width: 100%;
        margin-bottom: 8px;
    }

    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn {
        width: 100%;
    }

    /* Forms */
    .form-label {
        font-size: 12px !important;
    }

    .form-control,
    .form-select {
        font-size: 12px !important;
        padding: 7px 10px !important;
    }

    /* Modals - Full width */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-footer {
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
        margin: 0 0 8px 0 !important;
    }

    /* Headings */
    h1 {
        font-size: 20px !important;
    }

    h2 {
        font-size: 18px !important;
    }

    h3 {
        font-size: 16px !important;
    }

    h4 {
        font-size: 15px !important;
    }

    h5 {
        font-size: 13px !important;
    }

    /* Pagination - Compact */
    .pagination {
        font-size: 11px !important;
    }

    .page-link {
        padding: 5px 8px !important;
    }

    /* Flex utilities - Stack on mobile */
    .d-flex.gap-3,
    .d-flex.gap-2 {
        flex-direction: column !important;
        gap: 8px !important;
    }
}

/* ===================================
   MOBILE OPTIMIZATION - 380px
   =================================== */
@media (max-width: 380px) {
    /* Ultra compact */
    .container, .container-fluid {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .card-header {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    .card-body {
        padding: 12px !important;
    }

    .btn {
        padding: 7px 12px !important;
        font-size: 12px !important;
    }

    .form-label {
        font-size: 11px !important;
    }

    .form-control,
    .form-select {
        font-size: 11px !important;
    }

    h1 {
        font-size: 18px !important;
    }

    h2 {
        font-size: 16px !important;
    }

    h3 {
        font-size: 15px !important;
    }
}

/* ===================================
   COMPONENT-SPECIFIC MOBILE FIXES
   =================================== */

/* Stats Cards - Dashboard e Listings */
@media (max-width: 768px) {
    /* Stat cards with inline styles */
    .row > [class*="col-6"][class*="col-lg-3"] > div,
    .row > [class*="col-6"][class*="col-md-3"] > div {
        padding: 14px !important;
    }

    .row > [class*="col-6"][class*="col-lg-3"] > div [style*="font-size: 24px"],
    .row > [class*="col-6"][class*="col-md-3"] > div [style*="font-size: 24px"] {
        font-size: 20px !important;
    }

    .row > [class*="col-6"] > div [style*="width: 44px"],
    .row > [class*="col-6"] > div [style*="width: 48px"] {
        width: 36px !important;
        height: 36px !important;
    }

    .row > [class*="col-6"] > div [style*="width: 44px"] i,
    .row > [class*="col-6"] > div [style*="width: 48px"] i {
        font-size: 14px !important;
    }
}

@media (max-width: 576px) {
    /* Smaller stats on mobile */
    .row > [class*="col-6"][class*="col-lg-3"] > div,
    .row > [class*="col-6"][class*="col-md-3"] > div {
        padding: 12px !important;
    }

    .row > [class*="col-6"][class*="col-lg-3"] > div [style*="font-size: 24px"],
    .row > [class*="col-6"][class*="col-md-3"] > div [style*="font-size: 24px"] {
        font-size: 18px !important;
    }

    .row > [class*="col-6"][class*="col-lg-3"] > div [style*="font-size: 11px"],
    .row > [class*="col-6"][class*="col-md-3"] > div [style*="font-size: 11px"] {
        font-size: 9px !important;
    }

    .row > [class*="col-6"] > div [style*="gap: 12px"] {
        gap: 8px !important;
    }
}

/* Page Headers with Flex */
@media (max-width: 768px) {
    /* Headers with space-between */
    [style*="justify-content: space-between"] {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    /* Header banners */
    [style*="padding: 24px 28px"],
    [style*="padding: 20px 24px"] {
        padding: 16px !important;
    }

    /* Large icons in headers */
    [style*="width: 64px"][style*="height: 64px"],
    [style*="width: 56px"][style*="height: 56px"] {
        width: 48px !important;
        height: 48px !important;
    }

    [style*="width: 64px"] i[style*="font-size: 28px"],
    [style*="width: 56px"] i[style*="font-size: 24px"] {
        font-size: 20px !important;
    }

    /* Header titles */
    [style*="font-size: 22px"][style*="font-weight: 700"],
    [style*="font-size: 20px"][style*="font-weight: 700"] {
        font-size: 16px !important;
    }
}

@media (max-width: 576px) {
    [style*="padding: 24px 28px"],
    [style*="padding: 20px 24px"],
    [style*="padding: 16px 20px"] {
        padding: 12px !important;
    }

    [style*="width: 64px"][style*="height: 64px"],
    [style*="width: 56px"][style*="height: 56px"],
    [style*="width: 48px"][style*="height: 48px"] {
        width: 40px !important;
        height: 40px !important;
    }

    [style*="font-size: 22px"][style*="font-weight: 700"],
    [style*="font-size: 20px"][style*="font-weight: 700"],
    [style*="font-size: 18px"][style*="font-weight: 700"] {
        font-size: 14px !important;
    }
}

/* Card Headers with Gradients */
@media (max-width: 768px) {
    [style*="background: linear-gradient"][style*="padding: 14px 24px"],
    [style*="background: linear-gradient"][style*="padding: 12px 24px"],
    [style*="background: linear-gradient"][style*="padding: 16px 24px"] {
        padding: 12px 16px !important;
    }

    [style*="background: linear-gradient"] [style*="font-size: 14px"] {
        font-size: 12px !important;
    }
}

/* Info Tags with Icons */
@media (max-width: 768px) {
    [style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 16px"],
    [style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 12px"] {
        gap: 8px !important;
    }

    [style*="font-size: 12px"][style*="color: #546E7A"],
    [style*="font-size: 11px"][style*="color: #546E7A"] {
        font-size: 10px !important;
    }
}

/* Value Cards (Preço/Total) */
@media (max-width: 768px) {
    [style*="font-size: 26px"][style*="font-weight: 700"],
    [style*="font-size: 24px"][style*="font-weight: 700"] {
        font-size: 20px !important;
    }
}

@media (max-width: 576px) {
    [style*="font-size: 26px"][style*="font-weight: 700"],
    [style*="font-size: 24px"][style*="font-weight: 700"],
    [style*="font-size: 20px"][style*="font-weight: 700"] {
        font-size: 18px !important;
    }
}

/* Profile Header */
@media (max-width: 768px) {
    /* Avatar sizing */
    [style*="width: 64px"][style*="height: 64px"][style*="border-radius: 50%"] {
        width: 48px !important;
        height: 48px !important;
    }

    [style*="width: 100px"][style*="height: 100px"],
    [style*="width: 90px"][style*="height: 90px"] {
        width: 70px !important;
        height: 70px !important;
    }

    [style*="width: 80px"][style*="height: 80px"] {
        width: 60px !important;
        height: 60px !important;
    }

    /* Profile name */
    [style*="font-size: 24px"][style*="margin: 0"] {
        font-size: 18px !important;
    }

    [style*="font-size: 16px"][style*="font-weight: 600"][style*="color: #263238"] {
        font-size: 14px !important;
    }
}

/* Profile Page - First Block Mobile Layout */
@media (max-width: 576px) {
    /* Main container - reorganize */
    [style*="background: white"][style*="border-radius: 6px"][style*="margin-bottom: 16px"] > [style*="padding: 16px"][style*="display: flex"] {
        display: grid !important;
        grid-template-columns: 48px 1fr !important;
        grid-template-rows: auto auto auto !important;
        gap: 8px 12px !important;
        padding: 12px !important;
    }

    /* Avatar - row 1, col 1 */
    [style*="width: 64px"][style*="height: 64px"][style*="border-radius: 50%"][style*="border: 3px"] {
        grid-row: 1 !important;
        grid-column: 1 !important;
        width: 48px !important;
        height: 48px !important;
        border-width: 2px !important;
    }

    /* Info section - row 1, col 2 */
    [style*="flex: 1"][style*="min-width: 200px"] {
        grid-row: 1 !important;
        grid-column: 2 !important;
        min-width: 0 !important;
    }

    [style*="flex: 1"][style*="min-width: 200px"] [style*="font-size: 16px"] {
        font-size: 14px !important;
    }

    [style*="flex: 1"][style*="min-width: 200px"] [style*="font-size: 12px"] {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }

    [style*="flex: 1"][style*="min-width: 200px"] [style*="display: flex"][style*="gap: 6px"] {
        gap: 4px !important;
    }

    [style*="flex: 1"][style*="min-width: 200px"] [style*="font-size: 10px"][style*="padding: 3px 8px"] {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }

    /* Mini stats - row 2, span full */
    [style*="display: flex"][style*="gap: 16px"][style*="flex-wrap: wrap"]:not([style*="align-items: center"]):not([style*="gap: 8px"]) {
        grid-row: 2 !important;
        grid-column: 1 / -1 !important;
        display: flex !important;
        justify-content: space-around !important;
        gap: 8px !important;
        padding: 8px 0 !important;
        border-top: 1px solid #ECEFF1 !important;
        border-bottom: 1px solid #ECEFF1 !important;
        margin: 4px 0 !important;
    }

    [style*="text-align: center"] [style*="font-size: 10px"][style*="text-transform: uppercase"] {
        font-size: 9px !important;
    }

    [style*="text-align: center"] [style*="font-size: 13px"][style*="font-weight: 600"] {
        font-size: 11px !important;
    }

    /* Action buttons - row 3, span full */
    [style*="display: flex"][style*="gap: 8px"]:last-child {
        grid-row: 3 !important;
        grid-column: 1 / -1 !important;
        display: flex !important;
        gap: 8px !important;
    }

    [style*="display: flex"][style*="gap: 8px"]:last-child > a {
        flex: 1 !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* Action Buttons Container */
@media (max-width: 768px) {
    .d-flex.gap-2,
    [style*="display: flex"][style*="gap: 8px"],
    [style*="display: flex"][style*="gap: 10px"] {
        flex-wrap: wrap !important;
    }

    /* Inline action links */
    [style*="display: inline-flex"][style*="gap: 8px"] {
        display: flex !important;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 576px) {
    /* Stack buttons vertically */
    .d-flex.gap-2 > .btn,
    .d-flex.gap-2 > a,
    .d-flex.gap-2 > form {
        width: 100% !important;
    }

    .d-flex.gap-2 > form .btn {
        width: 100% !important;
    }
}

/* Sidebar Cards */
@media (max-width: 991px) {
    .col-lg-4 .card,
    .col-lg-3 .card {
        margin-bottom: 16px !important;
    }
}

/* Timeline/Progress Indicators */
@media (max-width: 576px) {
    [style*="display: inline-flex"][style*="gap: 6px"] {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    [style*="width: 26px"][style*="height: 26px"] {
        width: 22px !important;
        height: 22px !important;
    }

    [style*="width: 28px"][style*="height: 2px"] {
        width: 16px !important;
    }
}

/* Messages Container */
@media (max-width: 768px) {
    .messages-container,
    [style*="max-height: 300px"][style*="overflow-y: auto"] {
        max-height: 250px !important;
    }

    .message-content {
        max-width: 85% !important;
    }

    .message-text {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}

/* Tables in Cards */
@media (max-width: 768px) {
    .table-responsive {
        margin: 0 -16px !important;
        padding: 0 16px !important;
    }

    .card .table,
    [style*="border-radius"] .table {
        font-size: 11px !important;
    }

    .card .table th,
    .card .table td {
        padding: 8px 6px !important;
        white-space: nowrap;
    }
}

/* Filter Forms */
@media (max-width: 768px) {
    .row.g-3 > [class*="col-md"] {
        margin-bottom: 12px !important;
    }

    .form-select-sm,
    .form-control-sm {
        font-size: 12px !important;
    }
}

/* Block Header */
@media (max-width: 768px) {
    .block-header {
        padding: 4px 0 8px 0 !important;
        margin: 0 !important;
    }

    .block-header .row {
        margin: 0 !important;
        align-items: flex-start !important;
    }

    .block-header h2 {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.3 !important;
    }

    .block-header .breadcrumb,
    .block-header ul.breadcrumb {
        font-size: 10px !important;
        margin: 2px 0 0 0 !important;
        padding: 0 !important;
        background: none !important;
        background-color: transparent !important;
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        max-width: 100% !important;
        list-style: none !important;
    }

    .block-header .breadcrumb li,
    .block-header ul.breadcrumb li {
        padding: 0 !important;
        margin: 0 !important;
        display: inline !important;
        white-space: nowrap !important;
        float: none !important;
    }

    .block-header .breadcrumb li::before,
    .block-header ul.breadcrumb li::before {
        padding: 0 3px !important;
        content: "/" !important;
        display: inline !important;
    }

    .block-header .breadcrumb li:first-child::before,
    .block-header ul.breadcrumb li:first-child::before {
        content: "" !important;
        padding: 0 !important;
        display: none !important;
    }

    .block-header .breadcrumb li a,
    .block-header ul.breadcrumb li a {
        display: inline !important;
        white-space: nowrap !important;
    }

    .block-header .col-lg-6,
    .block-header .col-md-6,
    .block-header .col-sm-12 {
        padding: 0 4px !important;
    }

    .block-header .d-flex.flex-row-reverse {
        display: none !important;
    }
}

/* Main Content Padding */
@media (max-width: 768px) {
    #main-content {
        padding: 10px !important;
        padding-top: 60px !important;
        margin-top: 0 !important;
    }

    #main-content .container-fluid {
        padding: 0 !important;
    }
}

@media (max-width: 576px) {
    #main-content {
        padding: 8px !important;
        padding-top: 55px !important;
    }
}

/* Footer */
@media (max-width: 768px) {
    [style*="margin: 30px -35px"] {
        margin: 20px -12px 0 -12px !important;
    }
}

/* Empty State Cards */
@media (max-width: 576px) {
    [style*="padding: 60px 40px"][style*="text-align: center"] {
        padding: 40px 20px !important;
    }

    [style*="width: 80px"][style*="height: 80px"][style*="border-radius: 50%"] {
        width: 60px !important;
        height: 60px !important;
    }

    [style*="width: 80px"] [style*="font-size: 32px"] {
        font-size: 24px !important;
    }
}

/* Negotiation Acceptance Cards */
@media (max-width: 576px) {
    .col-6 > [style*="border-radius: 12px"][style*="padding: 16px"] {
        padding: 12px !important;
    }

    .col-6 > div [style*="width: 48px"][style*="height: 48px"] {
        width: 36px !important;
        height: 36px !important;
    }
}

/* Select2 Mobile Fix */
@media (max-width: 768px) {
    .select2-container {
        width: 100% !important;
    }

    .select2-selection {
        min-height: 36px !important;
        font-size: 13px !important;
    }

    .select2-selection__rendered {
        padding: 4px 8px !important;
    }

    .select2-dropdown {
        font-size: 13px !important;
    }

    .select2-results__option {
        padding: 8px 12px !important;
    }
}

/* Fix for inline styles with display:flex and gap */
@media (max-width: 576px) {
    [style*="display: flex"][style*="align-items: center"][style*="gap: 16px"],
    [style*="display: flex"][style*="align-items: center"][style*="gap: 12px"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* Except for small icon+text combos */
    [style*="display: flex"][style*="align-items: center"][style*="gap: 8px"],
    [style*="display: flex"][style*="align-items: center"][style*="gap: 6px"] {
        flex-direction: row !important;
        align-items: center !important;
    }
}

/* Landing/Marketing Sections */
@media (max-width: 768px) {
    .hero-section,
    [class*="hero"] {
        padding: 40px 16px !important;
    }

    .hero-section h1,
    [class*="hero"] h1 {
        font-size: 24px !important;
    }

    .hero-section p,
    [class*="hero"] p {
        font-size: 14px !important;
    }
}

/* Professional Profile Cover */
@media (max-width: 768px) {
    .profile-cover,
    [style*="height: 280px"],
    [style*="height: 250px"] {
        height: 180px !important;
    }
}

@media (max-width: 576px) {
    .profile-cover,
    [style*="height: 280px"],
    [style*="height: 250px"],
    [style*="height: 180px"] {
        height: 140px !important;
    }
}

/* Subscription Plan Cards */
@media (max-width: 768px) {
    [style*="min-height: 400px"],
    [style*="min-height: 350px"] {
        min-height: auto !important;
    }
}

/* KYC Document Grid */
@media (max-width: 576px) {
    .row > [class*="col-md-6"][class*="col-lg-4"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* Ticket System */
@media (max-width: 768px) {
    .ticket-message {
        padding: 12px !important;
    }

    .ticket-attachment {
        font-size: 11px !important;
    }
}

/* Withdrawal/Deposit Cards */
@media (max-width: 768px) {
    [style*="display: grid"][style*="grid-template-columns"] {
        display: block !important;
    }

    [style*="display: grid"] > div {
        margin-bottom: 12px !important;
    }
}

/* ===================================
   SIDEBAR USER PROFILE - MOBILE
   =================================== */
@media (max-width: 768px) {
    .user-profile-card {
        padding: 12px 10px !important;
    }

    .user-avatar {
        width: 56px !important;
        height: 56px !important;
    }

    .user-info .user-name {
        font-size: 13px !important;
    }

    .user-info .user-email {
        font-size: 9px !important;
    }

    .user-type-badge {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }

    .user-quick-actions {
        gap: 4px !important;
    }

    .quick-action-btn {
        padding: 6px 2px !important;
        font-size: 9px !important;
    }

    .quick-action-btn i {
        font-size: 12px !important;
    }

    .verified-badge {
        width: 18px !important;
        height: 18px !important;
        font-size: 9px !important;
    }
}

/* ===================================
   HEADER NAVIGATION - MOBILE
   =================================== */
@media (max-width: 768px) {
    /* Fix navbar alignment */
    .navbar {
        padding: 0 !important;
    }

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

    .navbar-brand {
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* Toggle buttons on mobile */
    .btn-toggle-offcanvas {
        padding: 8px !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .btn-toggle-fullwidth {
        display: none !important;
    }

    .navbar-brand a {
        display: flex !important;
        align-items: center !important;
    }

    .navbar-brand img {
        height: 28px !important;
        width: auto !important;
    }

    .navbar-right {
        padding-right: 10px !important;
    }

    #navbar-menu {
        display: flex !important;
        align-items: center !important;
    }

    #navbar-menu .nav.navbar-nav {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

}

@media (max-width: 576px) {
    .icon-menu {
        padding: 4px !important;
    }

    .icon-menu i {
        font-size: 16px !important;
    }
}

/* ===================================
   DASHBOARD HEADER BANNER - MOBILE
   =================================== */
@media (max-width: 768px) {
    /* Dashboard main header */
    [style*="background:linear-gradient(135deg,#D84315"][style*="border-radius"] {
        padding: 16px !important;
        margin-bottom: 16px !important;
    }

    [style*="background:linear-gradient(135deg,#D84315"] > div[style*="display:flex"][style*="justify-content:space-between"]:not(.stat-card-inner) {
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* Garantir que stat-card-inner sempre fique em row */
    .stat-card-inner {
        flex-direction: row !important;
    }

    [style*="background:linear-gradient(135deg,#D84315"] [style*="width:52px"] {
        width: 40px !important;
        height: 40px !important;
    }

    [style*="background:linear-gradient(135deg,#D84315"] [style*="width:52px"] i,
    [style*="background:linear-gradient(135deg,#D84315"] [style*="width:56px"] i {
        font-size: 18px !important;
    }

    [style*="background:linear-gradient(135deg,#D84315"] [style*="font-size:20px"],
    [style*="background:linear-gradient(135deg,#D84315"] [style*="font-size:22px"] {
        font-size: 16px !important;
    }

    /* Header action buttons */
    [style*="background:linear-gradient(135deg,#D84315"] [style*="display:flex"][style*="gap:8px"] {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    [style*="background:linear-gradient(135deg,#D84315"] a[style*="padding:10px 16px"],
    [style*="background:linear-gradient(135deg,#D84315"] a[style*="padding:10px 18px"] {
        padding: 8px 12px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 576px) {
    [style*="background:linear-gradient(135deg,#D84315"][style*="border-radius"] {
        padding: 12px !important;
        border-radius: 8px !important;
    }

    [style*="background:linear-gradient(135deg,#D84315"] [style*="font-size:20px"],
    [style*="background:linear-gradient(135deg,#D84315"] [style*="font-size:22px"],
    [style*="background:linear-gradient(135deg,#D84315"] [style*="font-size:16px"] {
        font-size: 14px !important;
    }

    /* Stack buttons vertically */
    [style*="background:linear-gradient(135deg,#D84315"] [style*="display:flex"][style*="gap:8px"] {
        flex-direction: column !important;
    }

    [style*="background:linear-gradient(135deg,#D84315"] [style*="display:flex"][style*="gap:8px"] > a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ===================================
   DASHBOARD STAT CARDS - DESKTOP & MOBILE
   =================================== */

/* Base styles for stat cards */
.stat-card-inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.stat-card-text {
    flex: 1;
    min-width: 0;
}

.stat-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card-icon i {
    font-size: 16px;
}

@media (max-width: 768px) {
    /* Dashboard stat cards */
    .stat-card {
        padding: 12px !important;
    }

    .stat-card-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .stat-card-text {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .stat-card-icon {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
    }

    .stat-card-icon i {
        font-size: 14px !important;
    }

    .stat-card [style*="font-size:24px"] {
        font-size: 18px !important;
    }

    .stat-card [style*="font-size:10px"] {
        font-size: 9px !important;
    }

    .stat-card [style*="font-size:11px"] {
        font-size: 10px !important;
    }
}

@media (max-width: 576px) {
    .stat-card {
        padding: 10px !important;
    }

    .stat-card-inner {
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .stat-card-text {
        overflow: hidden !important;
    }

    /* Labels não quebram linha */
    .stat-card-text > div:first-child {
        font-size: 8px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .stat-card-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .stat-card-icon i {
        font-size: 12px !important;
    }

    .stat-card [style*="font-size:24px"],
    .stat-card [style*="font-size:18px"] {
        font-size: 16px !important;
    }
}

/* ===================================
   HEADER STATS CARDS (in gradient header) - MOBILE
   =================================== */
@media (max-width: 768px) {
    /* Stats mini cards in headers */
    [style*="background:rgba(255,255,255,0.15)"][style*="border-radius:10px"][style*="padding:12px 18px"],
    [style*="background:rgba(76,175,80,0.3)"][style*="border-radius:10px"][style*="padding:12px 18px"],
    [style*="background:rgba(244,67,54,0.9)"][style*="border-radius:10px"],
    [style*="background:rgba(33,150,243,0.9)"][style*="border-radius:10px"] {
        padding: 8px 12px !important;
        min-width: 60px !important;
    }

    [style*="border-radius:10px"][style*="padding:12px 18px"] [style*="font-size:22px"] {
        font-size: 16px !important;
    }

    [style*="border-radius:10px"][style*="padding:12px 18px"] [style*="font-size:9px"] {
        font-size: 8px !important;
    }
}

@media (max-width: 576px) {
    [style*="background:rgba(255,255,255,0.15)"][style*="border-radius:10px"],
    [style*="background:rgba(76,175,80,0.3)"][style*="border-radius:10px"],
    [style*="background:rgba(244,67,54,0.9)"][style*="border-radius:10px"],
    [style*="background:rgba(33,150,243,0.9)"][style*="border-radius:10px"] {
        padding: 6px 10px !important;
        min-width: auto !important;
    }

    [style*="border-radius:10px"] [style*="font-size:22px"],
    [style*="border-radius:10px"] [style*="font-size:16px"] {
        font-size: 14px !important;
    }
}

/* ===================================
   ADVERTISEMENT CARDS - MOBILE
   =================================== */
@media (max-width: 768px) {
    /* Ad card image container */
    .ad-card [style*="width:200px"][style*="min-height:180px"] {
        width: 100% !important;
        height: 180px !important;
        min-height: auto !important;
    }

    /* Ad card content */
    .ad-card [style*="flex:1"][style*="min-width:300px"] {
        min-width: 100% !important;
        padding: 14px !important;
    }

    /* Ad title */
    .ad-card [style*="font-size:17px"] {
        font-size: 15px !important;
    }

    /* Info grid */
    .ad-card [style*="display:grid"][style*="grid-template-columns"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    /* Actions */
    .ad-card [style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:10px"] > a {
        padding: 8px 14px !important;
        font-size: 11px !important;
    }

    /* Status banner */
    .ad-card [style*="background:"][style*="padding:10px 16px"] {
        padding: 8px 12px !important;
        flex-wrap: wrap !important;
    }

    .ad-card [style*="width:32px"][style*="height:32px"] {
        width: 28px !important;
        height: 28px !important;
    }

    /* Notification badges on cards */
    .notification-badge {
        padding: 3px 8px !important;
        font-size: 9px !important;
    }
}

@media (max-width: 576px) {
    .ad-card [style*="width:200px"][style*="min-height:180px"],
    .ad-card [style*="width:100%"][style*="height:180px"] {
        height: 150px !important;
    }

    .ad-card [style*="flex:1"][style*="min-width"] {
        padding: 12px !important;
    }

    .ad-card [style*="font-size:17px"],
    .ad-card [style*="font-size:15px"] {
        font-size: 14px !important;
    }

    .ad-card [style*="display:grid"][style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    .ad-card [style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:10px"] {
        flex-direction: column !important;
    }

    .ad-card [style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:10px"] > a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ===================================
   FILTER SIDEBAR - MOBILE
   =================================== */
@media (max-width: 992px) {
    /* Filters become collapsible on tablet */
    .col-lg-3 [style*="border-top:3px solid #D84315"] {
        margin-bottom: 12px !important;
    }
}

@media (max-width: 768px) {
    .col-lg-3 [style*="padding:16px"] {
        padding: 12px !important;
    }

    .col-lg-3 input[type="text"],
    .col-lg-3 input[type="number"],
    .col-lg-3 select {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    .col-lg-3 label {
        font-size: 10px !important;
    }

    .col-lg-3 button[type="submit"] {
        padding: 10px !important;
        font-size: 11px !important;
    }
}

/* ===================================
   LIST ITEMS IN CARDS - MOBILE
   =================================== */
@media (max-width: 768px) {
    .list-item {
        padding: 10px 12px !important;
    }

    .list-item [style*="font-size:13px"] {
        font-size: 12px !important;
    }

    .list-item [style*="font-size:12px"] {
        font-size: 11px !important;
    }

    .list-item [style*="font-size:11px"] {
        font-size: 10px !important;
    }

    /* Tags and badges in list items */
    .list-item [style*="padding:4px 10px"][style*="border-radius:12px"] {
        padding: 3px 8px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 576px) {
    .list-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .list-item > div:last-child {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}

/* ===================================
   KYC/PLAN INFO CARDS - MOBILE
   =================================== */
@media (max-width: 768px) {
    /* Cards with border-top color */
    [style*="border-top:3px solid"] [style*="padding:14px 16px"] {
        padding: 10px 12px !important;
    }

    [style*="border-top:3px solid"] [style*="padding:16px"] {
        padding: 12px !important;
    }

    [style*="border-top:3px solid"] [style*="font-size:20px"] {
        font-size: 16px !important;
    }

    [style*="border-top:3px solid"] [style*="font-size:13px"] {
        font-size: 12px !important;
    }

    [style*="border-top:3px solid"] [style*="font-size:11px"] {
        font-size: 10px !important;
    }

    /* KYC verification card inner box */
    [style*="border-top:3px solid"] [style*="background:#E8F5E9"][style*="padding:14px"],
    [style*="border-top:3px solid"] [style*="background:#FFF3E0"][style*="padding:14px"] {
        padding: 10px !important;
    }

    [style*="border-top:3px solid"] [style*="width:36px"][style*="height:36px"] {
        width: 30px !important;
        height: 30px !important;
    }

    [style*="border-top:3px solid"] [style*="width:36px"] i {
        font-size: 12px !important;
    }
}

/* ===================================
   PERFORMANCE PROGRESS BARS - MOBILE
   =================================== */
@media (max-width: 768px) {
    [style*="height:6px"][style*="background:#ECEFF1"] {
        height: 4px !important;
    }

    [style*="font-size:14px"][style*="font-weight:700"] {
        font-size: 12px !important;
    }
}

/* ===================================
   HELP CARD COMPONENT - MOBILE
   =================================== */
@media (max-width: 768px) {
    .help-card {
        padding: 16px !important;
    }

    .help-card [style*="font-size:16px"] {
        font-size: 14px !important;
    }

    .help-card [style*="font-size:13px"] {
        font-size: 12px !important;
    }
}

/* ===================================
   QUICK LINKS SIDEBAR - MOBILE
   =================================== */
@media (max-width: 768px) {
    .quick-link {
        padding: 8px !important;
    }

    .quick-link span {
        font-size: 11px !important;
    }

    .quick-link i {
        font-size: 12px !important;
    }
}

/* ===================================
   EMPTY STATES - MOBILE
   =================================== */
@media (max-width: 576px) {
    [style*="padding:40px 20px"][style*="text-align:center"],
    [style*="padding:60px 20px"][style*="text-align:center"] {
        padding: 30px 16px !important;
    }

    [style*="text-align:center"] [style*="width:56px"][style*="height:56px"],
    [style*="text-align:center"] [style*="width:64px"][style*="height:64px"] {
        width: 48px !important;
        height: 48px !important;
    }

    [style*="text-align:center"] [style*="font-size:22px"],
    [style*="text-align:center"] [style*="font-size:28px"] {
        font-size: 20px !important;
    }

    [style*="text-align:center"] [style*="font-size:16px"][style*="font-weight:600"] {
        font-size: 14px !important;
    }

    [style*="text-align:center"] a[style*="padding:12px 24px"] {
        padding: 10px 16px !important;
        font-size: 12px !important;
    }
}

/* ===================================
   GENERAL LAYOUT FIXES - MOBILE
   =================================== */
@media (max-width: 768px) {
    /* Ensure flex items wrap */
    [style*="display:flex"][style*="gap:12px"] {
        flex-wrap: wrap !important;
    }

    [style*="display:flex"][style*="gap:16px"] {
        flex-wrap: wrap !important;
    }

    [style*="display:flex"][style*="gap:20px"] {
        flex-wrap: wrap !important;
    }

    /* Overflow scroll for any horizontal content */
    [style*="display:flex"][style*="overflow-x"] {
        -webkit-overflow-scrolling: touch !important;
    }

    /* Max height adjustments for scrollable areas */
    [style*="max-height:320px"] {
        max-height: 250px !important;
    }
}

@media (max-width: 576px) {
    /* Stack flex items vertically on very small screens */
    [style*="display:flex"][style*="justify-content:space-between"]:not([style*="flex-wrap:wrap"]) {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    /* Reduce max-height further */
    [style*="max-height:320px"],
    [style*="max-height:250px"] {
        max-height: 200px !important;
    }
}

/* ===================================
   BUDGETS INDEX - MOBILE SPECIFIC
   =================================== */
@media (max-width: 768px) {
    /* Budget card layout */
    .budget-card [style*="display:flex"][style*="gap:16px"] {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .budget-card [style*="width:200px"] {
        width: 100% !important;
    }

    /* Budget value display */
    .budget-card [style*="font-size:18px"][style*="font-weight:700"] {
        font-size: 16px !important;
    }
}

/* ===================================
   SERVICES INDEX - MOBILE SPECIFIC
   =================================== */
@media (max-width: 768px) {
    /* Service card layout */
    .service-card [style*="display:flex"] {
        flex-wrap: wrap !important;
    }

    /* Timeline/status indicators */
    .service-card [style*="display:inline-flex"][style*="gap:6px"] {
        flex-wrap: wrap !important;
    }
}

/* ===================================
   NEGOTIATIONS - MOBILE SPECIFIC
   =================================== */
@media (max-width: 768px) {
    /* Negotiation acceptance cards */
    .col-6 > [style*="border-radius:12px"][style*="text-align:center"] {
        padding: 12px 8px !important;
    }

    .col-6 > [style*="text-align:center"] [style*="font-size:14px"] {
        font-size: 12px !important;
    }

    .col-6 > [style*="text-align:center"] [style*="width:48px"] {
        width: 40px !important;
        height: 40px !important;
    }
}

@media (max-width: 576px) {
    /* Stack acceptance cards vertically */
    .row > .col-6:has([style*="text-align:center"][style*="border-radius:12px"]) {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
    }
}

/* ===================================
   TICKETS - MOBILE SPECIFIC
   =================================== */
@media (max-width: 768px) {
    .ticket-message {
        padding: 10px !important;
        margin-bottom: 10px !important;
    }

    .ticket-message [style*="font-size:13px"] {
        font-size: 12px !important;
    }

    .ticket-message [style*="font-size:11px"] {
        font-size: 10px !important;
    }

    /* Ticket attachments */
    .ticket-attachment {
        padding: 8px !important;
    }

    .ticket-attachment i {
        font-size: 12px !important;
    }
}

/* ===================================
   SUBSCRIPTION PLANS - MOBILE SPECIFIC
   =================================== */
@media (max-width: 768px) {
    /* Plan cards */
    [style*="min-height:400px"][style*="border-radius"],
    [style*="min-height:350px"][style*="border-radius"] {
        min-height: auto !important;
        margin-bottom: 16px !important;
    }

    /* Plan price */
    [style*="font-size:32px"][style*="font-weight:700"],
    [style*="font-size:28px"][style*="font-weight:700"] {
        font-size: 24px !important;
    }

    /* Plan features list */
    [style*="font-size:13px"][style*="margin-bottom:8px"] {
        font-size: 12px !important;
    }
}

@media (max-width: 576px) {
    [style*="font-size:32px"][style*="font-weight:700"],
    [style*="font-size:28px"][style*="font-weight:700"],
    [style*="font-size:24px"][style*="font-weight:700"] {
        font-size: 20px !important;
    }
}

/* ===================================
   PROFILE VIEWS - MOBILE SPECIFIC
   =================================== */
@media (max-width: 768px) {
    /* Profile header */
    .profile-header [style*="display:flex"][style*="gap:24px"] {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
    }

    .profile-header [style*="width:120px"],
    .profile-header [style*="width:100px"] {
        width: 80px !important;
        height: 80px !important;
        margin: 0 auto !important;
    }

    /* Form sections */
    .profile-form .row {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    .profile-form .row > [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ===================================
   TOUCH FRIENDLY IMPROVEMENTS
   =================================== */
@media (max-width: 768px) {
    /* Larger touch targets */
    a, button, .btn, [role="button"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Small buttons exception */
    .btn-sm, a.btn-sm {
        min-height: 32px;
    }

    /* Carousel dots exception - keep them small and circular */
    .carousel-dot {
        min-height: auto !important;
        min-width: auto !important;
        width: 10px !important;
        height: 10px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: block !important;
    }

    /* Form inputs */
    input, select, textarea {
        min-height: 44px;
    }

    /* Checkboxes and radios */
    input[type="checkbox"],
    input[type="radio"] {
        min-height: auto;
        width: 20px;
        height: 20px;
    }
}

/* ===================================
   PREVENT HORIZONTAL SCROLL
   =================================== */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    #wrapper {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        padding-right: 0 !important;
    }

    #wrapper.theme-blush,
    #wrapper.theme-cyan,
    #wrapper.theme-green,
    #wrapper.theme-orange {
        width: 100% !important;
        max-width: 100vw !important;
    }

    .container-fluid {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* ===================================
   LANDING PAGE - MOBILE SPECIFIC
   =================================== */

/* Navbar Landing */
@media (max-width: 991px) {
    .navbar {
        padding: 0.5rem 0 !important;
    }

    .navbar-brand img {
        height: 32px !important;
    }

    .navbar-toggler {
        border: 1px solid rgba(0,0,0,0.2) !important;
        padding: 6px 10px !important;
        background: transparent !important;
    }

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

    .navbar-toggler-icon {
        width: 24px !important;
        height: 24px !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 100% !important;
    }

    .navbar-collapse {
        background: white !important;
        padding: 1rem !important;
        border-radius: 8px !important;
        margin-top: 0.75rem !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    }

    .navbar-nav {
        align-items: stretch !important;
    }

    .navbar-nav .nav-item {
        border-bottom: 1px solid #eee;
    }

    .navbar-nav .nav-item:last-child {
        border-bottom: none;
    }

    .navbar-nav .nav-link {
        padding: 12px 16px !important;
        display: block !important;
    }

    .navbar-nav .btn-nav {
        margin: 12px 0 4px !important;
        text-align: center !important;
        display: block !important;
        border-radius: 6px !important;
    }

    .ms-lg-2 {
        margin-left: 0 !important;
    }
}

/* Hero Carousel Landing */
@media (max-width: 768px) {
    /* Reset any body margin */
    body {
        margin: 0 !important;
        padding: 0 !important;
    }

    .hero-carousel {
        overflow: hidden !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    .hero-slides-wrapper {
        display: flex !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hero-slide {
        padding: 110px 20px 70px 20px !important;
        min-height: auto !important;
        min-width: 100% !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .hero-slide > .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 auto !important;
    }

    .hero-slide .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .hero-slide [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hero-content {
        text-align: center !important;
        padding: 0 10px !important;
    }

    .hero-content h1 {
        font-size: 1.5rem !important;
        line-height: 1.35 !important;
        margin-bottom: 1rem !important;
        padding: 0 !important;
    }

    .hero-content p {
        font-size: 0.9rem !important;
        margin-bottom: 1.5rem !important;
        max-width: 100% !important;
        padding: 0 !important;
        line-height: 1.6 !important;
    }

    .hero-buttons {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: center !important;
    }

    .btn-hero {
        padding: 12px 24px !important;
        font-size: 0.875rem !important;
        width: auto !important;
        min-width: 220px !important;
        max-width: 90% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .carousel-indicators-custom {
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .carousel-dot {
        width: 10px !important;
        height: 10px !important;
    }
}

@media (max-width: 480px) {
    .hero-slide {
        padding: 100px 16px 60px 16px !important;
    }

    .hero-content h1 {
        font-size: 1.25rem !important;
    }

    .hero-content p {
        font-size: 0.85rem !important;
    }

    .btn-hero {
        padding: 10px 20px !important;
        font-size: 0.8rem !important;
        min-width: 200px !important;
    }
}

/* Trust Bar Landing */
@media (max-width: 768px) {
    .trust-bar {
        padding: 1rem 0 !important;
    }

    .trust-item {
        flex-direction: column !important;
        text-align: center !important;
        gap: 4px !important;
        font-size: 0.75rem !important;
        padding: 8px 4px !important;
    }

    .trust-item i {
        font-size: 1.25rem !important;
    }

    .trust-item span {
        line-height: 1.2 !important;
    }
}

@media (max-width: 480px) {
    .trust-bar .col-6 {
        padding: 0 4px !important;
    }

    .trust-item {
        font-size: 0.7rem !important;
    }
}

/* Section Titles Landing */
@media (max-width: 768px) {
    .section {
        padding: 3rem 0 !important;
    }

    .section-title {
        margin-bottom: 2rem !important;
    }

    .section-title h2 {
        font-size: 1.35rem !important;
        padding: 0 16px !important;
    }

    .section-title p {
        font-size: 0.875rem !important;
        padding: 0 16px !important;
    }
}

/* Features Grid Landing */
@media (max-width: 768px) {
    .features-grid {
        gap: 1rem !important;
    }

    .feature-card {
        padding: 1.25rem !important;
    }

    .feature-icon {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 1rem !important;
    }

    .feature-icon i {
        font-size: 1.1rem !important;
    }

    .feature-card h4 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .feature-card p {
        font-size: 0.85rem !important;
    }
}

/* How It Works Section Landing */
@media (max-width: 768px) {
    .how-section {
        padding: 3rem 0 !important;
    }

    .how-tabs {
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin-bottom: 2rem !important;
        padding: 0 16px !important;
    }

    .how-tab {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem !important;
        justify-content: center !important;
    }

    .how-flow {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        padding: 0 8px !important;
    }

    .how-flow::before {
        display: none !important;
    }

    .how-step {
        padding: 8px !important;
    }

    .how-step-number {
        width: 44px !important;
        height: 44px !important;
        font-size: 0.9rem !important;
        margin-bottom: 0.75rem !important;
    }

    .how-step h5 {
        font-size: 0.8rem !important;
    }

    .how-step p {
        font-size: 0.7rem !important;
    }

    .how-optional {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
        margin-top: 1.5rem !important;
    }

    .how-optional span {
        font-size: 0.8rem !important;
    }

    .how-features {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: flex-start !important;
        padding: 1.5rem 16px 0 !important;
        margin-top: 1.5rem !important;
    }

    .how-feature {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    .how-flow {
        grid-template-columns: 1fr !important;
        max-width: 200px !important;
        margin: 0 auto !important;
    }

    .how-step-number {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Escrow Section Landing */
@media (max-width: 991px) {
    .escrow-section {
        padding: 3rem 0 !important;
    }

    .escrow-section .row {
        flex-direction: column-reverse !important;
    }

    .escrow-section .col-lg-6 {
        text-align: center !important;
    }

    .escrow-image {
        max-width: 100% !important;
        margin-top: 2rem !important;
    }
}

@media (max-width: 768px) {
    .escrow-badge {
        font-size: 0.7rem !important;
        padding: 0.4rem 1rem !important;
    }

    .escrow-section h2 {
        font-size: 1.35rem !important;
    }

    .escrow-section p {
        font-size: 0.9rem !important;
    }

    .escrow-list li {
        font-size: 0.85rem !important;
        padding: 0.75rem 0 !important;
        text-align: left !important;
    }

    .escrow-list i {
        font-size: 0.9rem !important;
        flex-shrink: 0 !important;
    }
}

/* Plans Section Landing */
@media (max-width: 991px) {
    .plan-card {
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 768px) {
    .plan-card {
        padding: 1.5rem 1rem !important;
    }

    .plan-badge {
        font-size: 0.65rem !important;
        padding: 0.3rem 0.75rem !important;
    }

    .plan-name {
        font-size: 1.1rem !important;
    }

    .plan-price {
        font-size: 1.75rem !important;
    }

    .plan-price small {
        font-size: 0.8rem !important;
    }

    .plan-features {
        margin: 1rem 0 !important;
    }

    .plan-features li {
        font-size: 0.8rem !important;
        padding: 0.4rem 0 !important;
    }

    .btn-plan {
        padding: 0.75rem !important;
        font-size: 0.85rem !important;
    }

}

/* Audience Section Landing */
@media (max-width: 768px) {
    .audience-card {
        padding: 1.5rem 1rem !important;
        margin-bottom: 1rem !important;
    }

    .audience-icon {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 1rem !important;
    }

    .audience-icon i {
        font-size: 1.5rem !important;
    }

    .audience-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
    }

    .audience-list li {
        font-size: 0.85rem !important;
        padding: 0.5rem 0 !important;
    }

    .audience-card .btn-plan {
        padding: 0.625rem 1.5rem !important;
        font-size: 0.85rem !important;
    }
}

/* CTA Section Landing */
@media (max-width: 768px) {
    .cta {
        padding: 3rem 0 !important;
    }

    .cta h2 {
        font-size: 1.35rem !important;
        padding: 0 16px !important;
    }

    .cta p {
        font-size: 0.9rem !important;
        padding: 0 16px !important;
        margin-bottom: 1.5rem !important;
    }

    .cta .btn-hero {
        width: auto !important;
        max-width: none !important;
    }
}

/* Footer Landing */
@media (max-width: 768px) {
    .footer {
        padding: 2rem 0 1rem !important;
    }

    .footer .row {
        text-align: center !important;
    }

    .footer .col-md-4 {
        margin-bottom: 1.5rem !important;
    }

    .footer-brand img {
        height: 28px !important;
    }

    .footer-brand p {
        font-size: 0.75rem !important;
    }

    .footer-links {
        flex-wrap: wrap !important;
        gap: 1rem !important;
        justify-content: center !important;
    }

    .footer-links a {
        font-size: 0.85rem !important;
    }

    .footer-social {
        justify-content: center !important;
        gap: 0.75rem !important;
    }

    .footer-social a {
        width: 40px !important;
        height: 40px !important;
    }

    .footer-bottom {
        margin-top: 1.5rem !important;
        padding-top: 1rem !important;
    }

    .footer-bottom p {
        font-size: 0.75rem !important;
    }
}

/* Back to Top Button Landing */
@media (max-width: 768px) {
    .btn-top {
        width: 42px !important;
        height: 42px !important;
        bottom: 16px !important;
        right: 16px !important;
    }
}

/* Landing Page - Prevent horizontal scroll */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Hero carousel - container must stay at 100vw but wrapper needs to be wider for slides */
    .hero-carousel {
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    /* Other containers - not hero */
    .section > .container,
    .trust-bar > .container,
    .how-section > .container,
    .escrow-section > .container,
    .cta > .container,
    .footer > .container {
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ===================================
   AUTH PAGES - MOBILE SPECIFIC
   =================================== */
@media (max-width: 768px) {
    /* Auth container mobile adjustments */
    .auth-container {
        padding: 20px 16px !important;
        min-height: 100vh !important;
        align-items: flex-start !important;
        padding-top: 40px !important;
    }

    .auth-card {
        padding: 24px 20px !important;
        margin-right: 0 !important;
        margin-bottom: 30px !important;
        border-radius: 16px !important;
        max-width: 100% !important;
    }

    .logo-section img {
        height: 40px !important;
    }

    .form-title {
        font-size: 18px !important;
    }

    .form-subtitle {
        font-size: 12px !important;
    }

    /* Form inputs mobile */
    .form-input {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }

    .form-group label {
        font-size: 12px !important;
    }

    /* Social buttons mobile */
    .social-buttons {
        gap: 12px !important;
    }

    .btn-social {
        width: 44px !important;
        height: 44px !important;
        font-size: 16px !important;
    }

    /* Hide illustration on very small screens */
    .illustration-container {
        display: none !important;
    }

    /* Alerts mobile */
    .alert {
        font-size: 13px !important;
        padding: 10px 14px !important;
    }

    /* Radio groups mobile */
    .radio-group {
        gap: 8px !important;
    }

    .radio-label {
        font-size: 13px !important;
    }
}

@media (max-width: 380px) {
    .auth-container {
        padding: 16px 12px !important;
    }

    .auth-card {
        padding: 20px 16px !important;
    }

    .form-title {
        font-size: 16px !important;
    }

    .form-input {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    .btn-primary {
        padding: 12px !important;
        font-size: 13px !important;
    }

    .social-buttons {
        gap: 10px !important;
    }

    .btn-social {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
    }
}

/* Auth pages - Button centering fix for mobile */
@media (max-width: 768px) {
    .auth-card .btn-primary,
    .auth-card button[type="submit"] {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .auth-card .btn-primary i,
    .auth-card button[type="submit"] i {
        margin-right: 0 !important;
    }
}