/*
 * Compact layout for Home, Events, Tickets, Account, Support and About.
 * Loaded after style.css and scoped to body.is-compact, so no other page changes.
 * Visual only: no markup, forms, CSRF tokens or scripts are touched.
 */

.is-compact {
    --cp-line: #e2e8f0;
    --cp-ink: #0f172a;
    --cp-muted: #64748b;
    --cp-brand: var(--brand-primary, #047857);
    --cp-accent: var(--brand-accent, #10b981);
}

/* ---------- Page rhythm ---------- */
.is-compact .container { padding-left: 1rem; padding-right: 1rem; }

.is-compact .events-page,
.is-compact .tickets-page,
.is-compact .support-page,
.is-compact .about-page {
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
}

.is-compact h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 .75rem; }
.is-compact h2 { line-height: 1.25; }

/* ---------- Event cards (Home, Events, Account) ---------- */
.is-compact .events-grid {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.is-compact .events-grid-account { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1rem; }

.is-compact .event-card-simple .event-image { height: 140px; }
.is-compact .event-card-simple .event-image img { height: 100%; object-fit: cover; }

.is-compact .event-card-simple .event-content {
    padding: .75rem;
    gap: .35rem;
}

.is-compact .event-card-simple .event-content h3 {
    font-size: .98rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.is-compact .event-simple-price { font-size: .92rem; }

.is-compact .event-card-simple .btn-block {
    padding: .5rem .75rem;
    font-size: .78rem;
    border-radius: 8px;
}

.is-compact .event-share-btn { top: 8px; right: 8px; width: 28px; height: 28px; }

/* ---------- Events page ---------- */
.is-compact .events-search { margin-bottom: 1rem; padding-bottom: 1rem; }
.is-compact .events-search form { gap: .5rem; }
.is-compact .events-search input { padding: .6rem 1rem; }

/* ---------- Home ---------- */
.is-compact .home-action-strip { margin: .25rem auto .75rem; }
.is-compact .home-action-btn { min-width: 130px; padding: .5rem 1.1rem; font-size: .9rem; }


.is-compact .home-cta-wrapper { margin: 1rem 0 1.5rem; padding-top: 30px; }
.is-compact .home-cta { min-height: 210px; }
.is-compact .home-cta-content h2 { font-size: 1.6rem; }
.is-compact .home-cta-content p { font-size: .95rem; }
.is-compact .home-cta-leaf { transform: scale(.6); transform-origin: center; }
.is-compact .home-cta-leaves { top: -30px; }

.is-compact .home-qr-code-container { top: 92px; right: 10px; max-width: 160px; }
.is-compact .home-qr-code-card { padding: .65rem; border-radius: 12px; }
.is-compact .home-qr-code-card .qr-code-icon { display: none; }
.is-compact .home-qr-code-card h3,
.is-compact .home-qr-code-card h4 { font-size: .8rem; margin: 0 1.9rem .25rem 0; }
.is-compact .home-qr-code-card p { font-size: .68rem; line-height: 1.3; margin: 0 0 .4rem; }
.is-compact .home-qr-code-card .qr-code-image-wrapper { padding: .3rem; margin-bottom: .4rem; }
.is-compact .home-qr-code-card .qr-code-image { max-width: 100px; }
.is-compact .home-qr-code-card .qr-code-leaf { display: none; }

/* ---------- Tickets ---------- */
.is-compact .tickets-search { margin-bottom: .75rem; padding-bottom: .75rem; }
.is-compact .tickets-search input { padding: .6rem 1rem; font-size: .95rem; }

.is-compact .tickets-list { gap: .85rem; }
.is-compact .ticket-card { padding: .9rem 1rem; }
.is-compact .ticket-card h3 { font-size: 1rem; }
.is-compact .ticket-card p,
.is-compact .ticket-card .ticket-info-item { font-size: .88rem; margin: .15rem 0; }

/* "Get Help" and other ghost buttons were near-invisible (light text on white) */
.is-compact .ghost-btn,
.is-compact .btn-secondary.ghost-btn {
    color: var(--cp-brand) !important;
    background: #fff !important;
    border: 1px solid var(--cp-line) !important;
}
.is-compact .ghost-btn:hover { background: #f1f5f9 !important; }

.is-compact .no-tickets,
.is-compact .tickets-locked { padding: 1.5rem 1.25rem; margin-top: .75rem; }
.is-compact .no-tickets .no-tickets-title { font-size: 1.25rem; }

/* ---------- Account ---------- */
.is-compact .profile-details-container { gap: 1.25rem; }
.is-compact .profile-picture-wrapper,
.is-compact .profile-picture-preview,
.is-compact .profile-picture-placeholder { width: 96px; height: 96px; }
.is-compact .profile-picture-display { margin-bottom: .5rem; }
.is-compact .profile-form-grid { gap: .75rem 1rem; }
.is-compact .profile-edit { padding-top: 1rem; margin-top: 1rem; }
.is-compact .profile-edit-subtitle { margin-bottom: .75rem; }
.is-compact .profile-form .form-group { margin-bottom: .5rem; }
.is-compact .profile-form input { padding: .55rem .8rem; }
.is-compact .profile-form-actions { margin-top: .5rem; }
.is-compact .account-action-btn,
.is-compact .btn-sm { padding: .4rem .8rem; }

/* Profile details as a tidy two-column list */
.is-compact .profile-details-container .info-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .3rem 1.5rem;
    padding: .9rem 1.1rem;
    align-content: center;
}
.is-compact .profile-details-container .info-card p { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .is-compact .profile-details-container .info-card { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Support ---------- */
.is-compact .support-page { padding: 1rem !important; }
.is-compact .support-page .page-header { margin-bottom: .75rem !important; }
.is-compact .support-page .page-header h1 { font-size: 1.5rem !important; margin: 0 !important; }
.is-compact .support-page .page-header p { font-size: .95rem !important; margin: .25rem 0 0 !important; }
.is-compact .tabs-container { margin-bottom: 1rem !important; gap: .5rem !important; }
.is-compact .support-page .tab-btn { padding: .5rem 1.1rem !important; font-size: .9rem !important; }
.is-compact .support-card { padding: 1.1rem 1.25rem !important; }
.is-compact .support-card h2,
.is-compact .support-page .tab-content h2 { font-size: 1.15rem !important; margin: 0 0 .75rem !important; }
.is-compact .support-page .form-group { margin-bottom: .7rem !important; }
.is-compact .support-page input,
.is-compact .support-page select,
.is-compact .support-page textarea { padding: .55rem .75rem !important; }
.is-compact .support-page textarea { min-height: 96px; }
.is-compact .support-page [style*="margin-bottom: 2rem"] { margin-bottom: 1rem !important; }
.is-compact .support-page [style*="margin-bottom: 1.5rem"] { margin-bottom: .85rem !important; }
.is-compact .support-page h2 { font-size: 1.15rem !important; margin: 0 0 .75rem !important; }
.is-compact .response-notice-btn { padding: .6rem 1rem !important; }
.is-compact .response-notice-item { margin-bottom: .85rem !important; }

.is-compact .ticket-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.is-compact .ticket-form .form-group { margin-bottom: .7rem !important; }
.is-compact .ticket-form .form-group:nth-of-type(5),
.is-compact .ticket-form > button { grid-column: 1 / -1; }
.is-compact .ticket-form input,
.is-compact .ticket-form select,
.is-compact .ticket-form textarea { padding: .5rem .7rem !important; font-size: .95rem !important; }
.is-compact .ticket-form textarea { height: 84px; min-height: 84px; }
.is-compact .ticket-form > button { padding: .65rem !important; }
@media (max-width: 720px) {
    .is-compact .ticket-form { grid-template-columns: minmax(0, 1fr); }
}

.is-compact .faq-container { max-width: 100% !important; }
.is-compact .faq-item { margin-bottom: .5rem !important; }
.is-compact .faq-question { padding: .7rem 1rem !important; font-size: .92rem !important; }

/* ---------- About ---------- */
.is-compact .about-page { padding: 1rem 1rem 1.5rem; }
.is-compact .about-container { padding: 1.25rem; gap: 1.1rem; }
.is-compact .about-hero { padding-bottom: 1rem; gap: .6rem; }
.is-compact .about-hero h1 { font-size: 1.7rem; margin-bottom: .4rem; }
.is-compact .about-hero p { font-size: .95rem; margin-bottom: .5rem; line-height: 1.55; }
.is-compact .about-hero .hero-pill { margin-bottom: .4rem; padding: .25rem .8rem; }
.is-compact .about-metrics { padding-bottom: 0; border-bottom: 0; gap: .75rem; }
.is-compact .about-metrics li { padding: .6rem; }
.is-compact .about-metrics span { font-size: 1.5rem; margin-bottom: .2rem; }
.is-compact .about-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; padding-bottom: 1rem; }
.is-compact .about-card { padding: 1rem 1.1rem; }
.is-compact .about-card h2 { font-size: 1.05rem; margin: 0 0 .4rem; }
.is-compact .about-card p,
.is-compact .about-card li { font-size: .9rem; line-height: 1.5; }
.is-compact .about-values { padding-bottom: 1rem; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.is-compact .about-values > div { padding: 1rem 1.1rem; }
.is-compact .about-values h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.is-compact .about-values p { font-size: .9rem; line-height: 1.5; }
.is-compact .about-cta { padding: 1.25rem; }
.is-compact .about-cta h2 { font-size: 1.35rem; }

/* ---------- Small screens ---------- */
@media (max-width: 560px) {
    .is-compact .events-grid,
    .is-compact .events-grid-account { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
    .is-compact .event-card-simple .event-image { height: 110px; }
    .is-compact .event-card-simple .event-content { padding: .55rem; }
    .is-compact .event-card-simple .event-content h3 { font-size: .88rem; }
    .is-compact h1 { font-size: 1.4rem; }
}


/* =====================================================================
   Ticket pages: My Tickets list, ticket details, support request, event details
   ===================================================================== */

/* ---------- My Tickets: one direct row per ticket ---------- */
.is-compact .tickets-page > div:first-child { margin-bottom: .5rem !important; }

.is-compact .tickets-page .tickets-list { display: flex !important; flex-direction: column; gap: .55rem; grid-template-columns: none; }

.is-compact .tickets-page .ticket-card {
    display: grid;
    grid-template-columns: minmax(170px, 1.1fr) minmax(0, 2.3fr) auto;
    align-items: center;
    gap: .35rem 1.25rem;
    padding: .65rem 1rem;
}

.is-compact .tickets-page .ticket-card > div:nth-child(1) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: .25rem;
    margin: 0 !important;
}

.is-compact .tickets-page .ticket-card > div:nth-child(2) {
    display: flex !important;
    flex-wrap: wrap;
    gap: .1rem 1.1rem !important;
    margin: 0 !important;
    font-size: .85rem;
}

.is-compact .tickets-page .ticket-card > div:nth-child(3) {
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end;
}

.is-compact .tickets-page .ticket-card .btn-sm { padding: .4rem .75rem; font-size: .8rem; white-space: nowrap; }

@media (max-width: 900px) {
    .is-compact .tickets-page .ticket-card { grid-template-columns: minmax(0, 1fr); }
    .is-compact .tickets-page .ticket-card > div:nth-child(3) { flex-wrap: wrap !important; justify-content: flex-start; }
}

/* ---------- Account page: same direct rows for "My Tickets" ---------- */
.is-compact .tickets-list:not(#ticketsList) { display: flex !important; flex-direction: column; gap: .55rem; grid-template-columns: none; }

.is-compact .tickets-list:not(#ticketsList) .ticket-card {
    display: grid;
    grid-template-columns: minmax(170px, 1.1fr) minmax(0, 2.3fr) auto;
    grid-template-areas:
        "title details actions"
        "meta  details actions";
    align-items: center;
    gap: .2rem 1.25rem;
    padding: .65rem 1rem;
}
.is-compact .tickets-list:not(#ticketsList) .ticket-card > h3 { grid-area: title; margin: 0; }
.is-compact .tickets-list:not(#ticketsList) .ticket-card > div:nth-child(2) { grid-area: meta; margin: 0 !important; gap: .25rem .9rem !important; font-size: .82rem; }
.is-compact .tickets-list:not(#ticketsList) .ticket-card > div:nth-child(3) {
    grid-area: details;
    display: flex !important;
    flex-wrap: wrap;
    gap: .1rem 1.1rem !important;
    margin: 0 !important;
    font-size: .85rem;
}
.is-compact .tickets-list:not(#ticketsList) .ticket-card > div:nth-child(4) {
    grid-area: actions;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
}
@media (max-width: 900px) {
    .is-compact .tickets-list:not(#ticketsList) .ticket-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "title" "meta" "details" "actions";
    }
}

/* ---------- Ticket lookup forms (event ticket + support request) ---------- */
.is-compact .search-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .25rem 1rem;
    align-items: start;
    padding: .85rem 1rem !important;
    margin-bottom: .85rem !important;
}
.is-compact .search-form .form-group { margin: 0 !important; }
.is-compact .search-form label { margin-bottom: .25rem !important; font-size: .85rem; }
.is-compact .search-form .form-group p { margin: .25rem 0 0 !important; font-size: .78rem !important; }
.is-compact .search-form input { padding: .55rem .75rem !important; }
.is-compact .search-form > button { width: auto !important; margin-top: 1.55rem; padding: .6rem 1.5rem !important; }
@media (max-width: 560px) {
    .is-compact .search-form { grid-template-columns: minmax(0, 1fr); }
    .is-compact .search-form > button { margin-top: .25rem; width: 100% !important; }
}

.is-compact .vet-container,
.is-compact .support-page[style*="max-width: 900px"] { max-width: 1000px !important; padding: 1rem !important; }

.is-compact .vet-container .page-header,
.is-compact .support-page[style*="max-width: 900px"] .page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .15rem 1rem;
    text-align: left !important;
    margin-bottom: .75rem !important;
}
.is-compact .vet-container .page-header h1,
.is-compact .support-page[style*="max-width: 900px"] .page-header h1 { font-size: 1.4rem !important; margin: 0 !important; }
.is-compact .vet-container .page-header p,
.is-compact .support-page[style*="max-width: 900px"] .page-header p { margin: 0 !important; font-size: .9rem !important; }

/* ---------- Event ticket details (view-event-ticket) ---------- */
.is-compact .vet-ticket-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
    padding: 1.1rem 1.25rem !important;
}
.is-compact .vet-ticket-card > * { margin-bottom: 0 !important; margin-top: 0 !important; }

.is-compact .vet-ticket-header { padding-bottom: .6rem !important; border-bottom-width: 1px !important; }
.is-compact .vet-ticket-header h2 { font-size: 1.2rem; margin: 0 0 .15rem !important; }

.is-compact .vet-ticket-card h3 { font-size: .95rem !important; margin: 0 0 .5rem !important; }

.is-compact .vet-event-grid { gap: 1rem; align-items: start; }
.is-compact .vet-poster { max-width: 84px; }
.is-compact .vet-event-grid > div:last-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem 1.25rem;
}
.is-compact .vet-event-grid > div:last-child > div { margin-bottom: 0 !important; }
.is-compact .vet-event-grid > div:last-child > div:first-child { grid-column: 1 / -1; }

.is-compact .vet-ticket-card > div:nth-child(3) { padding: .85rem 1rem !important; }
.is-compact .vet-details-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem 1rem; }

.is-compact .vet-ticket-card > div:nth-child(4) { padding: .7rem 1rem !important; border-width: 1px !important; }
.is-compact .vet-ticket-card > div:nth-child(4) h3 { margin-bottom: .25rem !important; gap: .4rem; }
.is-compact .vet-ticket-card > div:nth-child(4) p { font-size: .88rem; }

.is-compact #ticketQrSection { padding: 1rem !important; }
.is-compact #ticketQrSection h3 { margin-bottom: .6rem !important; }
.is-compact .vet-qr-img { max-width: 190px; }
.is-compact .vet-qr-lock { max-width: 100% !important; padding: 12px !important; }
.is-compact #ticketQrSection > p { margin-top: .6rem !important; font-size: .8rem !important; }

.is-compact .vet-actions { gap: .5rem; }
.is-compact .vet-actions a { padding: .5rem 1rem !important; font-size: .9rem; }

@media (min-width: 900px) {
    /* QR sits beside the details so everything is visible without scrolling.
       Row 5 is an empty flexible filler that absorbs any extra QR height. */
    .is-compact .vet-ticket-card:has(#ticketQrSection) {
        grid-template-columns: minmax(0, 1fr) 320px;
        grid-template-rows: auto auto auto auto 1fr auto;
    }
    .is-compact .vet-ticket-card:has(#ticketQrSection) > .vet-ticket-header { grid-column: 1 / -1; grid-row: 1; }
    .is-compact .vet-ticket-card:has(#ticketQrSection) > div:nth-child(2) { grid-column: 1; grid-row: 2; }
    .is-compact .vet-ticket-card:has(#ticketQrSection) > div:nth-child(3) { grid-column: 1; grid-row: 3; }
    .is-compact .vet-ticket-card:has(#ticketQrSection) > div:nth-child(4) { grid-column: 1; grid-row: 4; }
    .is-compact .vet-ticket-card:has(#ticketQrSection) > #ticketQrSection { grid-column: 2; grid-row: 2 / 6; align-self: start; }
    .is-compact .vet-ticket-card:has(#ticketQrSection) > .vet-actions { grid-column: 1 / -1; grid-row: 6; }
}

/* ---------- Support request details (view-ticket) ---------- */
.is-compact .ticket-details { padding: 1.1rem 1.25rem !important; }
.is-compact .ticket-header { margin-bottom: .75rem !important; padding-bottom: .6rem !important; border-bottom-width: 1px !important; }
.is-compact .ticket-header h2 { font-size: 1.2rem !important; margin-bottom: .15rem !important; }
.is-compact .ticket-meta { flex-direction: row !important; align-items: center !important; }
.is-compact .ticket-info { margin-bottom: .75rem !important; padding: .8rem 1rem !important; gap: .5rem 1rem !important; }
.is-compact .ticket-message { margin-bottom: .75rem !important; padding: .8rem 1rem !important; }
.is-compact .ticket-message h3,
.is-compact .ticket-replies h3,
.is-compact .reply-form-section h3 { font-size: .95rem !important; margin: 0 0 .4rem !important; }
.is-compact .ticket-replies { margin-bottom: .75rem !important; }
.is-compact .reply { padding: .8rem 1rem !important; }
.is-compact .reply-form-section { padding: .85rem 1rem !important; }
.is-compact .reply-form-section textarea { height: 80px; min-height: 80px; padding: .5rem .7rem !important; }
.is-compact .reply-form-section .form-group { margin-bottom: .6rem !important; }
.is-compact .ticket-details > div:last-child { margin-top: .75rem !important; }

/* ---------- Event details: get to ticket selection fast ---------- */
.is-compact .event-details-page { display: flex; flex-direction: column; }
.is-compact .event-details-page > * { min-width: 0; }
.is-compact .event-details-container { order: 1; margin-top: .75rem; gap: 1.1rem; margin-bottom: 1rem; grid-template-columns: minmax(240px, 340px) 1fr; }
.is-compact .event-details-page > .event-ticket-purchase-area { order: 2; margin-bottom: .5rem; }
.is-compact .event-ticket-purchase-area[hidden] { display: none !important; } /* keep the waiting-room gate intact */
.is-compact .event-ticket-purchase-area .ticket-categories-section { margin-top: 0; margin-bottom: 1rem; }
.is-compact .event-details-page > .cart-summary-section { order: 3; }
.is-compact .event-details-page > .event-directions-wrap { order: 4; margin-bottom: 1rem; }
.is-compact .event-details-page > .event-info-grid { order: 5; }

.is-compact .event-poster-section img { max-height: 300px; object-fit: cover; }
.is-compact .event-info-section { padding: 1.1rem 1.25rem; }
.is-compact .event-header { margin-bottom: .6rem; padding-bottom: .6rem; }
.is-compact .event-header h1 { font-size: 1.5rem; margin: 0 0 .4rem; }
.is-compact .event-overview-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.is-compact .overview-item { padding: .5rem 0; gap: .6rem; }
.is-compact .overview-icon { width: 30px; height: 30px; flex: 0 0 30px; }

.is-compact .ticket-categories-table { border-radius: 14px; box-shadow: 0 6px 18px rgba(15, 23, 42, .06); }
.is-compact .ticket-section-header h2 { font-size: 1.2rem; }
.is-compact .ticket-table-row { padding: .65rem 1.1rem; gap: .75rem; }
.is-compact .price-amount { font-size: 1.15rem; }

.is-compact .event-info-grid { gap: 1rem; }
.is-compact .event-info-grid > * { padding: 1.1rem 1.25rem; }

@media (max-width: 760px) {
    .is-compact .event-details-container { grid-template-columns: minmax(0, 1fr); }
    .is-compact .event-poster-section img { max-height: 220px; }
    .is-compact .event-overview-list { grid-template-columns: minmax(0, 1fr); }
}