/* ============================================
 * Dojang Gym Tracker — Front-end Styles
 * Teacher Portal + Kiosk
 * ============================================ */

/* ---- CSS Variables ---- */
:root {
    --dgt-primary: #1e3a5f;
    --dgt-primary-light: #2a5a8f;
    --dgt-accent: #c0392b;
    --dgt-success: #27ae60;
    --dgt-warning: #f39c12;
    --dgt-danger: #e74c3c;
    --dgt-gray-50: #f8f9fa;
    --dgt-gray-100: #f1f3f5;
    --dgt-gray-200: #e9ecef;
    --dgt-gray-300: #dee2e6;
    --dgt-gray-500: #adb5bd;
    --dgt-gray-700: #495057;
    --dgt-gray-900: #212529;
    --dgt-radius: 8px;
    --dgt-radius-lg: 12px;
    --dgt-shadow: 0 2px 8px rgba(0,0,0,0.08);
    --dgt-shadow-lg: 0 4px 24px rgba(0,0,0,0.12);
    --dgt-transition: 0.2s ease;
}

/* ============================================
 * ICTF / Traditional Dojang theme helpers
 * (Fonts enqueued in PHP: Cinzel + Noto Sans)
 * ============================================ */
:root{
    --ictf-ink: #0B0E12;
    --ictf-charcoal: #141A22;
    --ictf-blue: #0D76B8;
    --ictf-red: #E12B2B;
    --ictf-gold: #F2D21B;
    --ictf-paper: #FBF6EB;
    --ictf-paper-2:#F3EBDD;
    --ictf-line: rgba(20,26,34,.14);
    --ictf-shadow: 0 10px 28px rgba(11,14,18,.10);
    --ictf-shadow-2: 0 18px 54px rgba(11,14,18,.16);
}

/* ============================================
 * SHARED: BUTTONS
 * ============================================ */

.dgt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border: none;
    border-radius: var(--dgt-radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--dgt-transition);
    line-height: 1.4;
}

.dgt-btn-primary {
    background: linear-gradient(180deg, rgba(20,26,34,.98), rgba(11,14,18,.98));
    color: #fff;
}

.dgt-btn-primary:hover {
    background: linear-gradient(180deg, rgba(20,26,34,1), rgba(13,118,184,.45));
    color: #fff;
}

.dgt-btn-large {
    padding: 16px 36px;
    font-size: 18px;
}

.dgt-btn-small {
    padding: 6px 14px;
    font-size: 13px;
}

.dgt-btn-outline {
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(20,26,34,.22);
    color: rgba(11,14,18,.86);
}

.dgt-btn-outline:hover {
    background: rgba(13,118,184,.10);
    color: rgba(11,14,18,.96);
}

.dgt-btn-danger {
    background: var(--dgt-danger);
    color: #fff;
}

.dgt-btn-danger:hover {
    background: #c0392b;
    color: #fff;
}

.dgt-radio-group {
    display: flex;
    gap: 20px;
    margin-top: 8px;
}

.dgt-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
}

.dgt-radio-label input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

/* ============================================
 * SHARED: INPUTS
 * ============================================ */

.dgt-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--dgt-gray-300);
    border-radius: var(--dgt-radius);
    font-size: 16px;
    color: var(--dgt-gray-900);
    background: #fff;
    transition: border-color var(--dgt-transition), box-shadow var(--dgt-transition);
    box-sizing: border-box;
}

.dgt-input:focus {
    outline: none;
    border-color: rgba(13,118,184,.70);
    box-shadow: 0 0 0 3px rgba(13,118,184,.14);
}

.dgt-input-large {
    font-size: 22px;
    padding: 16px 20px;
}

select.dgt-input {
    appearance: auto;
}

textarea.dgt-input {
    resize: vertical;
}

/* ============================================
 * SHARED: BELT BADGES
 * ============================================ */

