/* ============================================================
   BKFSEA / RezMagic responsive event override
   File: BKFTEMP.rwd.css
   Purpose: visually align RezMagic booking flow with BKFSEA
   while preserving RezMagic/Bootstrap functionality.
   ============================================================ */

:root {
    --bkf-black: #050505;
    --bkf-charcoal: #111111;
    --bkf-charcoal-2: #191919;
    --bkf-white: #ffffff;
    --bkf-muted: #b7b7b7;
    --bkf-yellow: #ffcf20;
    --bkf-gold: #e4ad12;
    --bkf-border: rgba(255,255,255,.16);
    --bkf-shadow: 0 14px 40px rgba(0,0,0,.28);
}

/* ---------- Global ---------- */

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--bkf-black);
    color: var(--bkf-white);
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body,
p,
li,
label,
.form-control,
input,
select,
textarea,
button {
    font-size: 15px;
}

a {
    color: var(--bkf-yellow);
}

a:hover,
a:focus {
    color: #ffe477;
    text-decoration: none;
}

hr {
    border-top-color: var(--bkf-border);
}

/* ---------- Main containers ---------- */

.container,
.container-fluid {
    position: relative;
}

#main-content,
main,
.page-content,
.booking-content {
    background: transparent;
}

.well,
.panel,
.panel-default,
.panel-body,
.thumbnail,
.list-group-item,
.modal-content {
    background: var(--bkf-charcoal);
    color: var(--bkf-white);
    border-color: var(--bkf-border);
    border-radius: 0;
    box-shadow: none;
}

.panel-heading,
.panel-default > .panel-heading {
    background: var(--bkf-charcoal-2);
    color: var(--bkf-white);
    border-color: var(--bkf-border);
    border-radius: 0;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ---------- Header / event artwork ---------- */

#main-header,
header,
.header {
    background: var(--bkf-black);
    border: 0;
}

#main-header img,
header img,
.header img,
img.img-responsive {
    max-width: 100%;
    height: auto;
}

#main-header img,
header .img-responsive {
    width: 100%;
    margin: 0 auto;
    display: block;
}

/* If RezMagic places the header image inside a padded container,
   remove the visual gap so the art reads as a full-width banner. */
#main-header .container,
header .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* ---------- Top navigation ---------- */

#navbar-inverse,
.navbar-inverse,
.navbar {
    background: var(--bkf-black);
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
}

.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-brand,
.navbar a {
    color: var(--bkf-white);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: var(--bkf-yellow);
    background: transparent;
}

/* ---------- Typography ---------- */

h1, h2, h3, h4, h5, h6,
.page-header,
.panel-title {
    color: var(--bkf-white);
    font-family: "Arial Narrow", Impact, Haettenschweiler, Arial, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .01em;
}

h1 {
    font-size: clamp(42px, 6vw, 78px);
    line-height: .95;
    margin-top: 18px;
}

h2 {
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1;
}

h3 {
    font-size: clamp(24px, 3vw, 38px);
}

h4 {
    font-size: 22px;
}

h5, h6 {
    letter-spacing: .06em;
}

.page-header {
    border-bottom: 2px solid var(--bkf-yellow);
    padding-bottom: 14px;
}

/* ---------- Booking landing page emphasis ---------- */

body h2:first-of-type {
    margin-top: 30px;
}

body h3,
body h4,
body h5,
body h6 {
    color: var(--bkf-white);
}

/* Make event metadata read like branded stat blocks where possible */
dl,
.event-info,
.event-details {
    color: var(--bkf-white);
}

dt,
.event-info strong,
.event-details strong {
    color: var(--bkf-yellow);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
}

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

a.btn,
button,
.btn,
input[type="submit"],
input[type="button"] {
    background: var(--bkf-yellow);
    border: 2px solid var(--bkf-yellow);
    border-radius: 0;
    color: var(--bkf-black) !important;
    font-family: "Arial Narrow", Impact, Haettenschweiler, Arial, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .045em;
    padding: 13px 22px;
    min-height: 48px;
    box-shadow: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

a.btn:hover,
button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.btn:focus,
button:focus,
.btn:focus {
    background: var(--bkf-white);
    border-color: var(--bkf-white);
    color: var(--bkf-black) !important;
    text-decoration: none;
}

a.btn:active,
button:active,
.btn:active {
    transform: translateY(1px);
}

/* Secondary/default actions */
.btn-default,
a.btn-default {
    background: transparent;
    border-color: rgba(255,255,255,.42);
    color: var(--bkf-white) !important;
}

.btn-default:hover,
a.btn-default:hover {
    background: var(--bkf-white);
    border-color: var(--bkf-white);
    color: var(--bkf-black) !important;
}

.btn-primary,
a.btn-primary {
    background: var(--bkf-yellow);
    border-color: var(--bkf-yellow);
    color: var(--bkf-black) !important;
}

/* ---------- Forms ---------- */

.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    background: #0d0d0d;
    color: var(--bkf-white);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 0;
    box-shadow: none;
    min-height: 44px;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--bkf-yellow);
    box-shadow: 0 0 0 2px rgba(255,207,32,.12);
    outline: 0;
}

