/* Tropical Spa booking tiles — production integration.
   Selected tiles are the only tiles filled with gold. */

:root {
    --tropical-booking-gold: #d9c36a;
    --tropical-booking-gold-light: #f1da7a;
    --tropical-booking-green: #88a94d;
    --tropical-booking-ink: #0a0d0a;
    --tropical-booking-card: #171a17;
    --tropical-booking-muted: #a5a99f;
}

body:has(main [wire\:id] button[wire\:click^="selectTimeSlot("])
    main > div.container:has(> [wire\:id]) {
    width: 100%;
    max-width: 90rem;
    margin-top: 0 !important;
    margin-bottom: 3rem !important;
    padding-top: 2.25rem !important;
}

body:has(main [wire\:id] button[wire\:click^="selectTimeSlot("])
    main > div.container:has(> [wire\:id])::before {
    display: block;
    margin: 0 auto 1.75rem;
    color: var(--tropical-booking-gold);
    content: "WYBIERZ TERMIN I ZAREZERWUJ";
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-align: center;
}

/* Every booking surface uses the same dark card and gold outline. */
body:has(main [wire\:id] button[wire\:click^="selectTimeSlot("])
    main [wire\:id] .bg-neutral-900\/75,
body:has(main [wire\:id] button[wire\:click^="selectTimeSlot("])
    main [wire\:id] .bg-neutral-900 {
    border-color: rgba(217, 195, 106, 0.34) !important;
    border-radius: 0.75rem !important;
    background: var(--tropical-booking-card) !important;
}

/* Calendar: selected day is fully gold. */
body:has(main [wire\:id] button[wire\:click^="selectTimeSlot("])
    main [wire\:id] a.bg-gold {
    border: 1px solid var(--tropical-booking-gold-light) !important;
    background: var(--tropical-booking-gold) !important;
    color: var(--tropical-booking-ink) !important;
    box-shadow: 0 0.75rem 1.75rem rgba(217, 195, 106, 0.16);
}

/* Products and extras: neutral by default, gold only after selection. */
body:has(main [wire\:id] button[wire\:click^="selectTimeSlot("])
    main [wire\:id] div[wire\:click^="selectProduct("],
body:has(main [wire\:id] button[wire\:click^="selectTimeSlot("])
    main [wire\:id] button[wire\:click^="toggleExtra("] {
    min-height: 4.25rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(217, 195, 106, 0.34) !important;
    border-radius: 0.75rem !important;
    background: var(--tropical-booking-card) !important;
    color: #f6f3e8 !important;
}

body:has(main [wire\:id] button[wire\:click^="selectTimeSlot("])
    main [wire\:id] div.bg-gold,
body:has(main [wire\:id] button[wire\:click^="selectTimeSlot("])
    main [wire\:id] button.bg-gold {
    border-color: var(--tropical-booking-gold-light) !important;
    background: var(--tropical-booking-gold) !important;
    color: var(--tropical-booking-ink) !important;
    box-shadow: 0 0.75rem 1.75rem rgba(217, 195, 106, 0.16);
}

/* Time slots share the voucher-tile anatomy. */
.grid:has(> button[wire\:click^="selectTimeSlot("]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.65rem !important;
}

.grid:has(> button[wire\:click^="selectTimeSlot("])
    > button[wire\:click^="selectTimeSlot("] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    min-height: 4.25rem;
    align-items: center;
    gap: 0.35rem 0.9rem;
    padding: 0.85rem 1rem !important;
    border: 1px solid rgba(217, 195, 106, 0.34) !important;
    border-radius: 0.75rem !important;
    background: var(--tropical-booking-card) !important;
    color: #f6f3e8 !important;
    text-align: left;
    box-shadow: none;
}

.grid:has(> button[wire\:click^="selectTimeSlot("])
    > button[wire\:click^="selectTimeSlot("] > span:first-child {
    grid-column: 1;
    color: inherit;
    font-size: 1rem !important;
    font-weight: 800 !important;
}

.grid:has(> button[wire\:click^="selectTimeSlot("])
    > button[wire\:click^="selectTimeSlot("] > span:first-child::after {
    display: block;
    margin-top: 0.2rem;
    color: var(--tropical-booking-green);
    content: "DOSTĘPNA";
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.grid:has(> button[wire\:click^="selectTimeSlot("])
    > button[wire\:click^="selectTimeSlot("]::after {
    grid-column: 2;
    grid-row: 1;
    color: var(--tropical-booking-gold);
    content: "WYBIERZ";
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* Selected time slot: full gold fill, dark copy, visible selected label. */
.grid:has(> button[wire\:click^="selectTimeSlot("])
    > button[wire\:click^="selectTimeSlot("].bg-gold {
    border-color: var(--tropical-booking-gold-light) !important;
    background: var(--tropical-booking-gold) !important;
    color: var(--tropical-booking-ink) !important;
    box-shadow: 0 0.75rem 1.75rem rgba(217, 195, 106, 0.16);
}

.grid:has(> button[wire\:click^="selectTimeSlot("])
    > button[wire\:click^="selectTimeSlot("].bg-gold::after {
    color: var(--tropical-booking-ink);
    content: "WYBRANO";
}

.grid:has(> button[wire\:click^="selectTimeSlot("])
    > button[wire\:click^="selectTimeSlot("].bg-gold > span:first-child::after {
    color: #31521b;
    content: "WYBRANY TERMIN";
}

.grid:has(> button[wire\:click^="selectTimeSlot("])
    > button[wire\:click^="selectTimeSlot("]:hover,
.grid:has(> button[wire\:click^="selectTimeSlot("])
    > button[wire\:click^="selectTimeSlot("]:focus-visible {
    border-color: var(--tropical-booking-green) !important;
    outline: 3px solid rgba(217, 195, 106, 0.22);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    body:has(main [wire\:id] button[wire\:click^="selectTimeSlot("])
        main > div.container:has(> [wire\:id]) {
        padding-top: 1.5rem !important;
    }

    .grid:has(> button[wire\:click^="selectTimeSlot("])
        > button[wire\:click^="selectTimeSlot("] {
        min-height: 4.5rem;
    }
}
.tropical-quick-actions{position:fixed!important;right:1rem;bottom:1rem;z-index:10020!important;display:flex!important;visibility:visible!important;opacity:1!important;gap:.5rem;pointer-events:auto}.tropical-quick-actions a{display:flex;align-items:center;justify-content:center;min-height:3rem;padding:.75rem 1rem;border-radius:.75rem;background:#f6f4ed;color:#0a0d0a!important;font-weight:800;text-decoration:none;box-shadow:0 .5rem 1.5rem #0006}.tropical-quick-actions a:last-child{background:#d9c36a}@media(max-width:767px){body{padding-bottom:5rem}.tropical-quick-actions{left:.75rem;right:.75rem;bottom:.75rem}.tropical-quick-actions a{flex:1;font-size:.9rem}}