/**
 * WPS Organizer Styles
 *
 * Styles for organizer login, dashboard, and management pages.
 * Extracted from inline styles in organizer-shortcodes.php
 *
 * @package WPS
 * @since 1.0.0
 */

/* CSS Custom Properties (Variables) */
:root {
    --wps-organizer-primary: var(--wps-primary-color);
    --wps-organizer-primary-hover: var(--wps-primary-color);
    --wps-organizer-text-muted: #666;
    --wps-organizer-bg-light: #f9f9f9;
    --wps-organizer-border-color: #ddd;
    --wps-organizer-error-color: #ff4444;
    --wps-organizer-success-color: #28a745;
    --wps-organizer-info-color: #17a2b8;
    --wps-organizer-disabled-bg: #f0f0f0;
    --wps-organizer-disabled-text: #999;
}

/* Dynamic Color Support */
.wps-wrap {
    --wps-organizer-primary: var(--wps-primary-color, #fda329);
    --wps-organizer-primary-hover: var(--wps-primary-color, #ffb84d);
}

/* Custom Login Wrapper */
#custom-login-wrapper {
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    background: var(--wps-organizer-bg-light);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

#custom-login-wrapper h2,
#custom-login-wrapper h3,
#custom-login-wrapper h4 {
    text-align: center;
    color: var(--wps-organizer-primary);
    margin-bottom: 15px;
}

#custom-login-wrapper p {
    color: var(--wps-organizer-text-muted);
}

#custom-login-wrapper a {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background: var(--wps-organizer-primary);
    color: white;
    text-decoration: none;
    border-radius: 4px;
}

#custom-login-wrapper .form-group {
    margin-bottom: 15px;
}

#custom-login-wrapper .form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--wps-organizer-border-color);
    border-radius: 4px;
    box-sizing: border-box;
}

#custom-login-wrapper #login-btn {
    width: 100%;
    padding: 12px;
    background: var(--wps-organizer-primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

#custom-login-wrapper #login-btn:hover {
    background: var(--wps-organizer-primary-hover);
}

#custom-login-wrapper .btn-edit,
#custom-login-wrapper .btn-dashboard {
    display: block;
    text-align: center;
    padding: 10px;
    background: var(--wps-organizer-primary);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 10px;
}

/* Organizer Dashboard & Management Pages */
.organizer-wps-books {
    /* Fills the wps-panel-body content column — no self-imposed cap, so
       widening body.wps-organizer-page .wps-container--wide (see below)
       actually reaches the management tables instead of being wasted. */
    max-width: 100%;
    padding: 0px;
    box-sizing: border-box;
}

/* ── Page Title Row (PHP-rendered flex wrapper: header.wps-page-header + user chip) ── */
.wps-page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

.wps-page-title-row .wps-page-header {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.wps-page-title-row .wps-page-header h1.wps-page-title {
    margin-bottom: 0;
}

/* User chip variant rendered next to the page title */
.wps-user-chip--title {
    background: rgba(253, 163, 41, 0.1);
    border-color: rgba(253, 163, 41, 0.25);
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .wps-user-chip--title .wps-user-chip__name {
        display: none;
    }

    .wps-user-chip--title .wps-user-chip__name.showmobile {
        display: block;
    }
}

/* ── Organizer Toolbar ── */
.wps-org-toolbar {
    /*
     * Solid dark card — distinct on any theme background.
     * On dark themes: warm dark card vs cool-dark page bg.
     * On light themes: near-black nav bar (classic pro look).
     * Themes can override via --wps-org-toolbar-bg.
     */
    background: var(--wps-org-toolbar-bg, #1c1209);
    border: 1px solid rgba(253, 163, 41, 0.22);
    border-top: 3px solid var(--wps-organizer-primary, #fda329);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.wps-org-toolbar__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
}

.wps-org-toolbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wps-org-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #ccc;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.wps-org-back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
}

.wps-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 5px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
}

.wps-user-chip__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--wps-organizer-primary, #fda329);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.wps-user-chip__name {
    font-size: 13px;
    font-weight: 600;
    color: #ccc;
    white-space: nowrap;
}

.wps-org-logout-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    background: rgba(255, 80, 80, 0.08);
    border: 1px solid rgba(255, 80, 80, 0.18);
    border-radius: 6px;
    color: #ff8888;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.wps-org-logout-btn:hover {
    background: rgba(255, 80, 80, 0.18);
    color: #ffaaaa;
    text-decoration: none;
}

/* History icon button */
.wps-org-history-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #b0b0c8;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.wps-org-history-btn:hover {
    background: rgba(var(--_tb-accent, 253, 163, 41), 0.12);
    border-color: rgba(253, 163, 41, 0.3);
    color: #fda329;
    text-decoration: none;
}

@media (max-width: 600px) {
    .wps-org-history-btn {
        padding: 7px 10px;
    }
}

/* Mobile (≤ 540px): stack toolbar into two rows (back | all actions)
   and compact every button so the action row fits on a single line.   */
@media (max-width: 540px) {
    .wps-org-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .wps-org-toolbar__right {
        justify-content: flex-start;
        gap: 6px;
    }

    .wps-toolbar-req-btn,
    .wps-org-back-btn,
    .wps-org-history-btn,
    .wps-org-logout-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* ── Request History Page ── */
.wps-rh-empty {
    text-align: center;
    padding: 64px 24px;
    color: #888;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
}

.wps-rh-empty__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(253, 163, 41, 0.14), rgba(253, 163, 41, 0.05));
    border: 1px solid rgba(253, 163, 41, 0.18);
    border-radius: 50%;
    color: var(--wps-organizer-primary, #fda329);
    box-shadow: 0 4px 14px rgba(253, 163, 41, 0.16);
}

/* Status banner on edit request page */
.wps-edit-status-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    color: #ccc;
}

.wps-edit-status-banner--published {
    background: rgba(40, 167, 69, 0.08);
    border-color: rgba(40, 167, 69, 0.25);
}

.wps-edit-status-banner--rejected {
    background: rgba(220, 53, 69, 0.08);
    border-color: rgba(220, 53, 69, 0.25);
}

.wps-edit-status-banner--pending {
    background: rgba(253, 163, 41, 0.08);
    border-color: rgba(253, 163, 41, 0.25);
}

.wps-rh-empty__title {
    font-size: 17px;
    font-weight: 700;
    color: #1e1b16;
    margin: 0 0 8px;
}

.wps-rh-empty__sub {
    font-size: 13px;
    color: #8a8a8a;
    margin: 0;
    max-width: 340px;
    margin-inline: auto;
    line-height: 1.5;
}

/* Type badge */
.wps-rh-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.wps-rh-badge--event {
    background: rgba(253, 163, 41, 0.12);
    color: #c97d00;
    border: 1px solid rgba(253, 163, 41, 0.3);
}

.wps-rh-badge--raffle {
    background: rgba(23, 162, 184, 0.1);
    color: #0e7a8e;
    border: 1px solid rgba(23, 162, 184, 0.25);
}

/* Status badge */
.wps-rh-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.wps-rh-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wps-rh-status--draft {
    background: rgba(150, 150, 150, 0.1);
    color: #666;
    border: 1px solid rgba(150, 150, 150, 0.2);
}

.wps-rh-status--draft::before {
    background: #aaa;
}

.wps-rh-status--pending {
    background: rgba(255, 165, 0, 0.1);
    color: #b07800;
    border: 1px solid rgba(255, 165, 0, 0.25);
}

.wps-rh-status--pending::before {
    background: #f0a500;
}

.wps-rh-status--approved {
    background: rgba(40, 167, 69, 0.1);
    color: #1a6e30;
    border: 1px solid rgba(40, 167, 69, 0.25);
}

