@font-face { font-family: 'Gotham'; src: url('../Fonts/Gotham-Book.otf') format('opentype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Gotham'; src: url('../Fonts/Gotham-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Gotham'; src: url('../Fonts/Gotham-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'DB Heavent'; src: url('../Fonts/DB-Heavent-Light.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'DB Heavent'; src: url('../Fonts/DB-Heavent-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }

/* 'DB Heavent Boost' is the same two font files again, just declared under a second name with
   size-adjust applied. Measured directly from the font outlines: a capital letter in Gotham
   Bold stands 0.70em tall, the same letter in DB Heavent Bold only 0.48em - so wherever the
   two sit on the same line (headings, buttons: "ลงทะเบียน / REGISTER") Gotham's English renders
   noticeably larger than DB Heavent's Thai fallback at an identical declared font-size. 146%
   (0.70 / 0.48) brings DB Heavent's own cap-height up to match Gotham's, so use this alias -
   not plain 'DB Heavent' - in any font stack that lists 'Gotham' first. Leave the plain
   'DB Heavent' face above untouched: it's the primary body font (Thai and English both render
   in it there, already the same size as each other, so scaling it would only make body text
   larger for no reason). size-adjust is supported in all current browsers; where it isn't,
   this alias just renders at the same size as plain DB Heavent. */
@font-face { font-family: 'DB Heavent Boost'; src: url('../Fonts/DB-Heavent-Light.ttf') format('truetype'); font-weight: 400; font-style: normal; size-adjust: 146%; }
@font-face { font-family: 'DB Heavent Boost'; src: url('../Fonts/DB-Heavent-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; size-adjust: 146%; }
@font-face { font-family: 'Rumpi'; src: url('../Fonts/Rumpi.otf') format('opentype'); font-weight: 400; font-style: normal; }

:root {
    --vnet-red: #c8202b;
    --vnet-red-dark: #a51820;
    --vnet-black: #1a1a1a;
    --vnet-cream: #f1ede7;
    --vnet-gray: #6b6b6b;
}

* { box-sizing: border-box; }

body {
    font-family: 'DB Heavent', 'Gotham', 'Segoe UI', Tahoma, Arial, sans-serif;
    background-color: #fff;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--vnet-black);
}

.page-wrap { max-width: 540px; margin: 0 auto; padding: 32px 16px 60px; }

/* Guest-facing registration pages (Partners/Family/MoNWIC Register.aspx, all wrapped in
   .page-wrap) read a bit bigger than the admin/staff tools, which reuse the same class names
   (.field-row, .input, .err, .btn-primary/.btn-secondary, .brand-name/.brand-bold) under
   .admin-page instead - these overrides only take effect inside .page-wrap, so Check-in,
   Dashboard and the company report stay at their original compact size. */
.page-wrap .brand-header .brand-name { font-size: 17.5px; }
.page-wrap .brand-header .brand-bold { font-size: 32px; }
.page-wrap .field-row label { font-size: 18px; }
.page-wrap .input, .page-wrap select.input, .page-wrap textarea.input { font-size: 18.5px; }
.page-wrap .err { font-size: 14.5px; }
.page-wrap .btn-primary { font-size: 18px; }
.page-wrap .btn-secondary { font-size: 16.5px; }

.brand-header { text-align: center; margin-bottom: 22px; }
.brand-header .brand-name {
    font-family: 'Gotham', 'DB Heavent Boost', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 2px;
    color: var(--vnet-red);
    text-transform: uppercase;
    margin: 0;
}
.brand-header .brand-script {
    font-family: 'Rumpi', 'Gotham', cursive;
    font-size: 44px;
    color: var(--vnet-red);
    margin: 2px 0 0;
    line-height: 1.1;
}
.brand-header .brand-bold {
    font-family: 'Gotham', 'DB Heavent Boost', sans-serif;
    font-weight: 700;
    font-size: 29px;
    color: var(--vnet-red);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 4px 0 0;
}

.reg-card {
    background-color: var(--vnet-cream);
    background-image: linear-gradient(rgba(241,237,231,.90), rgba(241,237,231,.90)), url('../Images/building-bg.jpg');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    border-radius: 16px;
    padding: 28px 22px;
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.reg-card h2 {
    margin: 0 0 4px;
    font-size: 22px;
    font-family: 'Gotham', 'DB Heavent Boost', sans-serif;
    font-weight: 700;
    color: var(--vnet-black);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.event-sub { margin: 0 0 20px; color: var(--vnet-gray); font-size: 16.5px; font-weight: 600; }

/* Tells guests which fields are mandatory before they hit the first input - sits right under
   the event date, above the form fields. English-only by request. Red and larger so it actually
   draws the eye instead of blending into the gray hint text around it. */
.form-note { margin: -14px 0 20px; color: var(--vnet-red); font-size: 17px; font-weight: 700; font-style: italic; }

.field-row { margin-bottom: 16px; }
.field-row label { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 6px; color: #374151; }
.input, select.input, textarea.input {
    width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 16px; font-family: inherit; background: #fff; color: var(--vnet-black);
}
.input:focus, select.input:focus, textarea.input:focus {
    outline: none; border-color: var(--vnet-red); box-shadow: 0 0 0 3px rgba(200,32,43,.12);
}
.err { color: #dc2626; font-size: 13px; font-weight: 600; display: block; margin-top: 4px; }

.btn-primary {
    background: var(--vnet-red); color: #fff; border: none; padding: 13px 24px; border-radius: 8px;
    font-size: 16px; font-family: 'Gotham', 'DB Heavent Boost', sans-serif; font-weight: 700;
    letter-spacing: .4px; text-transform: uppercase; cursor: pointer; width: 100%;
}
.btn-primary:hover { background: var(--vnet-red-dark); }
.btn-secondary {
    background: #fff; color: var(--vnet-red); border: 1px solid var(--vnet-red); padding: 10px 22px;
    border-radius: 8px; font-size: 15px; font-family: 'Gotham', 'DB Heavent Boost', sans-serif; font-weight: 700;
    cursor: pointer;
}
.btn-secondary:hover { background: #fdf1f1; }

.companion-box { border: 1px dashed #d1d5db; border-radius: 8px; padding: 14px; margin-bottom: 14px; }
.companion-title {
    font-family: 'Gotham', 'DB Heavent Boost', sans-serif; font-weight: 700; font-size: 17.5px; margin: 0 0 10px; color: var(--vnet-red);
}
.qr-img { display: block; margin: 4px auto 0; width: 200px; height: 200px; }
.regcode { font-size: 17.5px; font-weight: 700; letter-spacing: 1px; color: var(--vnet-black); text-align: center; margin: 0 0 18px; }
.hint { color: var(--vnet-gray); font-size: 16.5px; font-weight: 600; }

/* Ticket-style card used for the "Save Image" summary (#captureArea) - this is exactly
   the element html2canvas snapshots, so it needs to look complete and polished on its own. */
.ticket-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,.16);
    text-align: center;
}
.ticket-topbar { height: 8px; background: var(--vnet-red); }
.ticket-body { padding: 32px 28px 36px; }
.ticket-body .brand-header { margin-bottom: 18px; }
.ticket-name { font-size: 20px; font-weight: 700; margin: 2px 0 6px; color: var(--vnet-black); }
.ticket-details { color: var(--vnet-gray); font-size: 16.5px; font-weight: 600; margin: 0 0 20px; }
.ticket-divider { border-top: 2px dashed #e5ddd4; margin: 4px 0 22px; }

.cover-card { padding: 0; overflow: hidden; }
.cover-img { display: block; width: 100%; height: auto; }
.cover-footer { padding: 20px 22px 28px; }
.cover-footer .btn-primary { display: block; }

/* "Please wait" modal shown while btnSubmit's postback is saving the registration and
   sending the confirmation email - blocks the screen so the guest can't double-submit. */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26,26,26,.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal-box {
    background: #fff;
    border-radius: 16px;
    padding: 32px 28px;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
}
.modal-spinner {
    width: 44px; height: 44px;
    border: 4px solid #eee;
    border-top-color: var(--vnet-red);
    border-radius: 50%;
    margin: 0 auto 18px;
    animation: modal-spin .8s linear infinite;
}
@keyframes modal-spin { to { transform: rotate(360deg); } }
.modal-box p { margin: 0; font-size: 15px; font-weight: 600; color: var(--vnet-black); line-height: 1.6; }

/* Admin: Dashboard + Check-in pages (wider layout than the guest reg-card pages) */
.admin-page { max-width: 1040px; margin: 0 auto; padding: 24px 16px 60px; }
.admin-header {
    display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
    gap: 12px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #e5ddd4;
}
.admin-header .brand-sub {
    font-family: 'Gotham', 'DB Heavent Boost', sans-serif; font-weight: 700; font-size: 21px;
    color: var(--vnet-black); margin: 2px 0 0;
}
.admin-nav { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.admin-nav a {
    color: var(--vnet-black); text-decoration: none; font-size: 15px; font-weight: 600; padding: 8px 14px;
    border-radius: 8px; border: 1px solid #e5ddd4;
}
.admin-nav a:hover, .admin-nav a.active { border-color: var(--vnet-red); color: var(--vnet-red); }
.admin-nav .logout-link { color: var(--vnet-gray); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 16px; margin-bottom: 32px; }
.stat-card { background: #fff; border-radius: 16px; padding: 20px 22px; box-shadow: 0 4px 18px rgba(0,0,0,.08); }
.stat-card .stat-event {
    font-family: 'Gotham', 'DB Heavent Boost', sans-serif; font-weight: 700; color: var(--vnet-red);
    text-transform: uppercase; font-size: 14px; letter-spacing: 1px; margin: 0 0 12px;
}
.stat-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid #f1ede7; }
.stat-row:first-of-type { border-top: none; }
.stat-row .stat-label { font-size: 14px; font-weight: 600; color: var(--vnet-gray); }
.stat-row .stat-num { font-size: 21px; font-weight: 700; color: var(--vnet-black); font-family: 'Gotham', 'DB Heavent Boost', sans-serif; white-space: nowrap; }
.stat-row.highlight .stat-num { color: var(--vnet-red); }

.event-section { margin-bottom: 36px; }
.event-section h3 {
    font-family: 'Gotham', 'DB Heavent Boost', sans-serif; font-weight: 700; color: var(--vnet-black);
    text-transform: uppercase; letter-spacing: .5px; font-size: 16px; margin: 0 0 12px;
}
.table-scroll { overflow-x: auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.data-table { width: 100%; border-collapse: collapse; font-size: 14.5px; white-space: nowrap; }
.data-table th, .data-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #f1ede7; }
.data-table th { color: var(--vnet-gray); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; }
.data-table tr:last-child td { border-bottom: none; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.badge-yes { background: #e7f6ec; color: #1a7a3d; }
.badge-no { background: #f4f0eb; color: var(--vnet-gray); }

.btn-tiny {
    display: inline-block; background: var(--vnet-red); color: #fff; padding: 6px 14px;
    border-radius: 6px; font-size: 13px; font-weight: 700; text-decoration: none;
    font-family: 'Gotham', 'DB Heavent Boost', sans-serif;
}
.btn-tiny:hover { background: var(--vnet-red-dark); }

.search-row { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.search-row .input { flex: 1; min-width: 220px; }
.btn-scan { white-space: nowrap; }

/* Camera QR scanner overlay, shared by CheckIn.aspx and Souvenir.aspx (Scripts/qr-scanner.js) */
.scanner-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26,26,26,.78);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.scanner-box {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0,0,0,.3);
}
.scanner-status { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; color: var(--vnet-black); line-height: 1.5; }
.scanner-video {
    display: block;
    width: 100%;
    max-height: 320px;
    background: #000;
    border-radius: 10px;
    margin-bottom: 14px;
    object-fit: cover;
}
.scanner-close { width: 100%; }

.login-card { max-width: 360px; margin: 80px auto 0; }

.checkin-detail { background: #fff; border-radius: 16px; padding: 24px 22px; box-shadow: 0 4px 18px rgba(0,0,0,.08); margin-top: 8px; }
.checkin-detail h3 { margin: 0 0 4px; font-size: 18px; font-family: 'Gotham', 'DB Heavent Boost', sans-serif; }
.companion-list-view { list-style: none; margin: 8px 0 0; padding: 0; font-size: 15px; font-weight: 600; color: var(--vnet-black); }
.companion-list-view li { padding: 4px 0; border-top: 1px dashed #e5ddd4; }
.companion-list-view li:first-child { border-top: none; }

.link-list { list-style: none; margin: 0 0 24px; padding: 0; }
.link-list li { margin-bottom: 8px; }
.link-list a {
    display: block; padding: 12px 16px; background: #fff; border: 1px solid #e5ddd4;
    border-radius: 8px; color: var(--vnet-black); font-weight: 600; text-decoration: none; font-size: 15.5px;
}
.link-list a:hover { border-color: var(--vnet-red); color: var(--vnet-red); }

/* Partners/CompanyReport.aspx only - public per-company summary page (no admin nav) */
.cr-page { max-width: 760px; margin: 0 auto; padding: 32px 16px 60px; }

.cr-hero {
    background: linear-gradient(135deg, var(--vnet-red), var(--vnet-red-dark));
    border-radius: 20px; padding: 30px 28px 26px; text-align: center;
    box-shadow: 0 10px 28px rgba(200,32,43,.25); margin-bottom: 24px;
}
.cr-hero-brand {
    font-family: 'Gotham', 'DB Heavent Boost', sans-serif; font-weight: 700; font-size: 14px;
    letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.82); margin: 0 0 10px;
}
.cr-hero-company {
    font-family: 'Gotham', 'DB Heavent Boost', sans-serif; font-weight: 700; font-size: 26px;
    color: #fff; margin: 0 0 8px; line-height: 1.3;
}
.cr-hero-sub { font-size: 15.5px; font-weight: 600; color: rgba(255,255,255,.88); margin: 0; }

.cr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; margin-bottom: 28px; }
.cr-stat {
    background: #fff; border-radius: 16px; padding: 22px 20px; text-align: center;
    box-shadow: 0 4px 18px rgba(0,0,0,.08); border-top: 4px solid transparent;
}
.cr-stat-registered { border-top-color: #2563eb; }
.cr-stat-checkedin { border-top-color: #1a7a3d; }
.cr-stat-souvenir { border-top-color: #c9860a; }
.cr-stat-num {
    font-family: 'Gotham', 'DB Heavent Boost', sans-serif; font-weight: 700; font-size: 34px;
    line-height: 1.1; margin: 0 0 6px;
}
.cr-stat-registered .cr-stat-num { color: #2563eb; }
.cr-stat-checkedin .cr-stat-num { color: #1a7a3d; }
.cr-stat-souvenir .cr-stat-num { color: #c9860a; }
.cr-stat-label { font-size: 14px; font-weight: 700; color: var(--vnet-gray); margin: 0; }

.cr-table-card { background: #fff; border-radius: 16px; padding: 22px 22px 8px; box-shadow: 0 4px 18px rgba(0,0,0,.08); }
.cr-table-card h3 {
    font-family: 'Gotham', 'DB Heavent Boost', sans-serif; font-weight: 700; color: var(--vnet-black);
    text-transform: uppercase; letter-spacing: .5px; font-size: 16px; margin: 0 0 14px;
}
.cr-table-card .table-scroll { box-shadow: none; border-radius: 10px; border: 1px solid #f1ede7; }
.cr-table-card .data-table tr:nth-child(even) td { background: #faf8f5; }
.cr-table-card .data-table tr:hover td { background: #fdf1f1; }
.cr-badge-time { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--vnet-gray); white-space: nowrap; }

.cr-footer-note { text-align: center; color: var(--vnet-gray); font-size: 14px; font-weight: 600; margin: 22px 0 0; }

.cr-invalid-card {
    background: #fff; border-radius: 20px; padding: 48px 28px; text-align: center;
    box-shadow: 0 10px 28px rgba(0,0,0,.08); margin-top: 40px;
}
.cr-invalid-icon {
    width: 56px; height: 56px; border-radius: 50%; background: #fdecea; color: var(--vnet-red);
    font-size: 28px; font-weight: 700; line-height: 56px; margin: 0 auto 18px;
    font-family: 'Gotham', 'DB Heavent Boost', sans-serif;
}
.cr-invalid-title { font-family: 'Gotham', 'DB Heavent Boost', sans-serif; font-weight: 700; font-size: 19px; color: var(--vnet-black); margin: 0 0 6px; }
.cr-invalid-sub { color: var(--vnet-gray); font-size: 15px; font-weight: 600; margin: 0; }

/* Admin/Dashboard.aspx look-and-feel refresh - all rules scoped under .dash-page / .dash-body
   so Check-in.aspx and Souvenir.aspx (which share .admin-page/.admin-header/.data-table/.badge
   with Dashboard) are completely unaffected. */
.dash-body { background: #faf7f4; }

.dash-page.admin-page { padding-top: 28px; }
.dash-page .admin-header { margin-bottom: 30px; padding-bottom: 20px; }

.dash-page .stat-grid { gap: 20px; margin-bottom: 40px; }
.dash-page .stat-card {
    border-radius: 18px; padding: 22px 22px 18px; border-top: 4px solid #e5ddd4;
    transition: transform .15s ease, box-shadow .15s ease;
}
.dash-page .stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.11); }
.dash-page .stat-card.dash-partners { border-top-color: #2563eb; }
.dash-page .stat-card.dash-family { border-top-color: #1a7a3d; }
.dash-page .stat-card.dash-monwic { border-top-color: #c9860a; }
.dash-page .stat-row { padding: 8px 0; }

.dash-page .event-section {
    background: #fff; border-radius: 18px; padding: 22px 22px 6px;
    box-shadow: 0 4px 18px rgba(0,0,0,.07); margin-bottom: 28px;
}
.dash-page .event-section h3 {
    margin: 0 0 16px; padding-left: 14px; border-left: 4px solid #e5ddd4;
}
.dash-page .event-section h3.dash-partners { border-left-color: #2563eb; }
.dash-page .event-section h3.dash-family { border-left-color: #1a7a3d; }
.dash-page .event-section h3.dash-monwic { border-left-color: #c9860a; }
.dash-page .event-section .table-scroll {
    box-shadow: none; border: 1px solid #f1ede7; border-radius: 12px;
}
.dash-page .event-section .data-table tr:nth-child(even) td { background: #faf8f5; }
.dash-page .event-section .data-table tr:hover td { background: #fdf1f1; }

/* Sortable / searchable data tables (Scripts/table-tools.js) - shared by
   Partners/CompanyReport.aspx and Admin/Dashboard.aspx, and any future report
   or dashboard table using class "data-table". */
.table-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.table-search-wrap { position: relative; width: 100%; max-width: 340px; min-width: 220px; }
.table-search-wrap .input { padding-left: 34px; }
.table-search-wrap::before {
    content: "\1F50D";
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    font-size: 13px; opacity: .55; pointer-events: none; line-height: 1;
}
.data-table th.sortable-th { cursor: pointer; user-select: none; position: relative; padding-right: 22px; }
.data-table th.sortable-th:hover { color: var(--vnet-black); }
.data-table th.sortable-th::after {
    content: "\2195"; position: absolute; right: 6px; top: 10px; font-size: 11px; opacity: .4;
}
.data-table th.sortable-th.sort-asc::after { content: "\2191"; opacity: 1; color: var(--vnet-red); }
.data-table th.sortable-th.sort-desc::after { content: "\2193"; opacity: 1; color: var(--vnet-red); }
.data-table tr.table-no-results td { text-align: center; color: var(--vnet-gray); padding: 16px 14px; white-space: normal; }

/* Agenda under the QR code on the registration-complete ticket (inside #captureArea, so it is
   included in the "Save Image" snapshot too). Same content as the agenda in the emails. */
.ticket-agenda { margin-top: 24px; text-align: left; }
.ticket-agenda .ticket-divider { margin: 0 0 18px; }
.agenda-title { font-size: 17.5px; font-weight: 700; color: var(--vnet-black); text-align: center; margin: 0 0 10px; }
.agenda-table { width: 100%; border-collapse: collapse; background: #f7f3ee; border-radius: 10px; }
.agenda-table td { padding: 9px 12px; font-size: 16px; line-height: 1.45; vertical-align: top; border-bottom: 1px solid #e4ddd2; }
.agenda-table tr:last-child td { border-bottom: none; }
.agenda-time { width: 1%; white-space: nowrap; color: var(--vnet-red); font-weight: 700; }
.agenda-text { color: #3a3a3a; }