/**
 * Optimus Tickets 5.0 — Frontend styles
 * Design system: "Blu Notte Romano" — Trips to Rome
 */

:root {
  --tr-primary-dark: #1E2A44;
  --tr-primary-hover: #2E4068;
  --tr-accent-gold: #C9962B;
  --tr-accent-gold-light: #E6B85A;
  --tr-neutral-stone: #E8E2DA;
  --tr-neutral-cream: #FAF6F0;
  --tr-text-primary: #1A1F2E;
  --tr-text-secondary: #5A6478;
  --tr-success: #2E8B57;
  --tr-error: #C9302C;
  --tr-warning: #E0A800;
  --tr-info: #3A7CA5;
  --tr-font-heading: 'Playfair Display', Georgia, serif;
  --tr-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --tr-weight-regular: 400;
  --tr-weight-semibold: 600;
  --tr-weight-bold: 700;
  --tr-radius-sm: 2px;
  --tr-radius-md: 4px;
}

/* ─── Booking widget (product page) ─────────────────────────────── */

.selltickets-booking-widget {
    margin: 1rem 0;
    padding: 1.25rem;
    border: 1px solid var(--tr-neutral-stone);
    border-radius: var(--tr-radius-sm);
    background: #FFFFFF;
    font-family: var(--tr-font-body);
}

.selltickets-booking-widget .booking-label {
    font-family: var(--tr-font-body);
    font-weight: var(--tr-weight-semibold);
    font-size: 14px;
    color: var(--tr-text-primary);
    margin-bottom: 0.5rem;
    display: block;
}

.selltickets-booking-widget .booking-date-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--tr-neutral-stone);
    border-radius: var(--tr-radius-sm);
    font-family: var(--tr-font-body);
    font-size: 16px;
    color: var(--tr-text-primary);
    background: #FFFFFF;
    transition: border-color 0.2s ease;
}

.selltickets-booking-widget .booking-date-input:focus {
    border-color: var(--tr-primary-dark);
    outline: none;
}

.selltickets-booking-widget .booking-date-input::placeholder { color: #A0A0A0; }

.selltickets-booking-widget select {
    padding: 10px 14px;
    border: 2px solid var(--tr-neutral-stone);
    border-radius: var(--tr-radius-sm);
    font-family: var(--tr-font-body);
    font-size: 14px;
    color: var(--tr-text-primary);
    background: #FFFFFF;
    transition: border-color 0.2s ease;
}

.selltickets-booking-widget select:focus { border-color: var(--tr-primary-dark); outline: none; }

/* ─── Daterangepicker — Blu Notte Romano ─────────────────────── */

.daterangepicker { font-family: var(--tr-font-body) !important; border: 1px solid var(--tr-neutral-stone) !important; border-radius: var(--tr-radius-sm) !important; }

.daterangepicker .calendar-table th.month,
.daterangepicker th.month {
    background: var(--tr-primary-dark) !important;
    color: #FFFFFF !important;
    font-family: var(--tr-font-heading) !important;
    font-weight: var(--tr-weight-semibold) !important;
    font-size: 16px !important;
    padding: 8px !important;
}

.daterangepicker th.prev,
.daterangepicker th.next { background: var(--tr-primary-dark) !important; color: #FFFFFF !important; }

.daterangepicker th.prev:hover,
.daterangepicker th.next:hover { background: var(--tr-primary-hover) !important; }

.daterangepicker td.available:not(.off):not(.disabled) {
    background-color: var(--tr-neutral-cream) !important;
    color: var(--tr-text-primary) !important;
    font-weight: var(--tr-weight-semibold);
    border: 1px solid var(--tr-neutral-stone) !important;
    border-radius: var(--tr-radius-sm) !important;
    transition: all 0.2s ease;
}

.daterangepicker td.available:not(.off):not(.disabled):hover {
    background-color: var(--tr-neutral-stone) !important;
    color: var(--tr-text-primary) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--tr-primary-dark) !important;
    color: #FFFFFF !important;
    font-weight: var(--tr-weight-semibold);
    border-color: var(--tr-primary-dark) !important;
}

.daterangepicker td.today:not(.active) { border: 2px solid var(--tr-accent-gold) !important; font-weight: var(--tr-weight-semibold); }

.daterangepicker td.disabled,
.daterangepicker td.off.disabled {
    color: var(--tr-error) !important;
    text-decoration: none !important;
    background-color: #FFF1F0 !important;
    cursor: not-allowed !important;
    opacity: 0.8;
}

.daterangepicker td.off:not(.disabled) { color: #bbb !important; background: transparent !important; }

/* ─── Combo widget ─────────────────────────────────────────────── */

#st-combo-widget { font-family: var(--tr-font-body); border: 1px solid var(--tr-neutral-stone); border-radius: var(--tr-radius-sm); overflow: hidden; }

#st-combo-widget .st-combo-price {
    font-family: var(--tr-font-body);
    font-weight: var(--tr-weight-semibold);
    font-size: 18px;
    color: var(--tr-text-primary);
}

#st-combo-widget .st-combo-btn {
    background: #FFFFFF;
    border: 2px solid var(--tr-primary-dark);
    color: var(--tr-primary-dark);
    width: 32px; height: 32px; line-height: 28px;
    text-align: center; font-size: 18px; font-weight: var(--tr-weight-bold);
    cursor: pointer; border-radius: 0; transition: all 0.2s ease; padding: 0;
}