.wps-rh-status--approved::before {
    background: #28a745;
}

.wps-rh-status--rejected {
    background: rgba(220, 53, 69, 0.1);
    color: #9e1c2a;
    border: 1px solid rgba(220, 53, 69, 0.25);
}

.wps-rh-status--rejected::before {
    background: #dc3545;
}

.wps-rh-na {
    color: #bbb;
    font-size: 13px;
}

#wpsRequestHistoryTable {
    width: 100%;
    table-layout: auto;
}

#wpsRequestHistoryTable thead th {
    background-color: var(--wps-organizer-bg-light);
    color: var(--wps-organizer-text-muted);
    font-weight: 600;
    text-align: left;
    padding: 12px 15px;
}

#wpsRequestHistoryTable tbody td {
    padding: 12px 15px;
    vertical-align: middle;
}

.organizer-wps-book-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.organizer-wps-book-head h3 {
    margin: 0px;
    color: #333;
}

/* ── Booking head: quick confirmed / pending stat pills ── */
.wps-book-quick-stats {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
    margin-left: auto;
}

.wps-book-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    min-width: 72px;
}

.wps-book-stat+.wps-book-stat {
    border-left: 1px solid #f0f0f0;
}

.wps-book-stat__value {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.wps-book-stat__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wps-organizer-text-muted, #666);
    margin-top: 4px;
    white-space: nowrap;
}

.wps-book-stat--confirmed .wps-book-stat__value {
    color: var(--wps-organizer-success-color, #28a745);
}

.wps-book-stat--pending .wps-book-stat__value {
    color: var(--wps-organizer-primary, #fda329);
}

/* Responsive: on small screens stack to full-width row */
@media (max-width: 600px) {
    .wps-book-quick-stats {
        width: 100%;
        margin-left: 0;
    }

    .wps-book-stat {
        flex: 1;
    }
}

/* DataTables Styles */
.organizer-wps-books .dataTables_wrapper {
    width: 100%;
    overflow-x: auto;
}

#wpsBooksTable {
    width: 100%;
    table-layout: auto;
}

#wpsBooksTable thead th,
#wpsBooksTable tbody td {
    text-align: left;
    /* padding: 12px 15px; */
    white-space: normal;
}

/* Keep compact columns from wrapping */
#wpsBooksTable tbody td:nth-child(1),
#wpsBooksTable tbody td:nth-child(2),
#wpsBooksTable tbody td:nth-child(5) {
    white-space: nowrap;
}

/* Action column: buttons stay on one line — no fixed/minimum width means
   a typical 2-4 button row already fits comfortably on its own; the
   dataTables_wrapper's own overflow-x:auto (below) is the fallback for
   the rare row with several bracket-integration buttons at once, so the
   table scrolls horizontally instead of the buttons ever wrapping. */
#wpsBooksTable tbody td:last-child {
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
}

#wpsBooksTable tbody td ul {
    margin: 0;
    padding-left: 20px;
    white-space: normal;
}

/* Cap the attendees column so it wraps rather than bloating the table width */
#wpsBooksTable th:nth-child(4),
#wpsBooksTable tbody td:nth-child(4) {
    min-width: 108px;
    max-width: 220px;
    white-space: normal;
    overflow-wrap: break-word;
}

#wpsBooksTable th {
    background-color: var(--wps-organizer-bg-light);
    color: var(--wps-organizer-text-muted);
    font-weight: 600;
}

/* Buttons */
.btn-view {
    display: inline-block;
    padding: 6px 12px;
    background: var(--wps-organizer-primary);
    border: 1px solid var(--wps-organizer-primary);
    color: white !important;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.btn-view:hover {
    background: var(--wps-organizer-primary);
}

.btn-confirm {
    display: inline-block;
    padding: 6px 12px;
    background: #28a745;
    color: white !important;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    margin-right: 5px;
    text-align: center;
    transition: background-color 0.3s ease;
}

.btn-confirm:hover {
    background: #218838;
}

.btn-edit {
    display: inline-block;
    padding: 6px 12px;
    background: var(--wps-organizer-primary);
    color: white !important;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    margin-right: 5px;
    text-align: center;
    transition: background-color 0.3s ease;
}

.btn-edit:hover {
    background: #e0a800;
}

.btn-delete {
    display: inline-block;
    padding: 6px 12px;
    background: var(--wps-organizer-error-color);
    color: white !important;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    margin-right: 5px;
    margin-top: 5px;
    text-align: center;
    transition: background-color 0.3s ease;
}

.btn-delete:hover {
    background: var(--wps-organizer-error-color);
}

/* ---- Winner Header Buttons ---- */
.btn-draw-winner,
.btn-announce-winner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--wps-organizer-info-color, #17a2b8);
    color: #FFF !important;
    font-size: 13px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.1s;
    text-decoration: none;
    margin-left: auto;
    text-transform: capitalize;
    font-weight: 600;
}

.btn-draw-winner:hover,
.btn-announce-winner:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.btn-draw-winner:active,
.btn-announce-winner:active {
    transform: translateY(0);
}

/* ---- Winner Banner (below header when winner exists) ---- */
.wps-winner-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    background: linear-gradient(90deg, #fff8e1, #fffde7);
    border: 2px solid #ffd200;
    border-radius: 8px;
    padding: 12px 20px;
    margin-bottom: 16px;
}

/* The Change/Redraw Winner button now lives inside the banner, next to
   the winner's name — margin-left:auto (already set above) pushes it to
   the far right of this flex row automatically. */
.wps-winner-banner .btn-draw-winner,
.wps-winner-banner .btn-announce-winner {
    padding: 7px 14px;
}

.wps-winner-banner__trophy {
    font-size: 28px;
    line-height: 1;
}

.wps-winner-banner__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wps-winner-banner__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #b38600;
}

.wps-winner-banner__name {
    font-size: 17px;
    font-weight: 700;
    color: #333;
}

/* ---- Winner Row Highlight ---- */
.wps-winner-row {
    background-color: #fffde7 !important;
}

.wps-winner-row-badge {
    font-size: 14px;
    margin-left: 4px;
    vertical-align: middle;
    cursor: default;
}

/* ---- Winner Modal Overlay ---- */
.wps-winner-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wps-winner-modal-box {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 32px 28px 28px;
    min-width: 340px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    text-align: center;
}

.wps-winner-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.15s;
}

.wps-winner-modal-close:hover {
    color: #333;
}

/* ---- Draw (Raffle) Modal ---- */
.wps-draw-modal h3,
.wps-announce-modal h3 {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 700;
    color: #222;
}

/* ---- Draw / Announce Action Buttons ---- */
.wps-draw-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.wps-draw-btn-confirm {
    padding: 10px 22px;
    background: linear-gradient(135deg, #f7971e, #ffd200);
    color: #333;
    font-weight: 700;
    font-size: 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.wps-draw-btn-confirm:hover {
    opacity: 0.85;
}

.wps-draw-btn-confirm:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}


/* ---- Announce (Event) Modal ---- */
.wps-announce-subtitle {
    font-size: 13px;
    color: #666;
    margin: -10px 0 14px;
}

.wps-radio-list {
    text-align: left;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 20px;
}

.wps-radio-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.12s;
    font-size: 14px;
    color: #333;
}

.wps-radio-item:last-child {
    border-bottom: none;
}

.wps-radio-item:hover {
    background: #fffde7;
}

.wps-radio-item--current {
    background: #fff8e1;
}

.wps-radio-item input[type="radio"] {
    flex-shrink: 0;
    accent-color: #f7971e;
}

.wps-radio-item em {
    font-style: italic;
    color: #b38600;
    font-size: 12px;
}

.btn-view.ml-10 {
    margin-left: 10px;
}