label,
.control-label {
    color: var(--bkf-white);
    font-weight: 800;
}

.help-block,
.text-muted,
small {
    color: var(--bkf-muted);
}

.input-group-addon {
    background: var(--bkf-charcoal-2);
    color: var(--bkf-white);
    border-color: rgba(255,255,255,.28);
    border-radius: 0;
}

/* ---------- Tables / cabin and price grids ---------- */

.table {
    color: var(--bkf-white);
    background: transparent;
}

.table > thead > tr > th {
    color: var(--bkf-yellow);
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 2px solid var(--bkf-yellow);
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > thead > tr > td {
    border-top-color: var(--bkf-border);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: rgba(255,255,255,.035);
}

.table-hover > tbody > tr:hover {
    background: rgba(255,207,32,.06);
}

/* ---------- Progress / breadcrumbs ---------- */

.breadcrumb {
    background: transparent;
    border-radius: 0;
    padding-left: 0;
}

.breadcrumb > li,
.breadcrumb > li > a {
    color: var(--bkf-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .05em;
}

.breadcrumb > .active {
    color: var(--bkf-yellow);
}

.progress {
    background: #242424;
    border-radius: 0;
    box-shadow: none;
}

.progress-bar {
    background: var(--bkf-yellow);
    color: var(--bkf-black);
    font-weight: 800;
}

/* ---------- Alerts ---------- */

.alert {
    border-radius: 0;
    border-width: 1px;
}

.alert-info,
.alert-success,
.alert-warning {
    background: #151515;
    color: var(--bkf-white);
    border-color: var(--bkf-yellow);
}

/* ---------- Footer ---------- */

#main-footer,
footer,
.footer {
    background: var(--bkf-black);
    color: var(--bkf-muted);
    border-top: 1px solid var(--bkf-border);
    margin-top: 44px;
}

#main-footer img {
    margin-bottom: 10px;
    max-width: 100%;
    height: auto;
}

#main-footer a,
footer a {
    color: var(--bkf-white);
    font-weight: 700;
}

#main-footer a:hover,
footer a:hover {
    color: var(--bkf-yellow);
}

#rezmagic-contact {
    display: none;
}

/* ---------- Useful BKFSEA utility classes for optional custom HTML ---------- */

.bkfsea-kicker {
    color: var(--bkf-yellow);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.bkfsea-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin: 28px 0;
    background: var(--bkf-border);
}

.bkfsea-stat {
    flex: 1 1 220px;
    background: var(--bkf-charcoal);
    padding: 22px;
    text-align: center;
}

.bkfsea-stat strong {
    display: block;
    color: var(--bkf-yellow);
    font-size: 28px;
    font-family: "Arial Narrow", Impact, Haettenschweiler, Arial, sans-serif;
    line-height: 1;
}