#st-combo-widget .st-combo-btn:hover { background: var(--tr-primary-dark); color: #FFFFFF; }

#st-combo-add {
    background: var(--tr-primary-dark); color: #FFFFFF;
    border: 2px solid var(--tr-primary-dark);
    font-family: var(--tr-font-body); font-weight: var(--tr-weight-semibold);
    font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 14px 24px; cursor: pointer; transition: all 0.2s ease;
    width: 100%; border-radius: var(--tr-radius-sm);
}

#st-combo-add:hover { background: var(--tr-primary-hover); border-color: var(--tr-primary-hover); }
#st-combo-add:disabled { background: var(--tr-neutral-stone); border-color: var(--tr-neutral-stone); color: var(--tr-text-secondary); cursor: not-allowed; }

/* ─── Cart widget ──────────────────────────────────────────────── */

.selltickets-checkout-info { margin: 1rem 0; font-family: var(--tr-font-body); }
.selltickets-checkout-info > h4 { font-family: var(--tr-font-heading) !important; font-weight: var(--tr-weight-semibold) !important; font-size: 18px !important; color: var(--tr-primary-dark) !important; }

.selltickets-product-card { border: 1px solid var(--tr-neutral-stone) !important; border-radius: var(--tr-radius-sm) !important; }
.selltickets-product-card .card-header { background: var(--tr-neutral-cream) !important; border-bottom: 1px solid var(--tr-neutral-stone) !important; }
.selltickets-product-card .card-header strong { font-family: var(--tr-font-heading); font-weight: var(--tr-weight-semibold); color: var(--tr-text-primary); }

.selltickets-product-card table td { color: var(--tr-text-primary); border-bottom: 1px solid var(--tr-neutral-stone); }
.selltickets-product-card table tr[style*="border-top:2px"] td { font-family: var(--tr-font-heading); }

.selltickets-checkout-info .ticket-person { border-bottom: 1px dashed var(--tr-neutral-stone) !important; }
.selltickets-checkout-info .ticket-person:last-child { border-bottom: none !important; }

.selltickets-checkout-info input[type="text"],
.selltickets-checkout-info input[type="tel"] {
    border: 2px solid var(--tr-neutral-stone) !important;
    border-radius: var(--tr-radius-sm) !important;
    padding: 10px 14px !important;
    font-family: var(--tr-font-body) !important;
    font-size: 14px !important;
    color: var(--tr-text-primary) !important;
    transition: border-color 0.2s ease;
}

.selltickets-checkout-info input:focus { border-color: var(--tr-primary-dark) !important; outline: none !important; box-shadow: none !important; }
.selltickets-checkout-info input::placeholder { color: #A0A0A0; }

.selltickets-checkout-info select.selltickets-phone-prefix {
    border: 2px solid var(--tr-neutral-stone) !important;
    border-radius: var(--tr-radius-sm) !important;
    font-family: var(--tr-font-body) !important;
    font-size: 14px !important;
    padding: 10px 6px !important;
}

.selltickets-save-info {
    background: var(--tr-primary-dark) !important; color: #FFFFFF !important;
    border: 2px solid var(--tr-primary-dark) !important;
    font-family: var(--tr-font-body) !important; font-weight: var(--tr-weight-semibold) !important;
    font-size: 14px !important; text-transform: uppercase !important;
    letter-spacing: 0.5px !important; padding: 10px 24px !important;
    border-radius: var(--tr-radius-sm) !important; transition: all 0.2s ease !important;
}

.selltickets-save-info:hover { background: var(--tr-primary-hover) !important; border-color: var(--tr-primary-hover) !important; color: #FFFFFF !important; }
.selltickets-save-info.btn-success { background: var(--tr-success) !important; border-color: var(--tr-success) !important; }
.selltickets-save-info.btn-danger { background: var(--tr-error) !important; border-color: var(--tr-error) !important; }

#selltickets-checkout-warning {
    background: #FFF8E1 !important;
    border: 1px solid var(--tr-warning) !important;
    border-left: 4px solid var(--tr-warning) !important;
    border-radius: var(--tr-radius-sm) !important;
    color: var(--tr-text-primary) !important;
    font-family: var(--tr-font-body) !important;
}

/* ─── Error messages ───────────────────────────────────────────── */

#st-date-error-msg, #st-time-error-msg {
    color: var(--tr-error) !important; background: #FFF1F0 !important;
    border-left: 4px solid var(--tr-error) !important;
    border-radius: var(--tr-radius-sm) !important;
    font-family: var(--tr-font-body) !important;
    font-size: 13px !important; font-weight: var(--tr-weight-semibold) !important;
    padding: 8px 12px !important;
}

