/* Ticketmatico responsive polish layer */

html {
    -webkit-text-size-adjust: 100%;
}

body.attendize {
    overflow-x: hidden;
}

img,
svg,
canvas,
video,
iframe {
    max-width: 100%;
}

.table-responsive,
.dataTables_wrapper {
    width: 100%;
    overflow-x: auto;
}

.DataTable,
table.dataTable {
    width: 100% !important;
}

@media (max-width: 1280px) {
    .tm-shell,
    .tm-admin-page,
    .tm-events-page,
    .tm-orders-page,
    .tm-admin-shell,
    .tm-event-admin-page,
    .tm-checkin-shell {
        width: min(100% - 32px, 1180px) !important;
        max-width: none !important;
    }

    .tm-top-main {
        grid-template-columns: minmax(220px, 320px) minmax(260px, 1fr) auto !important;
    }

    .tm-admin-hero,
    .tm-event-hero,
    .tm-orders-hero,
    .tm-events-hero {
        padding: 24px !important;
    }
}

@media (max-width: 1100px) {
    body.attendize #main {
        margin-left: 0 !important;
    }

    body.attendize .sidebar.sidebar-left,
    body.attendize aside.sidebar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    body.attendize .sidebar .header,
    body.attendize .sidebar .sidebar-title,
    body.attendize .sidebar .tm-event-context {
        display: none !important;
    }

    body.attendize .sidebar .topmenu,
    body.attendize .sidebar ul {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding: 12px !important;
        white-space: nowrap !important;
    }

    body.attendize .sidebar .topmenu li,
    body.attendize .sidebar ul li {
        flex: 0 0 auto !important;
    }

    body.attendize .sidebar .topmenu li a,
    body.attendize .sidebar ul li a {
        min-height: 42px !important;
        border-radius: 10px !important;
    }

    .tm-stat-grid,
    .tm-orders-stats,
    .tm-checkin-stats,
    .tm-status-strip,
    .tm-quick-actions,
    .tm-events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tm-admin-grid,
    .tm-orders-filter-grid,
    .tm-events-layout,
    .tm-market-grid {
        grid-template-columns: 1fr !important;
    }

    .tm-admin-grid > aside,
    .tm-side {
        grid-column: 1 / -1 !important;
        position: static !important;
    }

    .tm-event-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) !important;
    }
}