.bkfsea-stat span {
    display: block;
    color: var(--bkf-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 8px;
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {

    body {
        font-size: 14px;
    }

    .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    h1 {
        font-size: 44px;
    }

    h2 {
        font-size: 34px;
    }

    h3 {
        font-size: 27px;
    }

    a.btn,
    button,
    .btn,
    input[type="submit"],
    input[type="button"] {
        width: 100%;
        margin-bottom: 10px;
        white-space: normal;
    }

    .table-responsive {
        border-color: var(--bkf-border);
    }

    #main-footer,
    footer {
        text-align: center;
    }
}

/* ---------- Larger screens ---------- */

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

/* ============================================================
   RAFIV1 / RezMagic compatibility fixes
   Added 2026-08-21
   Purpose: preserve the fight-event styling while correcting
   RezMagic framework conflicts involving dark section headers,
   readonly/disabled form fields, and content/text panels.
   ============================================================ */

/* ---------- Section / fieldset headers ----------
   RezMagic commonly renders page section titles as LEGEND elements.
   Bootstrap/framework defaults can leave these charcoal on black. */
legend,
fieldset > legend,
.form-horizontal legend,
.section-title,
.section-header,
.form-section-title,
.form-section-header {
    color: var(--bkf-white) !important;
    background: transparent !important;
    border-bottom-color: rgba(255,255,255,.72) !important;
    opacity: 1 !important;
}

/* Keep headings inside RezMagic content regions readable even when
   framework-specific selectors try to restore Bootstrap gray text. */
#main-content h1,
#main-content h2,
#main-content h3,
#main-content h4,
#main-content h5,
#main-content h6,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6,
.booking-content h1,
.booking-content h2,
.booking-content h3,
.booking-content h4,
.booking-content h5,
.booking-content h6 {
    color: var(--bkf-white) !important;
}

/* ---------- Readonly / disabled RezMagic fields ----------
   Bootstrap normally paints readonly controls light gray. In this
   theme that produced white text on a very light field background. */
.form-control[readonly],
.form-control[disabled],
fieldset[disabled] .form-control,
input[readonly],
input[disabled],
select[disabled],
textarea[readonly],
textarea[disabled] {
    background-color: #0d0d0d !important;
    color: var(--bkf-white) !important;
    -webkit-text-fill-color: var(--bkf-white) !important;
    border-color: rgba(255,255,255,.28) !important;
    opacity: 1 !important;
}

/* Browser autofill can also introduce a white/light fill. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--bkf-white) !important;
    -webkit-box-shadow: 0 0 0 1000px #0d0d0d inset !important;
    box-shadow: 0 0 0 1000px #0d0d0d inset !important;
    caret-color: var(--bkf-white);
}

/* ---------- Text / information blocks ----------
   Normalize Bootstrap/RezMagic content panels so a framework rule
   cannot reintroduce a white panel under white theme text. */
.well,
.panel,
.panel-default,
.panel-body,
.modal-content,
.modal-body,
.thumbnail,
.list-group-item,
.jumbotron,
.alert,
.form-control-static,
pre,
blockquote {
    background-color: var(--bkf-charcoal) !important;
    color: var(--bkf-white) !important;
}

/* Terms, policy, agreement and other scrollable HTML content areas
   sometimes bring their own dark/black text from RezMagic content. */
.terms,
.terms-content,
.terms-conditions,
.terms-and-conditions,
.termsConditions,
.booking-terms,
.booking-terms-content,
.agreement,
.agreement-text,
.policy-text,
.policy-content,
.scrollable-content,
.scroll-content,
.html-content,
.content-block,
.text-block {
    background-color: var(--bkf-black) !important;
    color: var(--bkf-white) !important;
}

.terms p,
.terms li,
.terms-content p,
.terms-content li,
.terms-conditions p,
.terms-conditions li,
.terms-and-conditions p,
.terms-and-conditions li,
.termsConditions p,
.termsConditions li,
.booking-terms p,
.booking-terms li,
.booking-terms-content p,
.booking-terms-content li,
.agreement p,
.agreement li,
.agreement-text p,
.agreement-text li,
.policy-text p,
.policy-text li,
.policy-content p,
.policy-content li,
.scrollable-content p,
.scrollable-content li,
.scroll-content p,
.scroll-content li,
.html-content p,
.html-content li,
.content-block p,
.content-block li,
.text-block p,
.text-block li {
    color: var(--bkf-white) !important;
}

/* Preserve branded links inside corrected text blocks. */
.terms a,
.terms-content a,
.terms-conditions a,
.terms-and-conditions a,
.termsConditions a,
.booking-terms a,
.booking-terms-content a,
.agreement a,
.agreement-text a,
.policy-text a,
.policy-content a,
.scrollable-content a,
.scroll-content a,
.html-content a,
.content-block a,
.text-block a {
    color: var(--bkf-yellow) !important;
}

/* ---------- Generic RezMagic dark-theme safety net ----------
   These are intentionally limited to common Bootstrap text helpers
   rather than forcing every SPAN or DIV white. */
.text-default,
.text-body,
.text-secondary,
.control-label,
.form-group > label,
.checkbox label,
.radio label {
    color: var(--bkf-white) !important;
}

/* Muted/help copy should remain visible without competing with labels. */
.help-block,
.text-muted,
.form-text {
    color: var(--bkf-muted) !important;
}

/* ---------- Mobile compatibility ---------- */
@media (max-width: 767px) {
    legend,
    fieldset > legend,
    .section-title,
    .section-header,
    .form-section-title,
    .form-section-header {
        color: var(--bkf-white) !important;
    }

    .form-control[readonly],
    .form-control[disabled],
    fieldset[disabled] .form-control,
    input[readonly],
    input[disabled],
    select[disabled],
    textarea[readonly],
    textarea[disabled] {
        background-color: #0d0d0d !important;
        color: var(--bkf-white) !important;
    }
}

/* ============================================================
   RAFIV2 - RezMagic h3 readability override
   Force all H3 section headers to white on dark backgrounds.
   ============================================================ */
h3,
.h3,
body h3,
.panel h3,
.panel-heading h3,
.panel-title h3,
legend h3,
fieldset h3,
.form-group h3,
.container h3,
.container-fluid h3 {
    color: #ffffff !important;
}

/* ============================================================
   RAFIV3 - Deck map selected-item dialog readability fix
   RezMagic creates the selected cabin/item box as #item-selection.
   Force the dialog and its nested content to the dark event theme.
   ============================================================ */
#item-selection,
#item-selection .selection-title,
#item-selection .item-container,
#item-selection .item-header,
#item-selection .item-price,
#item-selection .selection-action,
#item-selection .item-footer {
    background-color: var(--bkf-black) !important;
    color: var(--bkf-white) !important;
}

#item-selection {
    border-color: rgba(255,255,255,.35) !important;
}

