/*
 * Custom Front Theme overrides
 * Primary color: #fa5d19 (orange)
 */

/* Root variables */
:root {
    --fn-primary: #fa5d19;
    --fn-primary-rgb: 250, 93, 25;
    --fn-primary-text-emphasis: #b3410f;
    --fn-primary-bg-subtle: rgba(250, 93, 25, 0.1);
    --fn-primary-border-subtle: rgba(250, 93, 25, 0.2);
}

/* Override .btn-primary */
.btn-primary {
    --fn-btn-bg: #fa5d19;
    --fn-btn-hover-bg: #e04d0f;
    background-color: #fa5d19;
    border-color: #fa5d19;
}

/* Override .btn-outline-primary */
.btn-outline-primary {
    --fn-btn-color: #fa5d19;
    --fn-btn-border-color: #fa5d19;
    --fn-btn-hover-bg: #fa5d19;
    --fn-btn-hover-border-color: #fa5d19;
    color: #fa5d19;
    border-color: #fa5d19;
}

/* Browse menu */
.ticketlist-browse-menu {
    max-height: min(70vh, 34rem);
    overflow-y: auto;
}

@media (min-width: 992px) {
    .ticketlist-browse-menu {
        --fn-dropdown-min-width: min(44rem, calc(100vw - 2rem));
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }

    .ticketlist-browse-city-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 1.5rem;
        row-gap: 0.5rem;
    }

    .ticketlist-browse-city-grid > li {
        min-width: 0;
    }
}

@media (min-width: 1200px) {
    .ticketlist-browse-menu {
        --fn-dropdown-min-width: min(56rem, calc(100vw - 2rem));
    }

    .ticketlist-browse-city-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}