@media (max-width: 820px) {
    body.attendize #header.navbar {
        position: relative !important;
        height: auto !important;
        min-height: 70px !important;
    }

    body.attendize #header .navbar-header,
    body.attendize #header .navbar-toolbar {
        float: none !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
    }

    body.attendize #header .navbar-brand {
        width: auto !important;
        min-height: 70px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.attendize #header .navbar-brand img.logo {
        width: 128px !important;
        max-height: 58px !important;
        object-fit: contain !important;
    }

    body.attendize #header .navbar-toolbar {
        padding: 0 14px 12px !important;
    }

    body.attendize #header .navbar-nav.navbar-left,
    body.attendize #header .navbar-nav.navbar-right {
        float: none !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    body.attendize #main > .container-fluid {
        padding: 18px 14px 36px !important;
    }

    .tm-top {
        position: relative !important;
    }

    .tm-alert {
        display: none !important;
    }

    .tm-top-main,
    .tm-event-nav {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    .tm-brand,
    .tm-event-brand {
        justify-content: center !important;
    }

    .tm-search {
        width: 100% !important;
        max-width: none !important;
    }

    .tm-nav,
    .tm-event-process {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .tm-subnav-inner {
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding-bottom: 2px !important;
    }

    .tm-hero,
    .tm-event-hero {
        min-height: auto !important;
    }

    .tm-hero-grid,
    .tm-event-hero-grid {
        grid-template-columns: 1fr !important;
        padding-top: 48px !important;
        padding-bottom: 72px !important;
        text-align: center !important;
    }

    .tm-event-poster,
    .tm-poster {
        width: min(300px, 82vw) !important;
        margin: 24px auto 0 !important;
    }

    .tm-event-poster img,
    .tm-poster img {
        max-height: 440px !important;
        object-fit: contain !important;
    }

    .tm-actions,
    .tm-event-actions,
    .tm-event-meta,
    .tm-event-trust {
        justify-content: center !important;
    }

    .tm-quick-grid,
    .tm-event-card,
    .tm-footer-main,
    .tm-share-card,
    .tm-link-row {
        grid-template-columns: 1fr !important;
    }

    .tm-event-body {
        grid-template-columns: 76px minmax(0, 1fr) !important;
        grid-template-areas:
            "date info"
            "action action" !important;
    }

    .tm-buy,
    .tm-btn,
    .tm-event-btn,
    .tm-admin-btn,
    .tm-export-btn,
    .tm-filter-actions .btn {
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    .tm-shell,
    .tm-admin-page,
    .tm-events-page,
    .tm-orders-page,
    .tm-admin-shell,
    .tm-event-admin-page,
    .tm-checkin-shell {
        width: calc(100% - 24px) !important;
    }

    h1,
    .tm-hero h1,
    .tm-event-copy h1 {
        font-size: clamp(36px, 12vw, 52px) !important;
        line-height: 1 !important;
        overflow-wrap: anywhere !important;
    }

    h2,
    .tm-admin-hero h2,
    .tm-event-hero h2,
    .tm-orders-hero h2,
    .tm-events-hero h2 {
        font-size: clamp(26px, 9vw, 38px) !important;
        line-height: 1.06 !important;
        overflow-wrap: anywhere !important;
    }

    .tm-brand-logo,
    .tm-logo-limpio {
        width: 104px !important;
        height: 62px !important;
    }

    .tm-brand-logo img,
    .tm-logo-limpio img {
        width: 100px !important;
        height: 56px !important;
    }

    .tm-brand strong {
        font-size: 22px !important;
    }

    .tm-search {
        height: 48px !important;
    }

    .tm-nav {
        display: none !important;
    }

    .tm-stat-grid,
    .tm-orders-stats,
    .tm-checkin-stats,
    .tm-status-strip,
    .tm-quick-actions,
    .tm-events-grid,
    .tm-orders-filter-grid {
        grid-template-columns: 1fr !important;
    }

    .tm-admin-hero,
    .tm-event-hero,
    .tm-orders-hero,
    .tm-events-hero,
    .tm-orders-card,
    .tm-admin-panel,
    .tm-events-panel,
    .tm-link-manager,
    .attendee_list {
        border-radius: 12px !important;
    }

    .tm-admin-actions,
    .tm-event-actions,
    .tm-orders-actions,
    .tm-events-toolbar,
    .tm-link-manager-head,
    .tm-link-form,
    .tm-share-inline {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .tm-event-card,
    .tm-events-stage,
    .tm-side-card,
    .tm-admin-panel,
    .tm-orders-card,
    .tm-events-panel,
    .tm-link-manager {
        box-shadow: 0 14px 34px rgba(7,18,52,.08) !important;
    }

    .tm-event-media {
        min-height: 280px !important;
    }

    .tm-event-body {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "date"
            "info"
            "action" !important;
        text-align: center !important;
    }

    .tm-date,
    .tm-event-date {
        margin: 0 auto !important;
    }

    .tm-footer,
    footer.tm-footer {
        min-height: auto !important;
        padding: 28px 0 !important;
    }

    .tm-footer-bottom {
        display: grid !important;
        gap: 10px !important;
        text-align: center !important;
    }

    .dataTables_filter,
    .dataTables_length,
    .dataTables_info,
    .dataTables_paginate {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
        margin: 8px 0 !important;
    }

    .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .tm-orders-table-card .table-responsive,
    .tm-event-admin-page .table-responsive {
        border: 0 !important;
    }
}

@media (max-width: 460px) {
    body.attendize #main > .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .tm-hero-grid,
    .tm-event-hero-grid {
        padding-top: 36px !important;
        padding-bottom: 52px !important;
    }

    .tm-event-poster,
    .tm-poster {
        width: min(260px, 88vw) !important;
    }

    .tm-event-poster img,
    .tm-poster img {
        max-height: 360px !important;
    }

    .tm-event-copy p,
    .tm-hero p,
    .tm-admin-hero p,
    .tm-event-hero p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .tm-admin-btn,
    .tm-event-btn,
    .tm-btn {
        min-height: 44px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .tm-stat-card,
    .tm-orders-stat,
    .tm-checkin-card {
        min-height: 92px !important;
        padding: 16px !important;
    }

    .tm-stat-card strong,
    .tm-orders-stat strong,
    .tm-checkin-card strong {
        font-size: 28px !important;
    }
}