/* ─── Checkout summary (read-only) ─────────────────────────────── */

#selltickets-checkout-summary { font-family: var(--tr-font-body); }
#selltickets-checkout-summary strong { font-family: var(--tr-font-heading); font-weight: var(--tr-weight-semibold); }

/* ─── Seat map ──────────────────────────────────────────────────── */

.selltickets-seat-map { display: inline-block; margin: 1rem 0; font-family: var(--tr-font-body); }
.selltickets-seat-map .seat { display: inline-block; width: 32px; height: 32px; margin: 2px; text-align: center; line-height: 32px; font-size: 11px; border-radius: var(--tr-radius-sm); cursor: pointer; transition: all 0.2s ease; }
.selltickets-seat-map .seat.available { background: var(--tr-text-secondary); color: #fff; }
.selltickets-seat-map .seat.available:hover { background: var(--tr-primary-dark); }
.selltickets-seat-map .seat.selected { background: var(--tr-primary-dark); color: #fff; }
.selltickets-seat-map .seat.reserved { background: var(--tr-error); color: #fff; cursor: not-allowed; }
.selltickets-seat-map .seat.empty { background: transparent; cursor: default; }
.selltickets-seat-map .seat-legend { margin-top: 1rem; font-size: 13px; color: var(--tr-text-secondary); }
.selltickets-seat-map .seat-legend span { display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle; border-radius: var(--tr-radius-sm); }

/* ─── My tickets (account) ──────────────────────────────────────── */

.selltickets-my-tickets { font-family: var(--tr-font-body); }
.selltickets-my-tickets .ticket-row { border: 1px solid var(--tr-neutral-stone); border-radius: var(--tr-radius-sm); }
.selltickets-my-tickets .ticket-name { font-family: var(--tr-font-heading); font-weight: var(--tr-weight-semibold); font-size: 18px; color: var(--tr-text-primary); }
.selltickets-my-tickets .ticket-qr img { max-width: 150px; }

.selltickets-my-tickets .btn-primary {
    background: var(--tr-primary-dark) !important; border-color: var(--tr-primary-dark) !important;
    font-family: var(--tr-font-body) !important; font-weight: var(--tr-weight-semibold) !important;
    font-size: 14px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important;
    border-radius: var(--tr-radius-sm) !important;
}

.selltickets-my-tickets .btn-primary:hover { background: var(--tr-primary-hover) !important; border-color: var(--tr-primary-hover) !important; }
.selltickets-my-tickets .badge-info { background: var(--tr-neutral-cream) !important; color: var(--tr-primary-dark) !important; border: 1px solid var(--tr-neutral-stone) !important; }
.selltickets-my-tickets .badge-success { background: var(--tr-success) !important; }
.selltickets-my-tickets .badge-secondary { background: var(--tr-neutral-stone) !important; color: var(--tr-text-secondary) !important; }

/* ─── Spinner ──────────────────────────────────────────────────── */

.selltickets-spinner { width: 24px; height: 24px; border: 3px solid var(--tr-neutral-stone); border-top-color: var(--tr-accent-gold); border-radius: 50%; animation: st-spin 0.8s linear infinite; display: inline-block; }
@keyframes st-spin { to { transform: rotate(360deg); } }

/* ─── Responsive ──────────────────────────────────────────────── */

@media (max-width: 768px) {
    .selltickets-booking-widget { padding: 0.75rem; }
    .selltickets-my-tickets .ticket-holder-row .col-md-1,
    .selltickets-my-tickets .ticket-holder-row .col-md-3,
    .selltickets-my-tickets .ticket-holder-row .col-md-4 { text-align: left !important; margin-bottom: 4px; }
    .selltickets-my-tickets .ticket-holder-row { padding: 8px 0; border-bottom: 1px solid var(--tr-neutral-stone); }
    .selltickets-my-tickets .st-qr-img img { max-width: 200px; }
    .selltickets-checkout-info input[type="text"],
    .selltickets-checkout-info input[type="tel"] { width: 100%; margin-bottom: 4px; }
    .st-combo-btn, .selltickets-save-info, #st-combo-add { min-height: 44px; min-width: 44px; }
}

@media (max-width: 480px) {
    .selltickets-checkout-info .ticket-person > div[style*="display:flex"] { flex-direction: column !important; }
    .selltickets-checkout-info .ticket-person > div[style*="display:flex"] > div { min-width: 100% !important; }
}

/* ─── Hide PS native when combo widget active ─────────────────── */
/* Use visibility + sizing instead of display:none to keep elements
   accessible to Alysum/PS JS that reads data attributes from them */

.st-combo-active .product-variants,
.st-combo-active .product-quantity,
.st-combo-active .product-add-to-cart {
    visibility: hidden !important;
    position: absolute !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}