.dgt-belt-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.dgt-belt-white, .dgt-belt-white-stripe { background: #f1f3f5; color: #212529; border: 1px solid #dee2e6; }
.dgt-belt-yellow, .dgt-belt-yellow-stripe { background: #fff9db; color: #7c5e00; border: 1px solid #f39c12; }
.dgt-belt-green, .dgt-belt-green-stripe { background: #ebfbee; color: #1a6e32; border: 1px solid #27ae60; }
.dgt-belt-blue, .dgt-belt-blue-stripe { background: #e7f5ff; color: #0b4a82; border: 1px solid #2980b9; }
.dgt-belt-red, .dgt-belt-red-stripe { background: #fff0f0; color: #8a1e22; border: 1px solid #e74c3c; }
.dgt-belt-black, .dgt-belt-black-stripe { background: #212529; color: #fff; border: 1px solid #212529; }

/* ============================================
 * SHARED: TABLE
 * ============================================ */

.dgt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.dgt-table th {
    text-align: left;
    padding: 12px 14px;
    background: var(--dgt-gray-50);
    border-bottom: 2px solid var(--dgt-gray-200);
    font-weight: 600;
    color: var(--dgt-gray-700);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.dgt-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--dgt-gray-100);
    color: var(--dgt-gray-900);
}

.dgt-table tbody tr:hover {
    background: var(--dgt-gray-50);
}

/* ============================================
 * SHARED: BADGE
 * ============================================ */

.dgt-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    background: var(--dgt-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    margin-left: 8px;
}

.dgt-required { color: var(--dgt-danger); }
.dgt-divider { border: none; border-top: 1px solid var(--dgt-gray-200); margin: 24px 0; }

/* ============================================
 * PORTAL: AUTH SCREEN
 * ============================================ */

.dgt-portal-auth {
    display: flex;
    justify-content: center;
    padding: 60px 20px;
}

.dgt-portal-auth-card {
    background: #fff;
    border-radius: var(--dgt-radius-lg);
    padding: 40px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: var(--dgt-shadow-lg);
}

.dgt-portal-auth-card h2 {
    margin: 0 0 12px;
    color: var(--dgt-primary);
}

.dgt-portal-auth-card p {
    color: var(--dgt-gray-700);
    margin-bottom: 24px;
}

.dgt-portal-denied {
    border-top: 4px solid var(--dgt-danger);
}

.dgt-portal-denied h2 {
    color: var(--dgt-danger);
}

/* ============================================
 * PORTAL: HIDE WP CHROME WHEN PORTAL IS SHOWN
 * ============================================ */

body:has(.dgt-portal) #wpadminbar,
body:has(.dgt-portal) header,
body:has(.dgt-portal) .site-header,
body:has(.dgt-portal) nav.main-navigation,
body:has(.dgt-portal) footer,
body:has(.dgt-portal) .site-footer,
body:has(.dgt-portal) .wp-site-blocks > header,
body:has(.dgt-portal) .wp-site-blocks > footer,
body.dgt-has-portal #wpadminbar,
body.dgt-has-portal header,
body.dgt-has-portal .site-header,
body.dgt-has-portal nav.main-navigation,
body.dgt-has-portal footer,
body.dgt-has-portal .site-footer,
body.dgt-has-portal .wp-site-blocks > header,
body.dgt-has-portal .wp-site-blocks > footer {
    display: none !important;
}

body:has(.dgt-portal),
body.dgt-has-portal {
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.dgt-portal) .wp-site-blocks,
body:has(.dgt-portal) .entry-content,
body:has(.dgt-portal) main,
body:has(.dgt-portal) .site-content,
body:has(.dgt-portal) article,
body:has(.dgt-portal) .wp-block-group,
body:has(.dgt-portal) .is-layout-constrained,
body:has(.dgt-portal) .is-layout-flow,
body.dgt-has-portal .wp-site-blocks,
body.dgt-has-portal .entry-content,
body.dgt-has-portal main,
body.dgt-has-portal .site-content,
body.dgt-has-portal article,
body.dgt-has-portal .wp-block-group,
body.dgt-has-portal .is-layout-constrained,
body.dgt-has-portal .is-layout-flow {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* ============================================
 * PORTAL: LAYOUT — fixed viewport takeover
 * ============================================ */

.dgt-portal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px 36px 56px;
    font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    box-sizing: border-box;
    background:
        radial-gradient(ellipse 1200px 600px at 10% 0%, rgba(13,118,184,.06), transparent 60%),
        linear-gradient(180deg, var(--ictf-paper) 0%, #f0ece4 100%);
}

.dgt-portal *,
.dgt-portal *::before,
.dgt-portal *::after {
    font-family: inherit;
    box-sizing: border-box;
}

.dgt-portal h2,
.dgt-portal h3,
.dgt-portal h4 {
    font-family: "Cinzel", ui-serif, Georgia, serif;
}

.dgt-portal-header,
.dgt-portal-tabs,
.dgt-tab-content {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

.dgt-portal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 28px;
    border: 1px solid rgba(255,255,255,.08);
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 14px;
    background:
        radial-gradient(600px 240px at 14% 30%, rgba(13,118,184,.35), transparent 60%),
        linear-gradient(90deg, rgba(20,26,34,.98), rgba(11,14,18,.96));
    border-radius: 18px;
    box-shadow: var(--ictf-shadow-2);
    position: relative;
}

.dgt-portal-header h2 {
    margin: 0;
    font-size: 26px;
    color: #fff;
    font-family: "Cinzel", ui-serif, Georgia, serif;
    letter-spacing: .4px;
}

.dgt-portal-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255,255,255,.82);
    font-size: 15px;
}

.dgt-portal-header::after{
    content:"";
    position:absolute;
    inset: 0;
    border-radius: 18px;
    pointer-events:none;
    box-shadow: inset 0 0 0 1px rgba(242,210,27,.18);
}

/* ============================================
 * PORTAL: TABS
 * ============================================ */

.dgt-portal-tabs {
    display: flex;
    gap: 10px;
    border: 1px solid rgba(20,26,34,.10);
    margin-bottom: 22px;
    padding: 12px 14px;
    background: rgba(255,255,255,.58);
    border-radius: 16px;
    box-shadow: var(--ictf-shadow);
    overflow-x: auto;
}

.dgt-tab {
    padding: 12px 22px;
    background: transparent;
    border: none;
    border-bottom: 0;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 700;
    color: rgba(11,14,18,.62);
    cursor: pointer;
    transition: all var(--dgt-transition);
    border-radius: 999px;
    white-space: nowrap;
}

.dgt-tab:hover {
    color: rgba(11,14,18,.86);
    background: rgba(13,118,184,.08);
}

.dgt-tab-active {
    color: #fff;
    background: linear-gradient(180deg, rgba(225,43,43,.98), rgba(170,22,22,.96));
    box-shadow: 0 14px 26px rgba(225,43,43,.18);
    position: relative;
}

.dgt-tab-active::after{
    content:"";
    position:absolute;
    inset: -1px;
    border-radius: 999px;
    pointer-events:none;
    box-shadow: inset 0 0 0 1px rgba(242,210,27,.30);
}

.dgt-tab-content {
    display: none;
}

.dgt-tab-content-active {
    display: block;
    animation: dgt-fade 0.25s ease;
}

@keyframes dgt-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
 * PORTAL: SECTIONS
 * ============================================ */

.dgt-portal-section {
    background:
        radial-gradient(900px 360px at 8% 0%, rgba(242,210,27,.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
    border: 1px solid rgba(20,26,34,.10);
    border-radius: var(--dgt-radius-lg);
    padding: 36px;
    margin-bottom: 32px;
    box-shadow: var(--ictf-shadow-2);
}

.dgt-portal-section h3 {
    margin: 0 0 10px;
    font-size: 22px;
    color: var(--dgt-gray-900);
    font-family: "Cinzel", ui-serif, Georgia, serif;
    letter-spacing: .35px;
}

.dgt-portal-desc {
    color: var(--dgt-gray-500);
    font-size: 15px;
    margin: 0 0 18px;
}

.dgt-portal-empty {
    color: var(--dgt-gray-500);
    font-style: italic;
    padding: 16px 0;
}

/* ============================================
 * PORTAL: CHECK-IN
 * ============================================ */

.dgt-portal-checkin-wrap {
    display: flex;
    gap: 12px;
}

.dgt-portal-checkin-wrap .dgt-input {
    flex: 1;
}

.dgt-portal-result {
    margin-top: 16px;
    padding: 16px 20px;
    border-radius: var(--dgt-radius);
    font-size: 15px;
    line-height: 1.5;
    animation: dgt-fade 0.3s ease;
}

.dgt-portal-result.dgt-result-success {
    background: #ebfbee;
    border: 1px solid var(--dgt-success);
    color: #1a6e32;
}

.dgt-portal-result.dgt-result-error {
    background: #fff0f0;
    border: 1px solid var(--dgt-danger);
    color: #8a1e22;
}

.dgt-portal-result.dgt-result-warning {
    background: #fff9db;
    border: 1px solid var(--dgt-warning);
    color: #7c5e00;
}

.dgt-portal-result .dgt-result-name {
    font-size: 20px;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

.dgt-checkin-photo,
.dgt-avatar-sm {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 8px;
}

/* ============================================
 * PORTAL: REGISTER FORM
 * ============================================ */

.dgt-portal-form label {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--dgt-gray-700);
    margin-bottom: 8px;
}

.dgt-form-row {
    margin-bottom: 20px;
}

.dgt-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .dgt-form-row-2col {
        grid-template-columns: 1fr;
    }
}

.dgt-form-group {
    display: flex;
    flex-direction: column;
}

.dgt-form-help {
    font-size: 12px;
    color: var(--dgt-gray-500);
    margin-top: 4px;
}

.dgt-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
}

.dgt-form-status {
    font-size: 14px;
    font-weight: 600;
}

.dgt-form-status.dgt-status-success { color: var(--dgt-success); }
.dgt-form-status.dgt-status-error { color: var(--dgt-danger); }

/* ============================================
 * PORTAL: SEARCH RESULTS
 * ============================================ */

.dgt-portal-search-results {
    margin-top: 16px;
}

.dgt-search-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid var(--dgt-gray-200);
    border-radius: var(--dgt-radius);
    margin-bottom: 8px;
    background: #fff;
    transition: box-shadow var(--dgt-transition);
}

.dgt-student-card,
.dgt-exam-card {
    cursor: pointer;
}

.dgt-student-card:hover,
.dgt-exam-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

#dgt-portal-student-edit {
    margin-top: 20px;
    padding: 20px;
    background: var(--dgt-gray-50);
    border: 1px solid var(--dgt-gray-200);
    border-radius: var(--dgt-radius-lg);
}

/* ---- Student List tab (filterable table) ---- */

.dgt-student-list-wrap {
    overflow-x: auto;
    margin-bottom: 16px;
}

.dgt-student-list-table thead th.dgt-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    padding-right: 20px;
    position: relative;
}

.dgt-student-list-table thead th.dgt-sortable:hover {
    background: var(--dgt-gray-100);
}

.dgt-student-list-table thead th.dgt-sortable::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.4;
    border: 4px solid transparent;
    border-top-color: currentColor;
    margin-top: -6px;
}

