/**
 * Day 2: Kompa Tuesdays RSVP Form Styles
 */

.gf-bottle-summary {
    background-color: #f0f8ff;
    border: 1px solid #87ceeb;
    border-radius: 4px;
    padding: 10px;
    min-height: 80px;
    font-size: 13px;
}

/* Running total styling */
input[name*="running_total"] {
    font-weight: bold;
    font-size: 18px;
    color: #2c3e50;
    background-color: #ecf0f1;
    padding: 8px 12px;
    border-radius: 4px;
}

/* Time picker (flatpickr) - matches the RSVP form's dark theme */
.kompa-time-picker-input {
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.flatpickr-calendar {
    background: #1a1a2e;
    border: 1px solid #3d5afe;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
    border-bottom-color: #1a1a2e;
}

.flatpickr-time {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
    color: #ffffff;
    background: transparent;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
    background: rgba(61, 90, 254, 0.2);
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: #ffffff;
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: #ffffff;
}

.flatpickr-time .flatpickr-time-separator {
    color: #ffffff;
}

/* Auto-populated by the calculator - not editable by the visitor */
.kompa-bottle-summary textarea[readonly],
.kompa-running-total input[readonly] {
    background-color: #f4f4f4;
    cursor: default;
}

/* Sub-labels (Name's First/Last, Phone's Country/Phone Number) render in GF's
   default muted grey, which is hard to read against the dark form background -
   match them to the main field label color for visibility. */
.gform-field-label--type-sub {
    color: #ffffff !important;
}

/* Multi-page step indicator ("Step 1 of 4 - Personal Information") - same
   low-contrast grey issue as the sub-labels above. The "Step"/"of" text itself
   belongs to the parent title element, not just the number/name spans. */
.gf_progressbar_title,
.gf_step_current_page,
.gf_step_page_count,
.gf_step_page_name {
    color: #ffffff !important;
}

/* Field disclaimer text (e.g. dinner/bottle service policy notes on the
   selection page) - same low-contrast grey issue as the labels above. */
.gfield_description {
    color: #ffffff !important;
}

/* Bottle quantity stepper - shown next to a bottle choice once it's checked */
.kompa-bottle-qty {
    width: 48px;
    margin-left: 10px;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: #1a1a2e;
    color: #ffffff;
    vertical-align: middle;
}

/* Read-only "Review Your Information" summary on the confirmation page,
   built from GF's {all_fields} merge tag - match the dark form theme. */
.kompa-confirmation-summary-field .gfield_html {
    color: #ffffff;
}

.kompa-confirmation-summary h3 {
    color: #ffffff;
    margin-top: 0;
}

.kompa-confirmation-summary table {
    width: 100%;
    border-collapse: collapse;
}

.kompa-confirmation-summary table td {
    color: #ffffff;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Bottle service menu image under "Add Bottle Service?" */
.kompa-bottle-menu-link {
    margin-top: 8px;
}

.kompa-bottle-menu-thumb {
    height: auto;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Mobile optimization */
@media (max-width: 768px) {
    .gf-bottle-summary {
        font-size: 12px;
        padding: 10px;
    }
    
    input[name*="running_total"] {
        font-size: 16px;
    }
}