#item-selection .item-container,
#item-selection .item-header,
#item-selection .item-price,
#item-selection .selection-action,
#item-selection .item-footer {
    border-color: var(--bkf-border) !important;
}

#item-selection h1,
#item-selection h2,
#item-selection h3,
#item-selection h4,
#item-selection h5,
#item-selection h6,
#item-selection p,
#item-selection span:not(.ui-icon),
#item-selection div,
#item-selection strong,
#item-selection label {
    color: var(--bkf-white) !important;
}

/* Keep the RezMagic deselect/close icon visible. */
#item-selection .ui-icon-close {
    filter: invert(1);
}

/* Preserve branded action button styling inside this dialog. */
#item-selection .btn,
#item-selection button,
#item-selection input[type="submit"],
#item-selection input[type="button"] {
    background-color: var(--bkf-yellow) !important;
    border-color: var(--bkf-yellow) !important;
    color: var(--bkf-black) !important;
}

/* ============================================================
   RAFIV4 - RezMagic datepicker readability fix
   Keep the dark event theme while making Month / Year controls
   readable inside the light jQuery UI calendar popup.
   ============================================================ */

/* Datepicker month/year header controls */
.ui-datepicker .ui-datepicker-title,
.ui-datepicker .ui-datepicker-title select,
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    color: #ffffff !important;
    background-color: #111111 !important;
}

/* Ensure options remain readable when the browser opens a native select list */
.ui-datepicker select.ui-datepicker-month option,
.ui-datepicker select.ui-datepicker-year option {
    color: #ffffff !important;
    background-color: #111111 !important;
}

/* Calendar navigation arrows/icons */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    color: #ffffff !important;
}