/*
 * Uses the site's own Elementor global design tokens (--e-global-color-*)
 * with sensible fallbacks, so the page matches the rest of the site
 * instead of introducing its own palette.
 */
.sem-event-product {
    --sem-accent: var(--e-global-color-accent, #FFBA00);
    --sem-text: var(--e-global-color-primary, #161620);
    --sem-border: #D5D5D6;
    --sem-surface: #F4F4F4;
    --sem-muted: #737373;

    color: var(--sem-text);
    font-family: 'Open Sans', sans-serif;
}

/*
 * The theme's own .site-main width rule (hello-elementor theme.css) uses a
 * different breakpoint scale (500/800/1440px at 575/768/1200px) than
 * Elementor's own container system (1440/1024/767px, --container-max-width
 * in the kit CSS) that the header, footer and Elementor-built pages like
 * /about/ actually use. Between roughly 768-1199px those two disagree - the
 * theme rule shrinks .site-main to just 800px while Elementor content stays
 * wider - which is the visible mismatch. Overriding explicitly here with
 * Elementor's own numbers (and !important, since the theme rule has higher
 * selector specificity) keeps this page aligned with the rest of the site
 * at every width, not just above 1200px. This stylesheet only loads on
 * event product pages, so it's naturally scoped.
 */
.site-main {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 40px;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .site-main {
        padding: 0 20px;
    }
}

.sem-event-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
}

.sem-event-main {
    flex: 1 1 60%;
    min-width: 280px;
}

.sem-event-main .product_title {
    margin: 0 0 20px;
}

.sem-event-gallery {
    margin-bottom: 24px;
}

/* WooCommerce's woocommerce-layout.css targets div.images via a rule that
   includes #content (an ID selector), e.g. ".woocommerce #content div.product
   div.images{float:left;width:48%}". Only !important reliably beats an ID
   selector, so it's required here to let our flex layout control sizing. */
.sem-event-gallery .woocommerce-product-gallery.images {
    float: none !important;
    width: 100% !important;
}

.sem-event-gallery img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    border-radius: 12px;
}

.sem-event-about h2 {
    margin-bottom: 12px;
}

.sem-event-about-content {
    font-size: 16px;
    line-height: 1.7;
    color: var(--sem-text);
}

.sem-event-sidebar {
    flex: 1 1 320px;
    max-width: 380px;
    width: 100%;
    position: sticky;
    top: 24px;
    align-self: flex-start;
}

.sem-event-info-card {
    border: 1px solid var(--sem-border);
    border-radius: 12px;
    padding: 24px;
    background: #fff;
}

.sem-event-info-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.sem-event-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--sem-surface);
}

.sem-event-info-item:last-child {
    border-bottom: none;
}

.sem-event-info-icon {
    flex: 0 0 auto;
    font-size: 1.1em;
    line-height: 1;
}

.sem-event-price {
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--sem-border);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.5em;
    font-weight: 700;
}

.sem-event-price p {
    margin: 0;
}

.sem-event-price .woocommerce-Price-amount {
    color: var(--sem-text);
}

/* WooCommerce's own woocommerce.css sets a fixed 3.631em .quantity .qty width
   and floats div.quantity - both with enough specificity to beat plain class
   overrides. Rebuild this whole block as one flex column with a fixed gap so
   spacing is intentional instead of a stack of leftover default margins. */
.sem-event-booking {
    margin-top: 16px;
}

/* Stock count isn't shown to customers on the booking widget. */
.sem-event-booking p.stock {
    display: none;
}

.sem-event-booking form.cart {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    width: 100%;
}

.sem-event-booking div.quantity {
    float: none !important;
    margin: 0 !important;
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.sem-event-booking .quantity .qty {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 12px;
    text-align: center;
}

/* +/- stepper buttons injected by event-product.js. The site's global
   button style (.elementor-kit-914 button{...}) forces a gold pill on every
   <button>, same as the ticket-tier cards - !important keeps these compact
   and neutral instead. */
.sem-qty-btn {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sem-border) !important;
    border-radius: 8px !important;
    background: var(--sem-surface) !important;
    color: var(--sem-text) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 0 !important;
    cursor: pointer;
}

.sem-qty-btn:hover {
    border-color: var(--sem-accent) !important;
}

.sem-qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.sem-event-booking .single_add_to_cart_button {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    margin: 0;
}

/* Ticket-tier cards (only used for variable products with a single "type" attribute). */
.sem-ticket-tiers {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

/* The site's Elementor kit CSS (.elementor-kit-914 button{...}) styles every
   <button> as a gold pill - higher specificity than a plain class, so it
   wins over these rules unless forced with !important. Ticket-tier cards are
   selection controls, not the primary action, so they deliberately stay a
   neutral row here; the accent pill is reserved for the real Book Now
   button below. */
.sem-ticket-tier {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px !important;
    border: 1px solid var(--sem-border) !important;
    border-radius: 8px !important;
    background: var(--sem-surface) !important;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-align: left;
    color: var(--sem-text) !important;
    line-height: normal !important;
    transition: border-color 0.15s ease;
}

.sem-ticket-tier:hover {
    border-color: var(--sem-accent) !important;
}

.sem-ticket-tier--selected {
    border-color: var(--sem-accent) !important;
    border-width: 2px !important;
    background: #fff !important;
}

.sem-ticket-tier--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sem-ticket-tier__name {
    font-weight: 600;
}

.sem-ticket-tier__price {
    color: var(--sem-muted);
}

@media (max-width: 767px) {
    .sem-event-sidebar {
        position: static;
        max-width: 100%;
    }
}