/* Disabled State */
.btn-disabled,
.wps-disabled-feature {
    color: var(--wps-organizer-disabled-text);
    padding: 6px 12px;
    background: var(--wps-organizer-disabled-bg);
    border-radius: 4px;
    display: inline-block;
    cursor: not-allowed;
}

/* Messages */
.wps-message {
    padding: 10px 15px;
    margin: 15px 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wps-message-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: var(--wps-organizer-success-color);
}

.wps-message-error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: var(--wps-organizer-error-color);
}

.wps-message-warning {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
}

.wps-message-info {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: var(--wps-organizer-info-color);
}

/* No Events/Items Message */
.wps-no-items {
    text-align: center;
    color: var(--wps-organizer-error-color);
    min-height: 150px;
    padding: 40px 20px;
    background: var(--wps-organizer-bg-light);
    border-radius: 8px;
}

/* Access Denied Box */
.wps-access-denied {
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    background: var(--wps-organizer-bg-light);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.wps-access-denied h2 {
    color: var(--wps-organizer-primary);
    margin-bottom: 15px;
}

.wps-access-denied p {
    color: var(--wps-organizer-text-muted);
}

/* Links with primary color */
a.wps-primary-link,
.organizer-wps-books a[href][target="_blank"] {
    color: var(--wps-organizer-primary);
    text-decoration: none;
}

a.wps-primary-link:hover {
    text-decoration: underline;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #custom-login-wrapper {
        margin: 20px;
        padding: 20px;
    }

    .organizer-wps-books {
        padding: 10px;
    }

    .wps-org-toolbar {
        padding: 10px 12px;
        gap: 8px;
    }

    .wps-org-toolbar__left,
    .wps-org-toolbar__right {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   ORGANIZER TABLE SCROLL CONTAINER
   The theme's own wps-template.css forces `.wps-page-body table { display:
   inline-table }` and a blanket `.wps-page-body * { max-width: 100% }`,
   both aimed at other content on the site; for THIS table they do the
   opposite of what we want — capping it at the wrapper's width forces
   columns to compress/overlap instead of letting the wrapper scroll.
   .dataTables_wrapper is the one designated scroll boundary; the table
   inside is freed to be its natural width.
   ══════════════════════════════════════════════════════════════════════════ */
.organizer-wps-books .dataTables_wrapper {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.organizer-wps-books .dataTables_wrapper table.dataTable {
    display: table;
    width: auto !important;
    min-width: 100%;
    max-width: none !important;
}

/* Belt-and-braces: the header row never gets a colored fill in the
   organizer panel, regardless of DataTables version/sort-state class names. */
.organizer-wps-books table.dataTable thead th,
.organizer-wps-books table.dataTable thead th.sorting_asc,
.organizer-wps-books table.dataTable thead th.sorting_desc,
.organizer-wps-books table.dataTable thead th.dt-orderable-asc,
.organizer-wps-books table.dataTable thead th.dt-orderable-desc,
.organizer-wps-books table.dataTable thead th.dt-ordering-asc,
.organizer-wps-books table.dataTable thead th.dt-ordering-desc {
    background: transparent !important;
    background-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLET (up to 1024px)
   ══════════════════════════════════════════════════════════════════════════ */
/* DataTables Customization */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: var(--wps-organizer-text-muted);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--wps-organizer-primary) !important;
    border: 1px solid var(--wps-organizer-primary);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--wps-organizer-bg-light);
    border: 1px solid var(--wps-organizer-border-color);
}

/* ─── Analytics Dashboard ───────────────────────────────────────── */

.wps-analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 24px;
}

.wps-analytics-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    text-decoration: none !important;
    color: inherit !important;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.wps-analytics-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.wps-analytics-card--event {
    border-top: 4px solid var(--wps-organizer-primary, #fda329);
}

.wps-analytics-card--raffle {
    border-top: 4px solid #17a2b8;
}

.wps-analytics-card__top {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 24px 20px;
}

.wps-analytics-card__icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.wps-analytics-card--event .wps-analytics-card__icon-wrap {
    background: rgba(253, 163, 41, 0.12);
}

.wps-analytics-card--raffle .wps-analytics-card__icon-wrap {
    background: rgba(23, 162, 184, 0.12);
}

.wps-analytics-card__count {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    color: #1a1a1a;
}

.wps-analytics-card__type-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wps-organizer-text-muted);
    margin-top: 5px;
}

.wps-analytics-card__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #f0f0f0;
    flex-grow: 1;
}

.wps-stat-item {
    padding: 14px 8px;
    text-align: center;
    border-right: 1px solid #f0f0f0;
}

.wps-stat-item:last-child {
    border-right: none;
}

.wps-stat-item__value {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.wps-stat-item__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wps-organizer-text-muted);
    margin-top: 5px;
}

.wps-stat-item--confirmed .wps-stat-item__value {
    color: var(--wps-organizer-success-color, #28a745);
}

.wps-stat-item--pending .wps-stat-item__value {
    color: var(--wps-organizer-primary, #fda329);
}

.wps-stat-item--revenue .wps-stat-item__value {
    color: green;
    font-size: 15px;
}

.wps-analytics-card__footer {
    padding: 14px 24px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f5f5f5;
}

.wps-analytics-card--event .wps-analytics-card__footer {
    color: var(--wps-organizer-primary, #fda329);
}

.wps-analytics-card--raffle .wps-analytics-card__footer {
    color: #17a2b8;
}

.wps-analytics-card__footer-arrow {
    font-size: 16px;
    transition: transform 0.2s;
}

.wps-analytics-card:hover .wps-analytics-card__footer-arrow {
    transform: translateX(4px);
}

.wps-dashboard-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--wps-organizer-text-muted);
    font-size: 15px;
}

/* Responsive: 2-column stats on very narrow cards */
@media (max-width: 480px) {
    .wps-analytics-card__stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .wps-stat-item:nth-child(2) {
        border-right: none;
    }

    .wps-stat-item:nth-child(3) {
        border-top: 1px solid #f0f0f0;
    }

    .wps-stat-item:nth-child(4) {
        border-top: 1px solid #f0f0f0;
    }

    .wps-analytics-card__top {
        padding: 20px 16px 16px;
    }

    .wps-analytics-card__count {
        font-size: 34px;
    }

    .wps-analytics-card__footer {
        padding: 12px 16px;
    }
}

/* ─── End Analytics Dashboard ─────────────────────────────────── */

/* Booked By Cell — inline pencil icon */
.wps-booked-by-cell {
    display: flex;
    align-items: center;
    gap: 5px;
}

.wps-edit-booking-btn {
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    padding: 3px 5px;
    color: var(--wps-organizer-primary);
    font-size: 15px;
    line-height: 1;
    border-radius: 3px;
}

/* Edit Booking Modal Overlay */
#wpsEditBookingModal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

#wpsEditBookingModal.is-open {
    display: flex;
}

.wps-modal-inner {
    background: #fff;
    border-radius: 8px;
    padding: 32px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: wpsModalIn 0.22s ease;
}

@keyframes wpsModalIn {
    from {
        transform: translateY(-16px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.wps-modal-inner h4 {
    margin: 0 0 20px;
    font-size: 17px;
    color: #222;
}

.wps-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 23px;
    cursor: pointer;
    color: #999;
    line-height: 1;
    padding: 4px;
    width: 30px;
}

.wps-modal-close:hover {
    color: #333;
}

.wps-modal-field {
    margin-bottom: 16px;
}

.wps-modal-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    color: #555;
}

.wps-modal-field input[type="text"],
.wps-modal-field input[type="email"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.wps-modal-field input[type="text"]:focus,
.wps-modal-field input[type="email"]:focus {
    border-color: var(--wps-organizer-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(253, 163, 41, 0.15);
}

.wps-modal-save {
    background: var(--wps-organizer-primary);
    color: #fff;
    border: none;
    padding: 11px 0;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-top: 4px;
    transition: background 0.2s;
}

.wps-modal-save:hover,
.wps-modal-save:focus {
    background: var(--wps-organizer-primary);
    color: #fff;
}

.wps-modal-message {
    margin-top: 10px;
    font-size: 13px;
    min-height: 18px;
    text-align: center;
}

/* ── Place a Request Button ─────────────────────────────────────────────── */
.wps-btn-request {
    display: inline-block;
    background: var(--wps-organizer-primary, #fda329);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 6px;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: background 0.18s, transform 0.14s;
}

.wps-btn-request:hover,
.wps-btn-request:focus {
    background: var(--wps-organizer-primary, #fda329);
    color: #fff;
    text-decoration: none;
}

/* ── Event Request Form ─────────────────────────────────────────────────── */

.wps-request-form-wrap {
    margin-top: 24px;
}

.wps-request-form {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.wps-form-section {
    padding: 28px 32px;
    border-bottom: 1px solid #f0f0f0;
}

.wps-form-section:last-of-type {
    border-bottom: none;
}

.wps-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.wps-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #222;
    margin: 0 0 20px;
    padding-left: 12px;
    border-left: 3px solid var(--wps-organizer-primary, #fda329);
    line-height: 1.3;
}

.wps-section-head .wps-section-title {
    margin-bottom: 0;
}

/* Sub-section divider used inside merged form sections */
.wps-form-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 18px;
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.wps-form-divider::before,
.wps-form-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ebebeb;
}

.wps-form-row {
    margin-bottom: 18px;
}

.wps-form-row:last-child {
    margin-bottom: 0;
}

.wps-form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
}

.wps-form-row input[type="text"],
.wps-form-row input[type="number"],
.wps-form-row input[type="date"],
.wps-form-row input[type="email"],
.wps-form-row textarea,
.wps-form-row select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    background: #fafafa;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: auto;
}

.wps-form-row input:focus,
.wps-form-row textarea:focus,
.wps-form-row select:focus {
    outline: none;
    border-color: var(--wps-organizer-primary, #fda329);
    box-shadow: 0 0 0 3px rgba(253, 163, 41, 0.15);
    background: #fff;
}

.wps-form-row textarea {
    resize: vertical;
    min-height: 100px;
}

.wps-form-row--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.wps-required {
    color: #e53e3e;
    margin-left: 2px;
}

.wps-field-hint {
    margin: 5px 0 0;
    font-size: 12px;
    color: #888;
}

/* Time row */
.wps-time-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wps-time-row select {
    flex: 1;
    min-width: 0;
    padding: 9px 6px;
}

.wps-time-sep {
    font-weight: 700;
    color: #666;
    flex-shrink: 0;
}

/* Inline checkbox row (booking limit / ticket qty) */
.wps-inline-check {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wps-inline-check input[type="number"] {
    flex: 1;
}

.wps-check-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500 !important;
    color: #555;
    white-space: nowrap;
    cursor: pointer;
    margin: 0;
}

.wps-check-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

/* Add Ticket button */
.wps-btn-add-ticket {
    background: transparent;
    border: 1px solid var(--wps-organizer-primary, #fda329);
    color: var(--wps-organizer-primary, #fda329);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.wps-btn-add-ticket:hover {
    background: var(--wps-organizer-primary, #fda329);
    color: #fff;
}

/* Form actions / submit */
.wps-form-actions {
    padding: 24px 32px;
    background: #f8f9fa;
    border-top: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.wps-submit-btn {
    background: var(--wps-organizer-primary, #fda329);
    color: #fff;
    border: none;
    font-size: 15px;
    font-weight: 700;
    padding: 12px 32px;
    border-radius: 7px;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.18s, transform 0.14s, opacity 0.15s;
    white-space: nowrap;
}

.wps-submit-btn:hover {
    background: var(--wps-organizer-primary, #fda329);
    transform: translateY(-1px);
    color: #fff;
}

.wps-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.wps-request-message {
    font-size: 13px;
    font-weight: 500;
    min-height: 18px;
    flex: 1;
}

.wps-request-message.is-error {
    color: #c00;
}

.wps-request-message.is-success {
    color: #2e7d32;
}

/* Organizer display row */
.wps-organizer-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: #f0f4ff;
    border: 1px solid #d0d8f0;
    border-radius: 6px;
    font-size: 14px;
}

.wps-organizer-name {
    font-weight: 600;
    color: #333;
}

.wps-organizer-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    background: var(--wps-organizer-primary, #fda329);
    color: #fff;
    border-radius: 20px;
    letter-spacing: 0.04em;
}

/* Ticket / Price Repeater rows */
.wps-repeater-row {
    margin-bottom: 10px;
}

.wps-repeater-row-inner {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    background: #f8f9fa;
    border: 1px solid #e8e8e8;
    border-radius: 7px;
    padding: 14px 16px;
}

.wps-repeater-field {
    flex: 1;
    min-width: 0;
}

.wps-repeater-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 5px;
}

.wps-repeater-field select,
.wps-repeater-field input[type="number"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
}

.wps-repeater-field select:focus,
.wps-repeater-field input:focus {
    outline: none;
    border-color: var(--wps-organizer-primary, #fda329);
}

.wps-repeater-delete-btn {
    background: #e53e3e;
    border: 1px solid #e53e3e;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.wps-repeater-delete-btn:hover {
    background: #c53030;
    border-color: #c53030;
}

/* Standalone checkbox row (e.g. waiting list) */
.wps-standalone-check {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wps-standalone-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--wps-organizer-primary, #fda329);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .wps-form-section {
        padding: 20px 16px;
    }

    .wps-form-actions {
        padding: 18px 16px;
        flex-direction: column;
        align-items: stretch;
    }

    .wps-submit-btn {
        width: 100%;
        text-align: center;
    }

    .wps-form-row--two {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .wps-time-row select {
        padding: 8px 4px;
    }

    .wps-inline-check {
        flex-wrap: wrap;
    }
}

/* ── Bookmark Button ── */
.wps-btn-bookmark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: transparent;
    color: var(--wps-organizer-primary, #fda329);
    border: 2px solid var(--wps-organizer-primary, #fda329);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    transition: background 0.18s, color 0.18s;
    white-space: nowrap;
    vertical-align: middle;
    text-transform: unset;
}

.wps-btn-bookmark:hover,
.wps-btn-bookmark:focus-visible {
    background: var(--wps-organizer-primary, #fda329);
    color: #fff;
    outline: none;
}

.wps-btn-bookmark svg {
    flex-shrink: 0;
}

/* ── Bookmark Modal — ID selectors override theme class rules ── */
#wps-bookmark-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

#wps-bookmark-modal.is-open {
    display: flex;
}

#wps-bm-card {
    position: relative;
    background: #15152a;
    border-radius: 14px;
    width: 340px;
    max-width: 100%;
    overflow: hidden;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
    animation: wps-bm-pop 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    flex-shrink: 0;
}

@keyframes wps-bm-pop {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#wps-bm-top-bar {
    height: 3px;
    background: linear-gradient(90deg, #fda329 0%, #ffd080 100%);
}

#wps-bm-close {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #888;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    z-index: 2;
}

#wps-bm-close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

#wps-bm-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 0;
}

#wps-bm-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(253, 163, 41, 0.14);
    border-radius: 9px;
    color: #fda329;
}

#wps-bm-head h3 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 3px;
    line-height: 1.2;
}

#wps-bm-subtitle {
    font-size: 12px;
    color: #666;
    margin: 0;
    line-height: 1.3;
}

/* Action area — keyboard shortcut or mobile steps */
#wps-bm-action {
    padding: 18px 18px 0;
}

/* Desktop keyboard shortcut display */
.wps-bm-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
}

.wps-bm-keys {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wps-bm-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 44px;
    padding: 0 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom: 3px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'SFMono-Regular', Consolas, monospace;
    color: #e8e8e8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.wps-bm-key-plus {
    color: #444;
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
}

.wps-bm-shortcut-hint {
    font-size: 12px;
    color: #555;
    margin: 0;
    text-align: center;
}

/* Mobile step pills */
.wps-bm-mobile {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wps-bm-mob-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    font-size: 13px;
    color: #bbb;
    line-height: 1.4;
}

.wps-bm-mob-num {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fda329;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wps-bm-mob-step strong {
    color: #e0e0e0;
}

/* Copy URL row */
#wps-bm-copy-row {
    display: flex;
    margin: 14px 18px 18px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
}

#wps-bm-url {
    flex: 1;
    min-width: 0;
    padding: 9px 11px;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    color: #888;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    outline: none;
}

#wps-bm-copy-btn {
    flex-shrink: 0;
    padding: 9px 16px;
    background: #fda329;
    color: #fff;
    border: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}

#wps-bm-copy-btn:hover {
    opacity: 0.85;
}

#wps-bm-copy-btn.copied {
    background: #28a745;
}

@media (max-width: 400px) {
    #wps-bm-card {
        width: 100%;
        border-radius: 10px;
    }

    .wps-btn-bookmark {
        padding: 9px 14px;
        font-size: 13px;
        justify-content: center;
    }
}

/* ── Toolbar quick-request buttons ── */
.wps-toolbar-req-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.wps-toolbar-req-btn svg {
    flex-shrink: 0;
}

.wps-toolbar-req-btn--tournament {
    background: var(--wps-organizer-primary, #fda329);
    color: #fff;
    border: 1px solid transparent;
}

.wps-toolbar-req-btn--tournament:hover,
.wps-toolbar-req-btn--tournament:focus-visible {
    background: #e8931a;
    color: #fff;
    text-decoration: none;
}

.wps-toolbar-req-btn--raffle {
    background: transparent;
    color: var(--wps-organizer-primary, #fda329);
    border: 1px solid rgba(253, 163, 41, 0.4);
}

.wps-toolbar-req-btn--raffle:hover,
.wps-toolbar-req-btn--raffle:focus-visible {
    background: rgba(253, 163, 41, 0.1);
    color: #fda329;
    border-color: rgba(253, 163, 41, 0.65);
    text-decoration: none;
}

/* Desktop: show full label; hide short */
.wps-trb-full {
    display: inline;
}

.wps-trb-short {
    display: none;
}

/* Tablet / mobile (≤ 960px): swap to compact label so toolbar stays one row */
@media (max-width: 960px) {
    .wps-trb-full {
        display: none;
    }

    .wps-trb-short {
        display: inline;
    }
}

/* ── Full-height layout: push footer to bottom when page content is short ── */
body.wps-organizer-page .wps-container.wps-container--wide {
    min-height: calc(100vh - 260px);
}

/* Container width scales in tiers instead of one fixed value — standard
   1280px on typical laptop/tablet screens, growing on larger desktops so
   the sidebar + management tables get breathing room without the panel
   ever feeling cramped on a smaller screen or comically wide on a big one. */
body.wps-organizer-page .wps-container.wps-container--wide {
    max-width: 1280px;
}

@media (min-width: 1400px) {
    body.wps-organizer-page .wps-container.wps-container--wide {
        max-width: 1440px;
    }
}

@media (min-width: 1680px) {
    body.wps-organizer-page .wps-container.wps-container--wide {
        max-width: 1600px;
    }
}

/* Back link at the top of every organizer panel page (except dashboard) */
.wps-org-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    text-decoration: none;
    transition: color 0.15s;
}

.wps-org-back-link:hover,
.wps-org-back-link:focus-visible {
    color: var(--wps-organizer-primary, #fda329);
    text-decoration: none;
}

.wps-org-back-link svg {
    flex-shrink: 0;
}

/* ── Login page: vertically center the card in the available space ── */
body.wps-login-page .wps-page-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 380px);
    padding: 32px 16px;
}

body.wps-login-page #custom-login-wrapper {
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
}

/* ══════════════════════════════════════════════════════════
   WPS SIDEBAR — reusable navigation component
   ══════════════════════════════════════════════════════════ */

.wps-dash-wrapper {
    display: grid;
    grid-template-columns: 256px 1fr;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 56px rgba(0, 0, 0, 0.55);
    min-height: calc(100vh - 400px);
}

.wps-sidebar {
    background: #e3e3e3;
    display: flex;
    flex-direction: column;
}

.wps-sidebar__head {
    padding: 16px 20px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.wps-sidebar__head-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wps-sidebar__head-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--wps-organizer-primary, #fda329);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.wps-sidebar__head-text {
    display: flex;
    flex-direction: column;
}

.wps-sidebar__head-name {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #000;
}

.wps-sidebar__nav {
    flex: 1;
    padding: 12px 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 0;
}

.wps-sidebar__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 1px;
    border-radius: 10px;
    text-decoration: none;
    color: #2b2b3f;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.01em;
    transition: background 0.13s, color 0.13s;
}

.wps-sidebar__item:hover,
.wps-sidebar__item:focus {
    background: rgba(0, 0, 0, 0.09);
    color: #000;
    text-decoration: none;
}

.wps-sidebar__icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.13s;
}

.wps-sidebar__item-label {
    flex: 1;
}

.wps-sidebar__item-arrow {
    font-size: 14px;
    opacity: 0;
    flex-shrink: 0;
    transition: opacity 0.13s, transform 0.13s;
    color: #1a0800;
}

.wps-sidebar__item:hover .wps-sidebar__item-arrow {
    opacity: 0.45;
    transform: translateX(2px);
}

.wps-sidebar__divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.10);
    margin: 6px 10px;
}

.wps-sidebar__footer {
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.wps-sidebar__item--logout {
    background: rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 8px;
    color: rgba(26, 8, 0, 0.55);
    font-size: 13px;
    font-weight: 600;
}

.wps-sidebar__item--logout:hover {
    background: rgba(160, 20, 20, 0.10);
    border-color: rgba(160, 20, 20, 0.18);
    color: #7a1010;
}

.wps-sidebar__item--logout:hover .wps-sidebar__icon {
    background: rgba(160, 20, 20, 0.15);
    color: #902020;
}

/* Active nav item — persistent "you are here" state, distinct from :hover */
.wps-sidebar__item--active {
    background: rgba(0, 0, 0, 0.09);
    color: #000;
    font-weight: 700;
}

.wps-sidebar__item--active .wps-sidebar__icon {
    background: var(--wps-organizer-primary, #fda329);
    color: #fff;
}

.wps-sidebar__item--active .wps-sidebar__item-arrow {
    opacity: 0.45;
}

/* ══════════════════════════════════════════════════════════
   WPS PANEL BODY — generic main content slot used by every
   organizer page (tables, forms, dashboard cards).
   ══════════════════════════════════════════════════════════ */

.wps-panel-body {
    background: #dadada;
    padding: 20px;
    /* This is a CSS Grid item (the 1fr column of .wps-dash-wrapper). Grid
       items default to min-width:auto, meaning a wide descendant (a table)
       can force the whole grid track — and everything containing it,
       including the theme's overflow-x:hidden page wrapper — to grow past
       the viewport instead of scrolling internally. min-width:0 lets this
       column actually shrink to the space it's given, which is what makes
       overflow-x:auto further down (on the table's own wrapper) meaningful. */
    min-width: 0;
}

/* Modifier — dashboard's two side-by-side Request CTA cards only */
.wps-panel-body--cards {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: start;
}

/* Small right-aligned action bar for one-off page actions (e.g. Bookmark) */
.wps-page-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

/* ── Request CTA Cards ── */

.wps-req-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
    padding: 28px;
    border-radius: 16px;
    text-decoration: none;
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wps-req-card:hover {
    transform: translateY(-4px);
    text-decoration: none;
    color: #fff;
}

.wps-req-card:focus {
    color: #fff;
}

.wps-req-card::before,
.wps-req-card::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.wps-req-card::before {
    right: -60px;
    top: -60px;
    width: 240px;
    height: 240px;
    border: 44px solid rgba(255, 255, 255, 0.08);
}

.wps-req-card::after {
    right: 50px;
    top: -100px;
    width: 180px;
    height: 180px;
    border: 30px solid rgba(255, 255, 255, 0.04);
}

.wps-req-card--tournament {
    background: linear-gradient(145deg, #ffa500 0%, #9a6210 100%);
    box-shadow: 0 8px 32px rgba(255, 165, 0, 0.35);
}

.wps-req-card--tournament:hover {
    box-shadow: 0 14px 44px rgba(255, 165, 0, 0.52);
}

.wps-req-card--raffle {
    background: linear-gradient(145deg, #3b3b55 0%, #2b2b3f 100%);
    box-shadow: 0 8px 32px rgba(43, 43, 63, 0.50);
}

.wps-req-card--raffle:hover {
    box-shadow: 0 14px 44px rgba(43, 43, 63, 0.70);
}

.wps-req-card__icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    z-index: 1;
    transition: background 0.15s;
}

.wps-req-card:hover .wps-req-card__icon {
    background: rgba(255, 255, 255, 0.28);
}

.wps-req-card__body {
    z-index: 1;
}

.wps-req-card__eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.60;
    margin-bottom: 8px;
}

.wps-req-card__title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.wps-req-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    opacity: 0.85;
}

.wps-req-card__cta-arrow {
    transition: transform 0.14s;
}

.wps-req-card:hover .wps-req-card__cta-arrow {
    transform: translateX(4px);
}

/* Tablet */
@media (prefers-reduced-motion: reduce) {

    .wps-req-card,
    .wps-req-card__icon,
    .wps-req-card__cta-arrow,
    .wps-sidebar__item,
    .wps-sidebar__item-arrow {
        transition: none;
    }
}

/* Digital Pool — Processing Modal */
#wps-dp-processing {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.62);
    align-items: center;
    justify-content: center;
}

#wps-dp-processing.is-open {
    display: flex;
}

.wps-dp-proc-box {
    background: linear-gradient(145deg, #3b3b55 0%, #2b2b3f 100%);
    border: 1px solid #2b2b3f;
    border-radius: 16px;
    padding: 35px 45px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(43, 43, 63, 0.50);
    animation: wpsModalIn 0.22s ease;
    min-width: 260px;
}

.wps-dp-proc-logo {
    height: 70px;
    object-fit: contain;
    display: block;
    margin: 0 auto 18px;
    animation: wps-dp-pulse 1.6s ease-in-out infinite;
}

@keyframes wps-dp-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.65;
        transform: scale(0.90);
    }
}

.wps-dp-proc-msg {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.wps-dp-proc-dots span {
    animation: wps-dp-dot 1.4s infinite;
    opacity: 0;
}

.wps-dp-proc-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.wps-dp-proc-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes wps-dp-dot {

    0%,
    60%,
    100% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }
}

/* Digital Pool — Processing Modal - End */
.wps-client-page-shell {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 44px 28px 72px;
    color: #f8f7fa;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 260px),
        linear-gradient(135deg, var(--wps-client-primary, #ff9f1c), var(--wps-client-secondary, #332a3f));
    border-radius: 8px;
    box-sizing: border-box;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: center;
}

.wps-client-page-shell * {
    box-sizing: border-box;
}

.wps-client-page-shell h1,
.wps-client-page-shell h2,
.wps-client-page-shell p {
    letter-spacing: 0;
}

.wps-client-page-shell h1 {
    max-width: 880px;
    margin: 0 auto 16px;
    color: #fff;
    font-size: 60px;
    line-height: 1.04;
    font-weight: 850;
}

.wps-client-page-shell h2 {
    margin: 0 0 22px;
    color: #fff;
    font-size: 30px;
    line-height: 1.18;
    font-weight: 820;
}

.wps-client-hero {
    display: grid;
    place-items: center;
    min-height: 420px;
    padding: 28px 0 18px;
}

.wps-client-hero-content {
    width: min(100%, 900px);
    margin: 0 auto;
}

.wps-client-logo {
    margin: 0 auto 22px;
}

.wps-client-logo img {
    max-width: min(360px, 82vw);
    max-height: 170px;
    width: auto;
    height: auto;
    border-radius: 8px;
}

.wps-client-tagline {
    max-width: 760px;
    margin: 0 auto 22px;
    color: var(--wps-client-accent, #ff9f1c);
    font-size: 16px;
    font-weight: 760;
    font-style: italic;
    line-height: 1.55;
}

.wps-client-intro,
.wps-client-copy {
    color: rgba(255, 255, 255, .86);
    font-size: 16px;
    line-height: 1.75;
}

.wps-client-intro {
    max-width: 760px;
    margin: 0 auto;
}

.wps-client-intro p,
.wps-client-copy p {
    margin: 0 0 18px;
}

.wps-client-intro p:last-child,
.wps-client-copy p:last-child {
    margin-bottom: 0;
}

.wps-client-cta-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 34px;
}

.wps-client-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    max-width: 100%;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--wps-client-primary, #ff9f1c), var(--wps-client-secondary, #332a3f));
    color: #fff;
    font-size: 15px;
    font-weight: 820;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.wps-client-button:hover,
.wps-client-button:focus {
    color: #fff;
    opacity: .95;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
}

.wps-client-button-disabled {
    cursor: default;
    opacity: .58;
    box-shadow: none;
}

.wps-client-button-disabled:hover,
.wps-client-button-disabled:focus {
    transform: none;
    box-shadow: none;
}

.wps-client-section {
    margin-bottom: 72px;
}

.wps-client-section-heading {
    text-align: left;
}

.wps-client-about-section {
    display: grid;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
    gap: 36px;
    width: min(100%, 900px);
    margin-right: auto;
    margin-left: auto;
    padding-top: 52px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    text-align: left;
}

.wps-client-about-section h2 {
    position: sticky;
    top: 24px;
    margin-bottom: 0;
}

.wps-client-copy {
    max-width: 680px;
}

.wps-client-card-grid,
.wps-client-partner-grid,
.wps-client-blog-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.wps-client-person-card,
.wps-client-partner,
.wps-client-blog-card {
    width: 300px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 8px;
    background: #fff;
    color: #2b2730;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
    box-sizing: border-box;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.wps-client-blog-card:hover,
.wps-client-blog-card:focus {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
}

.wps-client-person-card img,
.wps-client-partner img,
.wps-client-blog-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 14px;
    background: #f2f0f5;
}

.wps-client-person-card strong,
.wps-client-partner strong,
.wps-client-blog-card strong {
    display: block;
    color: #25212b;
    font-size: 16px;
    font-weight: 820;
    line-height: 1.35;
}

.wps-client-person-card span,
.wps-client-partner p {
    display: block;
    margin-top: 6px;
    color: #676071;
    line-height: 1.5;
}

.wps-client-partner a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.wps-client-partner a:hover strong,
.wps-client-partner a:focus strong {
    color: var(--wps-client-accent, #ff9f1c);
}

.wps-client-sponsors-section .wps-client-partner img {
    object-fit: contain;
    padding: 12px;
}

.wps-client-venue-partners {
    padding: 48px 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
}

.wps-client-venue-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 42px 74px;
}

.wps-client-venue-partner {
    width: 300px;
    text-align: center;
}

.wps-client-venue-partner a {
    color: inherit;
    text-decoration: none;
}

.wps-client-venue-partner img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 118px;
    margin: 0 auto 14px;
    object-fit: contain;
    transition: transform .18s ease, opacity .18s ease;
}

.wps-client-venue-partner a:hover img,
.wps-client-venue-partner a:focus img {
    opacity: .92;
    transform: translateY(-2px);
}

.wps-client-venue-partner strong {
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 820;
    line-height: 1.35;
}

.wps-client-social-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

.wps-client-social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wps-client-primary, #ff9f1c), var(--wps-client-secondary, #332a3f));
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    transition: background .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.wps-client-social-icons a:hover,
.wps-client-social-icons a:focus {
    color: var(--wps-client-accent, #ff9f1c);
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--wps-client-accent, #ff9f1c);
    transform: translateY(-2px);
}

.wps-client-contact .wps-client-social-icons {
    margin-top: 18px;
}

.wps-client-contact .wps-client-social-icons a {
    display: inline-flex;
    margin-top: 0;
    color: #fff;
}

.wps-client-contact .wps-client-social-icons a:hover,
.wps-client-contact .wps-client-social-icons a:focus {
    color: var(--wps-client-accent, #ff9f1c);
    text-decoration: none;
}

.wps-client-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 900px;
    margin: 0 auto;
}

.wps-client-gallery a,
.wps-client-gallery img {
    display: block;
    width: 100%;
}

.wps-client-gallery a {
    overflow: hidden;
    border-radius: 8px;
}

.wps-client-gallery img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    transition: transform .22s ease, opacity .22s ease;
}

.wps-client-gallery a:hover img,
.wps-client-gallery a:focus img {
    opacity: .94;
    transform: scale(1.025);
}

.wps-client-blog-card {
    width: min(100%, 340px);
    text-align: left;
}

.wps-client-blog-card img {
    aspect-ratio: 16 / 10;
}

.wps-client-blog-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--wps-client-accent, #ff9f1c);
    font-size: 13px;
    font-weight: 820;
}

.wps-client-contact {
    color: rgba(255, 255, 255, .86);
}

.wps-client-contact-panel {
    width: min(100%, 720px);
    margin: 0 auto;
    padding: 34px 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .055);
}

.wps-client-contact-panel h2 {
    margin-bottom: 16px;
}

.wps-client-contact-panel p {
    max-width: 560px;
    margin: 0 auto 14px;
    color: rgba(255, 255, 255, .78);
    line-height: 1.65;
}

.wps-client-contact a,
.wps-client-contact span {
    display: block;
    margin-top: 8px;
    color: var(--wps-client-accent, #ff9f1c);
    font-weight: 820;
    text-decoration: none;
}

.wps-client-contact a:hover,
.wps-client-contact a:focus {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

@media (max-width: 900px) {
    .wps-client-about-section {
        grid-template-columns: 1fr;
        gap: 18px;
        text-align: center;
    }

    .wps-client-section-heading {
        text-align: center;
    }

    .wps-client-about-section h2 {
        position: static;
    }
}

@media (max-width: 768px) {
    .wps-client-page-shell {
        padding: 32px 16px 48px;
    }

    .wps-client-hero {
        min-height: 0;
        padding-top: 10px;
    }

    .wps-client-page-shell h1 {
        font-size: 40px;
    }

    .wps-client-page-shell h2 {
        font-size: 26px;
    }

    .wps-client-cta-list {
        align-items: stretch;
        flex-direction: column;
    }

    .wps-client-button {
        width: 100%;
    }

    .wps-client-gallery {
        grid-template-columns: 1fr;
    }

    .wps-client-venue-partners,
    .wps-client-contact-panel {
        padding: 28px 18px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   ORGANIZER PANEL — MODERN UI REFRESH
   Visual-only polish: colors, shadows, radii, hover states on the sidebar
   + panel layout. No markup or behavior changes — every selector below
   targets elements that already exist. Brand accent (--wps-organizer-primary)
   is kept as the accent color throughout, just applied with more depth
   (soft shadows, gradients, hover-lift) instead of flat solid fills.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Canvas + card frame ── */
.wps-dash-wrapper {
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px rgba(16, 24, 40, 0.10);
}

.wps-sidebar {
    background: #fbfaf8;
    border-right: 1px solid rgba(15, 23, 42, 0.07);
}

.wps-panel-body {
    background: #f3f4f6;
}

/* ── Sidebar: refined "nav rail" active state — accent bar + soft tint
       instead of a solid-filled icon block ── */
.wps-sidebar__item--active {
    position: relative;
    background: rgba(253, 163, 41, 0.10);
    background: color-mix(in srgb, var(--wps-organizer-primary, #fda329) 10%, #fff 90%);
}

.wps-sidebar__item--active::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: var(--wps-organizer-primary, #fda329);
}

.wps-sidebar__item--active .wps-sidebar__icon {
    background: var(--wps-organizer-primary, #fda329);
    color: #fff;
    box-shadow: 0 2px 6px rgba(253, 163, 41, 0.35);
}

.wps-sidebar__item {
    border-radius: 9px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.wps-sidebar__item:hover {
    background: rgba(15, 23, 42, 0.045);
}

/* ── Content card: DataTables' own wrapper becomes the visual card ── */
.organizer-wps-books .dataTables_wrapper {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
}

/* ── Table: quieter grid, clearer header, scannable row hover ── */
#wpsBooksTable th {
    background-color: transparent;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid rgba(15, 23, 42, 0.08);
    padding-bottom: 12px;
}

#wpsBooksTable tbody td {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    padding-top: 12px;
    padding-bottom: 12px;
}

#wpsBooksTable tbody tr:hover td {
    background-color: rgba(253, 163, 41, 0.045);
}

/* ── Buttons: consistent rounded, soft-shadow, hover-lift language ── */
.btn-view,
.btn-edit,
.btn-confirm,
.btn-delete,
.wps-org-back-link {
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}

.btn-view:hover,
.btn-edit:hover,
.btn-confirm:hover,
.btn-delete:hover {
    box-shadow: 0 4px 10px rgba(16, 24, 40, 0.16);
    transform: translateY(-1px);
}

.btn-view:active,
.btn-edit:active,
.btn-confirm:active,
.btn-delete:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10);
}

/* ── Action buttons: consistent height. The multi-button nav row (View
       Event / Bookings / Flyer / Tournament) gets NO fixed width — too many
       buttons in that row for a shared width to stay dynamic. The booking
       status row (Pending / Paid / Delete) only ever has 2 buttons with
       plenty of room, so those DO share a fixed width for a premium,
       evenly-aligned look. ── */
.btn-view,
.btn-edit,
.btn-confirm,
.btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 32px;
    padding: 0 13px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
}

/* ── Each action gets its own color so a row of buttons reads at a
       glance instead of blurring into "everything is orange". Built from
       the plugin's own existing tokens (primary/info/success/error) plus
       two small additions (a neutral slate + a bracket-feature purple)
       where no existing token fit. ── */
.btn-view--primary {
    background: var(--wps-organizer-primary, #fda329) !important;
    border: 1px solid var(--wps-organizer-primary, #fda329) !important;
    color: #fff !important;
}

.btn-view--primary:hover {
    background: #e0a800 !important;
    border-color: #e0a800 !important;
}

.btn-view--info {
    background: var(--wps-organizer-info-color, #17a2b8) !important;
    border: 1px solid var(--wps-organizer-info-color, #17a2b8) !important;
    color: #fff !important;
}

.btn-view--info:hover {
    background: #138496 !important;
    border-color: #138496 !important;
}

.btn-view--neutral {
    background: #4a5568 !important;
    border: 1px solid #4a5568 !important;
    color: #fff !important;
}

.btn-view--neutral:hover {
    background: #3a4556 !important;
    border-color: #3a4556 !important;
}

.btn-view--accent {
    background: #1890ff !important;
    border: 1px solid #1890ff !important;
    color: #fff !important;
}

.btn-view--accent:hover {
    background: #3c9be8 !important;
    border-color: #3c9be8 !important;
}

/* Mark As Pending — a "step back" action, so it gets the same neutral
   slate as Print Flyer rather than the brand orange: Paid=green,
   Delete=red, Pending=grey reads as a clear status-color trio at a glance. */
.btn-edit {
    background: #4a5568 !important;
}

.btn-edit:hover {
    background: #3a4556 !important;
}

/* ── Back link: a real button, not plain text — explicit ask ── */
.wps-org-back-link {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    padding: 8px 14px 8px 12px;
    color: #444;
}

.wps-org-back-link:hover,
.wps-org-back-link:focus-visible {
    background: var(--wps-organizer-primary, #fda329);
    border-color: var(--wps-organizer-primary, #fda329);
    color: #fff;
    transform: translateY(-1px);
}

/* ── DataTables export toolbar (Copy/CSV/Excel/PDF/Print) — scoped to the
       organizer panel only; the base rule lives in the shared frontend.min.css
       and applies site-wide, so it's overridden here with matching specificity
       rather than edited directly. All five are the same kind of action
       (export, different format) so they share ONE brand color rather than
       each getting its own — that differentiation is reserved for actions
       that are actually different (View Event vs View Bookings etc). ── */
body.wps-organizer-page .dt-container .dt-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    height: 32px !important;
    min-width: 74px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    margin: 0 8px 0 0 !important;
    background-color: var(--wps-organizer-primary, #fda329) !important;
    border: 1px solid var(--wps-organizer-primary, #fda329) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08) !important;
    transition: box-shadow 0.2s ease, transform 0.12s ease, background-color 0.2s ease !important;
}

body.wps-organizer-page .dt-container .dt-button:hover {
    background-color: #e0a800 !important;
    border-color: #e0a800 !important;
    box-shadow: 0 4px 10px rgba(16, 24, 40, 0.18) !important;
    transform: translateY(-1px);
}

body.wps-organizer-page .dt-container .dt-search input {
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    padding: 7px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.wps-organizer-page .dt-container .dt-search input:focus {
    outline: none;
    border-color: var(--wps-organizer-primary, #fda329);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wps-organizer-primary, #fda329) 20%, transparent);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 7px !important;
}

/* ── Quick-stat pills + winner banner: match the softer shadow language ── */
.wps-book-quick-stats {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.wps-winner-banner {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET & MOBILE
   Deliberately placed at the very end of the file. Several of these
   selectors (.btn-view, .dt-button, .dataTables_wrapper, #wpsBooksTable th,
   .wps-req-card__title, .wps-page-actions...) also have unconditional,
   same-specificity base rules earlier in this file. When two same-
   specificity rules match, the one that appears LAST in the stylesheet
   wins — regardless of whether the earlier one was inside a @media block
   and the later one wasn't. That was silently canceling out most of the
   tablet/mobile overrides that used to live inline near each component's
   base rule. Keeping ALL tablet/mobile overrides in exactly these two
   blocks, after everything else, guarantees they always win.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (includes iPad @ 810px) — up to 1024px ── */
@media (max-width: 1024px) {
    .wps-dash-wrapper {
        grid-template-columns: 220px 1fr;
    }

    .wps-sidebar__item {
        font-size: 13px;
    }

    .wps-req-card {
        flex: 1;
    }

    .wps-req-card__title {
        font-size: 24px;
    }

    .wps-panel-body {
        padding: 16px;
    }

    /* Back link + Bookmark/page actions: wrap onto their own rows with a
       normal gap instead of one flex-end-pushed to the far edge of a wide
       row, which reads as a large accidental gap on a narrower screen. */
    .wps-page-actions {
        justify-content: flex-start;
        margin-top: -4px;
    }

    .organizer-wps-books .dataTables_wrapper {
        padding: 16px 14px;
    }

    #wpsBooksTable {
        font-size: 12.5px;
    }

    #wpsBooksTable th {
        font-size: 11px;
    }

    /* Give action buttons room to stay on one line before the row scrolls */
    #wpsBooksTable tbody td:last-child {
        min-width: 160px;
    }

    /* Copy/CSV/Excel/PDF/Print toolbar — more compact so 5 buttons wrap
       tidily instead of leaving one stranded alone with lots of empty
       space around it. */
    body.wps-organizer-page .dt-container .dt-button {
        min-width: 0 !important;
        padding: 0 10px !important;
        margin: 0 6px 6px 0 !important;
        font-size: 12px !important;
    }

    /* View Event / Bookings / Flyer / Bracket action buttons — same
       compact treatment, sized to fit their now-narrower Action column. */
    .btn-view {
        display: flex;
        height: 30px;
        padding: 0 11px;
        font-size: 12px;
        margin-bottom: 10px;
    }

    .organizer-wps-books table.dataTable thead th,
    .organizer-wps-books table.dataTable thead th.dt-orderable-asc,
    .organizer-wps-books table.dataTable thead th.dt-orderable-desc {
        background: var(--wps-organizer-primary, #fda329) !important;
        background-color: var(--wps-organizer-primary, #fda329) !important;
        text-align: left;
    }
}

/* ── Mobile — up to 640px ── */
@media (max-width: 640px) {
    .wps-dash-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        box-shadow: none;
    }

    .wps-panel-body {
        padding: 14px;
    }

    .organizer-wps-books {
        padding: 0;
    }

    .wps-panel-body--cards {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .wps-req-card {
        width: 100%;
        padding: 22px 20px;
    }

    .wps-req-card__icon {
        width: 46px;
        height: 46px;
        font-size: 22px;
        border-radius: 11px;
    }

    .wps-req-card__title {
        font-size: 20px;
    }

    .wps-sidebar {
        position: relative;
    }

    .wps-sidebar__head {
        padding: 16px 10px 15px;
    }

    /* Nav becomes a horizontal scrollable bar — same pattern already used
       by .wps-event-tabs-nav elsewhere in the plugin, kept consistent so
       a long list of items (Dashboard, Tournament, Raffle, Requests...)
       doesn't push page content far down the screen on a phone. */
    .wps-sidebar__nav {
        flex-direction: column;
        padding: 12px 10px 8px;
        gap: 2px;
    }

    .wps-sidebar__item {
        flex-shrink: 0;
        padding: 8px 12px;
        font-size: 13px;
        white-space: nowrap;
    }

    .wps-sidebar__item-arrow {
        display: none;
    }

    .wps-sidebar__divider {
        display: none;
    }

    .wps-sidebar__footer {
        padding: 0;
        position: absolute;
        right: 10px;
        top: 15px;
        border: none;
    }

    .wps-sidebar__item--logout {
        padding: 0;
        background: rgba(160, 20, 20, 0.10);
        color: #7a1010;
        border: 1px solid #7a1010;
    }

    .wps-sidebar__item--logout .wps-sidebar__icon {
        width: 32px;
        height: 32px;
    }

    .wps-sidebar__item--logout .wps-sidebar__item-label {
        display: none;
    }

    /* Sidebar already has a Dashboard link at this width — the extra back
       link at the top of every page's content is redundant on a phone. */
    .wps-org-back-link {
        display: none;
    }

    .wps-winner-banner .btn-draw-winner,
    .wps-winner-banner .btn-announce-winner {
        margin: 0px auto;
    }
}