.dgt-student-list-table thead th.dgt-sortable.dgt-sort-asc::after {
    opacity: 1;
    border-top-color: transparent;
    border-bottom-color: var(--dgt-primary);
    margin-top: -10px;
}

.dgt-student-list-table thead th.dgt-sortable.dgt-sort-desc::after {
    opacity: 1;
    border-top-color: var(--dgt-primary);
    margin-top: -2px;
}

.dgt-list-pagination {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dgt-list-pagination-info {
    font-size: 14px;
    color: var(--dgt-gray-700);
}

.dgt-list-name-link {
    font-weight: 600;
    color: var(--dgt-primary);
    text-decoration: none;
}

.dgt-list-name-link:hover {
    text-decoration: underline;
}

.dgt-row-expired {
    background: #fffde7 !important;
}

.dgt-exam-profile-card {
    padding: 20px;
    background: #fff;
    border: 1px solid var(--dgt-gray-200);
    border-radius: var(--dgt-radius-lg);
    margin-top: 16px;
}

.dgt-exam-profile-card .dgt-exam-photo {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    margin-bottom: 12px;
}

.dgt-exam-profile-card p {
    margin: 0 0 8px;
    font-size: 15px;
}

.dgt-exam-pass-btn {
    margin-top: 16px;
}

.dgt-search-card:hover {
    box-shadow: var(--dgt-shadow);
}

.dgt-search-card-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dgt-search-card-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--dgt-gray-900);
}

