/* Thai Massage Booking - site styling
   Palette taken from the Annual Meetings 2026 Thailand branding (deep blue / gold) */

:root {
    --am-blue-dark: #0b2f5c;
    --am-blue: #1a4f9c;
    --am-blue-light: #eaf1fb;
    --am-gold: #f2b632;
    --am-gray: #6c757d;
}

body {
    background-color: #f4f7fb;
    font-family: "Segoe UI", Arial, sans-serif;
}

.am-header {
    background: linear-gradient(135deg, var(--am-blue-dark) 0%, var(--am-blue) 100%);
    color: #fff;
    padding: 18px 0;
    margin-bottom: 24px;
}

.am-header .am-eyebrow {
    letter-spacing: 2px;
    font-size: 0.8rem;
    color: var(--am-gold);
    text-transform: uppercase;
    font-weight: 600;
}

.am-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 2px 0 0 0;
}

.am-header .am-sub {
    font-size: 0.95rem;
    opacity: 0.9;
}

.am-nav a {
    color: #fff;
    opacity: 0.85;
    margin-left: 18px;
    text-decoration: none;
    font-size: 0.9rem;
}

.am-nav a:hover {
    opacity: 1;
    text-decoration: underline;
}

.am-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(11, 47, 92, 0.08);
    padding: 24px;
    margin-bottom: 20px;
    border-top: 4px solid var(--am-gold);
}

.am-footer {
    text-align: center;
    color: var(--am-gray);
    font-size: 0.85rem;
    padding: 24px 0;
}

/* Flex (not grid) on .slot-list itself, kept structure-agnostic on purpose: RadioButtonList
   may or may not wrap its items in an extra <span> depending on RepeatLayout/RepeatDirection,
   and depending on that we can't reliably target "the real container" by a fixed id (that's
   what broke the Massage Area colors - see the label[for=...] comment on Booking.aspx).
   ".slot-list > span { display: contents }" neutralizes any such wrapper if present (its
   children get promoted to be direct flex items of .slot-list) and is a harmless no-op if
   no such wrapper exists. Either way, the hidden (position:absolute) radio inputs drop out
   of flex layout entirely, so the labels end up as the only real flex items - two per row
   via their flex-basis below. */
.slot-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.slot-list > span {
    display: contents;
}

.slot-list input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.slot-list label {
    flex: 0 0 calc(50% - 4px);
    box-sizing: border-box;
    text-align: center;
    padding: 8px 10px;
    border: 1.5px solid var(--am-blue);
    border-radius: 6px;
    color: var(--am-blue);
    cursor: pointer;
    font-weight: 600;
    user-select: none;
    transition: all .15s ease-in-out;
}

.slot-list label:hover {
    background-color: var(--am-blue-light);
}

.slot-list input[type="radio"]:checked + label {
    background-color: var(--am-blue);
    border-color: var(--am-blue);
    color: #fff;
}

.slot-list input[type="radio"]:disabled + label {
    opacity: 0.55;
    cursor: not-allowed;
    background-color: #eeeeee;
    border-color: #cccccc;
    color: #999999;
    text-decoration: line-through;
}

.slot-list input[type="radio"]:disabled + label:hover {
    background-color: #eeeeee;
}

.stat-tile {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(11, 47, 92, 0.08);
    padding: 18px;
    text-align: center;
}

.stat-tile .stat-value {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--am-blue-dark);
}

.stat-tile .stat-label {
    font-size: 0.85rem;
    color: var(--am-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.badge-available {
    background-color: #1c9c5c;
}

.badge-booked {
    background-color: var(--am-blue);
}

.booking-number {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--am-blue-dark);
}

#scanResultBox {
    min-height: 90px;
}

@media print {
    .am-header, .am-nav, .no-print {
        display: none !important;
    }
}