.dgt-search-card-meta {
    font-size: 13px;
    color: var(--dgt-gray-500);
}

.dgt-search-card-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dgt-meta-secondary {
    font-size: 12px;
    color: var(--dgt-gray-500);
}

.dgt-expire-ok { color: var(--dgt-success); font-weight: 600; font-size: 12px; }
.dgt-expire-expired { color: var(--dgt-danger); font-weight: 600; font-size: 12px; }

/* ============================================
 * KIOSK: FULL-SCREEN LAYOUT
 * ============================================ */

.dgt-kiosk {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    color: #fff;
}

.dgt-kiosk-screen {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 12vh;
}

.dgt-kiosk-center {
    text-align: center;
    width: 100%;
    max-width: 500px;
    padding: 20px;
}

/* ---- Kiosk PIN Screen ---- */

.dgt-kiosk-pin-screen {
    background:
        radial-gradient(900px 520px at 50% 25%, rgba(13,118,184,.40), transparent 60%),
        radial-gradient(700px 420px at 25% 70%, rgba(225,43,43,.14), transparent 58%),
        linear-gradient(135deg, rgba(20,26,34,.98), rgba(11,14,18,.98));
}

.dgt-kiosk-logo {
    margin-bottom: 40px;
}

.dgt-kiosk-logo-img {
    max-width: 200px;
    height: auto;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

.dgt-kiosk-icon {
    font-size: 64px;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

.dgt-kiosk-logo h1 {
    color: #fff;
    font-size: 24px;
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1.4;
    font-family: "Cinzel", ui-serif, Georgia, serif;
    letter-spacing: .5px;
}

.dgt-kiosk-subtitle {
    color: rgba(255,255,255,0.6);
    font-size: 18px;
    margin: 8px 0 0;
}

.dgt-kiosk-pin-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(242,210,27,.14);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 22px 70px rgba(0,0,0,.45);
}

.dgt-kiosk-pin-card h2 {
    color: #fff;
    margin: 0 0 8px;
    font-size: 22px;
}

.dgt-kiosk-pin-card p {
    color: rgba(255,255,255,0.6);
    margin: 0 0 24px;
    font-size: 14px;
}

.dgt-kiosk-pin-input {
    width: 200px;
    padding: 16px;
    font-size: 32px;
    text-align: center;
    letter-spacing: 12px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    background: rgba(0,0,0,0.3);
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    -webkit-text-security: disc;
    outline: none;
    display: block;
    margin: 0 auto 20px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.dgt-kiosk-pin-input:focus {
    border-color: rgba(242,210,27,.55);
    box-shadow: 0 0 0 4px rgba(242,210,27,.12);
}

.dgt-kiosk-pin-input::placeholder {
    color: rgba(255,255,255,0.3);
    letter-spacing: 8px;
}

.dgt-kiosk-error {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(231,76,60,0.25);
    border: 1px solid rgba(231,76,60,0.5);
    color: #ff8a80;
    font-size: 15px;
    font-weight: 500;
    min-height: 24px;
    display: none;
}

.dgt-kiosk-error.dgt-kiosk-error-visible,
.dgt-kiosk #dgt-kiosk-pin-error[style] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ---- Kiosk Buttons ---- */

.dgt-kiosk-btn {
    padding: 14px 40px;
    border: none;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.dgt-kiosk-btn-primary {
    background: linear-gradient(180deg, rgba(225,43,43,.98), rgba(170,22,22,.96));
    color: #fff;
    position: relative;
    box-shadow: 0 16px 30px rgba(225,43,43,.18);
}

.dgt-kiosk-btn-primary:hover {
    background: linear-gradient(180deg, rgba(225,43,43,1), rgba(170,22,22,.96));
    transform: translateY(-1px);
}

.dgt-kiosk-btn-primary::after{
    content:"";
    position:absolute;
    inset: -1px;
    border-radius: 12px;
    pointer-events:none;
    box-shadow: inset 0 0 0 1px rgba(242,210,27,.30);
}

/* ---- Kiosk Check-In Screen ---- */

.dgt-kiosk-checkin-screen {
    background:
        radial-gradient(900px 520px at 50% 25%, rgba(13,118,184,.40), transparent 60%),
        radial-gradient(700px 420px at 25% 70%, rgba(225,43,43,.14), transparent 58%),
        linear-gradient(135deg, rgba(20,26,34,.98), rgba(11,14,18,.98));
}

.dgt-kiosk-input-area {
    margin-top: 20px;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.dgt-kiosk-scan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

.dgt-kiosk-scan-actions .dgt-kiosk-btn {
    min-width: 120px;
}

.dgt-kiosk-btn-outline {
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255,255,255,0.35);
    color: #fff;
}

.dgt-kiosk-btn-outline:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

/* ---- Kiosk camera overlay (small portion of screen so user sees input + result) ---- */

.dgt-kiosk-camera-overlay {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    max-width: 92vw;
    z-index: 10000;
    background: rgba(0,0,0,0.85);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.dgt-kiosk-scanner-container {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}

.dgt-kiosk-scanner-container video,
.dgt-kiosk-scanner-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.dgt-kiosk-camera-hint {
    margin: 10px 0 12px;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    text-align: center;
}

.dgt-kiosk-camera-close {
    display: block;
    width: 100%;
    margin: 0;
}

.dgt-kiosk-checkin-input {
    width: 100%;
    max-width: 420px;
    padding: 20px 24px;
    font-size: 28px;
    text-align: center;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 16px;
    background: rgba(0,0,0,0.3);
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.dgt-kiosk-checkin-input:focus {
    border-color: rgba(13,118,184,.70);
    box-shadow: 0 0 0 4px rgba(13,118,184,.14);
}

.dgt-kiosk-checkin-input::placeholder {
    color: rgba(255,255,255,0.35);
    font-size: 22px;
}

/* ---- Kiosk Result Feedback ---- */

.dgt-kiosk-result {
    margin-top: 32px;
    padding: 32px;
    border-radius: 16px;
    color: #fff;
    animation: dgt-kiosk-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dgt-kiosk-pop {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.dgt-kiosk-result.dgt-kiosk-success {
    background: rgba(39,174,96,0.15);
    border: 2px solid rgba(39,174,96,0.4);
}

.dgt-kiosk-result.dgt-kiosk-fail {
    background: rgba(231,76,60,0.15);
    border: 2px solid rgba(231,76,60,0.4);
}

.dgt-kiosk-result.dgt-kiosk-warn {
    background: rgba(243,156,18,0.15);
    border: 2px solid rgba(243,156,18,0.4);
}

/* Member photo above scan box — separate from result, so member sees their photo first */
.dgt-kiosk-member-photo {
    margin: 0 0 24px;
    text-align: center;
}

.dgt-kiosk-member-photo-img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    border: 4px solid rgba(242,210,27,.35);
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}

.dgt-kiosk-result-icon {
    font-size: 56px;
    margin-bottom: 12px;
}

.dgt-kiosk-result-photo {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    margin: 0 auto 12px;
    border: 3px solid rgba(255,255,255,0.4);
}

.dgt-kiosk-result-name {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}

.dgt-kiosk-result-belt {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
    color: #fff;
}

/* Kiosk belt colors (on dark bg) */
.dgt-kiosk-result .dgt-belt-white, .dgt-kiosk-result .dgt-belt-white-stripe { background: rgba(255,255,255,0.9); color: #212529; }
.dgt-kiosk-result .dgt-belt-yellow, .dgt-kiosk-result .dgt-belt-yellow-stripe { background: #f1c40f; color: #212529; }
.dgt-kiosk-result .dgt-belt-green, .dgt-kiosk-result .dgt-belt-green-stripe { background: #27ae60; color: #fff; }
.dgt-kiosk-result .dgt-belt-blue, .dgt-kiosk-result .dgt-belt-blue-stripe { background: #2980b9; color: #fff; }
.dgt-kiosk-result .dgt-belt-red, .dgt-kiosk-result .dgt-belt-red-stripe { background: #e74c3c; color: #fff; }
.dgt-kiosk-result .dgt-belt-black, .dgt-kiosk-result .dgt-belt-black-stripe { background: #212529; color: #fff; border: 1px solid rgba(255,255,255,0.3); }

.dgt-kiosk-result-message {
    font-size: 18px;
    color: #fff;
    margin: 0;
}

.dgt-kiosk-result-warning {
    color: #f39c12;
    font-size: 15px;
    margin-top: 8px;
}

/* ---- Kiosk Lock Button ---- */

.dgt-kiosk-lock-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 10px 20px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.dgt-kiosk-lock-btn:hover {
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.8);
}

/* =========================================================
 * KIOSK: align (logo | photo | result) on one row above scan
 * .dgt-kiosk-screen already has position:absolute so it is
 * a positioning context — do NOT override to relative.
 * ========================================================= */

@media (min-width: 980px){

    :root{ --kiosk-top-row: 64px; }

    .dgt-kiosk-checkin-screen .dgt-kiosk-center{
        max-width: 100% !important;
        padding: 20px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100%;
        box-sizing: border-box;
    }

    .dgt-kiosk-checkin-screen .dgt-kiosk-logo{
        position: absolute;
        left: 64px;
        top: var(--kiosk-top-row);
        width: 320px;
        margin: 0 !important;
        text-align: center;
        z-index: 2;
    }

    .dgt-kiosk-checkin-screen .dgt-kiosk-logo-img{
        max-width: 160px !important;
        height: auto;
        margin: 0 auto 14px !important;
        display: block;
    }

    .dgt-kiosk-checkin-screen .dgt-kiosk-logo h1{
        font-size: 20px !important;
        line-height: 1.3 !important;
        max-width: 300px;
        margin: 0 auto !important;
    }

    .dgt-kiosk-checkin-screen .dgt-kiosk-subtitle{
        display: none !important;
    }

    .dgt-kiosk-checkin-screen .dgt-kiosk-input-area{
        margin-top: 20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 420px !important;
        width: 100%;
        text-align: center;
        z-index: 1;
    }

    .dgt-kiosk-checkin-screen .dgt-kiosk-input-area::before{
        content: "Scan your membership card to check in";
        display: block;
        margin: 0 0 14px;
        font-size: 18px;
        color: rgba(255,255,255,.72);
        font-family: "Cinzel", ui-serif, Georgia, serif;
        letter-spacing: .35px;
        text-align: center;
    }

    .dgt-kiosk-checkin-screen #dgt-kiosk-member-photo{
        position: absolute;
        left: 50%;
        top: var(--kiosk-top-row);
        transform: translateX(-50%);
        margin: 0 !important;
        width: 312px;
        text-align: center;
        z-index: 2;
    }

    .dgt-kiosk-checkin-screen .dgt-kiosk-member-photo-img{
        width: 240px !important;
        height: 240px !important;
        object-fit: cover;
        margin: 0 auto !important;
    }

    .dgt-kiosk-checkin-screen .dgt-kiosk-result{
        position: absolute;
        right: 64px;
        top: var(--kiosk-top-row);
        margin: 0 !important;
        width: 420px;
        text-align: center;
        z-index: 2;
    }
}

/* ---- Responsive: Portal ---- */

@media (max-width: 640px) {
    .dgt-portal-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .dgt-portal-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dgt-portal-checkin-wrap {
        flex-direction: column;
    }

    .dgt-search-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .dgt-search-card-right {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ---- Responsive: Kiosk ---- */

@media (max-width: 480px) {
    .dgt-kiosk-logo h1 {
        font-size: 24px;
    }

    .dgt-kiosk-icon {
        font-size: 48px;
    }

    .dgt-kiosk-checkin-input {
        font-size: 22px;
        padding: 16px 18px;
    }

    .dgt-kiosk-result-name {
        font-size: 24px;
    }

    .dgt-kiosk-pin-card {
        padding: 24px;
    }
}

/* ---- Hide WordPress chrome on kiosk pages ---- */
body.dgt-has-kiosk #wpadminbar,
body.dgt-has-kiosk header,
body.dgt-has-kiosk .site-header,
body.dgt-has-kiosk nav.main-navigation,
body.dgt-has-kiosk footer,
body.dgt-has-kiosk .site-footer,
body.dgt-has-kiosk .wp-site-blocks > header,
body.dgt-has-kiosk .wp-site-blocks > footer,
body:has(.dgt-kiosk) #wpadminbar,
body:has(.dgt-kiosk) header,
body:has(.dgt-kiosk) .site-header,
body:has(.dgt-kiosk) nav.main-navigation,
body:has(.dgt-kiosk) footer,
body:has(.dgt-kiosk) .site-footer,
body:has(.dgt-kiosk) .wp-site-blocks > header,
body:has(.dgt-kiosk) .wp-site-blocks > footer {
    display: none !important;
}

html.dgt-has-kiosk,
body.dgt-has-kiosk,
body:has(.dgt-kiosk) {
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    min-height: 100vh !important;
    background: #0b0e12 !important;
}

body.dgt-has-kiosk .wp-site-blocks,
body.dgt-has-kiosk .entry-content,
body.dgt-has-kiosk main,
body.dgt-has-kiosk .site-content,
body.dgt-has-kiosk article,
body.dgt-has-kiosk .wp-block-group,
body.dgt-has-kiosk .is-layout-constrained,
body.dgt-has-kiosk .is-layout-flow,
body.dgt-has-kiosk .page-content,
body:has(.dgt-kiosk) .wp-site-blocks,
body:has(.dgt-kiosk) .entry-content,
body:has(.dgt-kiosk) main,
body:has(.dgt-kiosk) .site-content,
body:has(.dgt-kiosk) article,
body:has(.dgt-kiosk) .wp-block-group,
body:has(.dgt-kiosk) .is-layout-constrained,
body:has(.dgt-kiosk) .is-layout-flow,
body:has(.dgt-kiosk) .page-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
    transform: none !important;
    contain: none !important;
}

/* ============================================
 * PORTAL: PRINT REPORTS (Letter, margins)
 * ============================================ */

@media print {
    @page {
        size: letter;
        margin: 0.75in;
    }
    body.dgt-printing-report * {
        visibility: hidden;
    }
    body.dgt-printing-report .dgt-print-this,
    body.dgt-printing-report .dgt-print-this * {
        visibility: visible;
    }
    body.dgt-printing-report .dgt-print-this {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
        border: none;
    }
    body.dgt-printing-report .dgt-print-this .dgt-table {
        width: 100%;
    }
    body.dgt-printing-report .dgt-print-this .dgt-btn,
    body.dgt-printing-report .dgt-print-this input[type="date"],
    body.dgt-printing-report .dgt-print-this input[type="month"],
    body.dgt-printing-report .dgt-print-this input[type="text"] {
        display: none !important;
    }
}