/* Brand variables */
:root {
    --bcb-primary: #0094D9;
    --bcb-primary-dark: #0077AE;
    --bcb-success: #3BB44A;
    --bcb-success-dark: #2F963B;
    --bcb-white: #ffffff;
    --bcb-warning-bg: #fff8e6;
    --bcb-warning-border: #f4c542;
    --bcb-warning-text: #7a5200;
    --bcb-gray-50: #f8fafc;
    --bcb-gray-100: #eef2f5;
    --bcb-gray-200: #dce5ea;
    --bcb-gray-300: #c8d3da;
    --bcb-gray-500: #667780;
    --bcb-gray-700: #31424c;
    --bcb-gray-800: #1e3038;
    --bcb-gray-900: #102027;
    --bcb-shadow-sm: 0 1px 2px rgba(16, 32, 39, 0.06);
    --bcb-shadow: 0 8px 24px rgba(16, 32, 39, 0.08);
    --bcb-shadow-lg: 0 16px 40px rgba(16, 32, 39, 0.10);
    --bcb-radius: 10px;
    --bcb-radius-lg: 14px;
    --bcb-radius-xl: 18px;
    --bcb-container-max: 1170px;
}

/* Base layout */
.bcb-flow-selector,
.bcb-booking-form {
    width: 100%;
    max-width: var(--bcb-container-max);
    margin: 24px auto;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--bcb-gray-800);
}

.bcb-flow-selector *,
.bcb-booking-form * {
    box-sizing: border-box;
}

.bcb-flow-selector {
    padding: 0;
}

.bcb-booking-form {
    padding: 28px;
    background: var(--bcb-white);
    border-radius: var(--bcb-radius-xl);
    box-shadow: var(--bcb-shadow);
    border: 1px solid var(--bcb-gray-200);
}

.bcb-title {
    text-align: left;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.12;
    margin: 0 0 22px;
    color: var(--bcb-gray-900);
    font-weight: 750;
}

/* Flow cards */
.bcb-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    width: 100%;
}

.bcb-card {
    width: 100%;
    min-width: 0;
    background: var(--bcb-white);
    border-radius: var(--bcb-radius-xl);
    padding: 26px;
    box-shadow: var(--bcb-shadow);
    border: 1px solid var(--bcb-gray-200);
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bcb-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--bcb-shadow-lg);
    border-color: rgba(0, 148, 217, 0.35);
}

.bcb-card-highlight {
    border: 2px solid var(--bcb-primary);
}

.bcb-badge {
    position: absolute;
    top: -12px;
    left: 26px;
    background: var(--bcb-primary);
    color: var(--bcb-white);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.bcb-card-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 16px;
    background: rgba(0, 148, 217, 0.08);
    border-radius: 16px;
}

.bcb-card h3 {
    font-size: 24px;
    line-height: 1.2;
    margin: 0 0 8px;
    color: var(--bcb-gray-900);
}

.bcb-card-desc {
    color: var(--bcb-gray-500);
    margin: 0 0 18px;
    line-height: 1.5;
    max-width: 520px;
}

.bcb-features {
    list-style: none;
    padding: 0;
    margin: 18px 0 22px;
    display: grid;
    gap: 8px;
}

.bcb-features li {
    color: var(--bcb-gray-700);
}

/* Form header */
.bcb-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.bcb-form-header h2 {
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.12;
    color: var(--bcb-gray-900);
    margin: 0;
}

.bcb-back-link {
    color: var(--bcb-primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 650;
    white-space: nowrap;
}

.bcb-back-link:hover {
    color: var(--bcb-primary-dark);
}

/* Steps */
.bcb-form {
    display: grid;
    gap: 18px;
}

.bcb-step {
    padding: 22px;
    border: 1px solid var(--bcb-gray-200);
    border-radius: var(--bcb-radius-lg);
    background: var(--bcb-white);
}

.bcb-step h3 {
    margin: 0 0 16px;
    font-size: 18px;
    color: var(--bcb-gray-900);
    font-weight: 750;
}

/* Two-column layout on wider screens where it reduces empty space */
@media (min-width: 900px) {
    .bcb-booking-form[data-flow="one-time"] .bcb-form {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        align-items: start;
    }

    .bcb-booking-form[data-flow="one-time"] .bcb-step[data-step="1"],
    .bcb-booking-form[data-flow="one-time"] .bcb-step[data-step="5"] {
        grid-column: 1;
    }

    .bcb-booking-form[data-flow="one-time"] .bcb-step[data-step="2"],
    .bcb-booking-form[data-flow="one-time"] .bcb-step[data-step="3"],
    .bcb-booking-form[data-flow="one-time"] .bcb-step[data-step="4"] {
        grid-column: 2;
    }

    .bcb-booking-form[data-flow="subscription"] .bcb-form {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        align-items: start;
    }

    .bcb-booking-form[data-flow="subscription"] .bcb-step[data-step="1"] {
        grid-column: 1;
        grid-row: span 3;
    }

    .bcb-booking-form[data-flow="subscription"] .bcb-step[data-step="2"],
    .bcb-booking-form[data-flow="subscription"] .bcb-step[data-step="3"],
    .bcb-booking-form[data-flow="subscription"] .bcb-step[data-step="4"] {
        grid-column: 2;
    }
}

/* Bin rows */
.bcb-bin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--bcb-gray-100);
}

.bcb-bin-row:last-of-type {
    border-bottom: none;
}

.bcb-bin-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.bcb-bin-icon {
    width: 40px;
    height: 40px;
}

.bcb-bin-name {
    font-weight: 700;
    color: var(--bcb-gray-900);
}

/* Quantity controls */
.bcb-quantity-control {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}


/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

.bcb-qty-btn {
    width: 42px;
    height: 42px;
    border-radius: var(--bcb-radius);
    border: 1px solid var(--bcb-gray-300);
    background: var(--bcb-white);
    color: var(--bcb-primary);
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    line-height: 1.5;
}

.bcb-qty-btn:hover {
    background: var(--bcb-primary);
    border-color: var(--bcb-primary);
    color: var(--bcb-white);
}

.bcb-quantity-control input {
    width: 58px;
    text-align: center;
    border: 1px solid var(--bcb-gray-300);
    border-radius: var(--bcb-radius);
    padding: 9px 8px;
    font-size: 18px;
    font-weight: 750;
    background: var(--bcb-gray-50);
    color: var(--bcb-gray-900);
}

/* Frequency row */
.bcb-frequency-row {
    margin: 8px 0 12px 52px;
    padding: 14px;
    background: var(--bcb-gray-50);
    border: 1px solid var(--bcb-gray-200);
    border-radius: var(--bcb-radius);
    display: grid;
    grid-template-columns: 1fr minmax(150px, 190px);
    align-items: center;
    gap: 14px;
}

.bcb-frequency-row.hidden {
    display: none;
}

.bcb-frequency-row label {
    font-weight: 650;
    color: var(--bcb-gray-700);
}

.bcb-frequency-select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--bcb-gray-300);
    border-radius: var(--bcb-radius);
    background: var(--bcb-white);
    font-size: 15px;
    cursor: pointer;
}

/* Form elements */
.bcb-select,
.bcb-input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--bcb-gray-300);
    border-radius: var(--bcb-radius);
    font-size: 16px;
    margin-bottom: 12px;
    background: var(--bcb-white);
    color: var(--bcb-gray-900);
}

.bcb-select:focus,
.bcb-input:focus,
.bcb-frequency-select:focus {
    outline: none;
    border-color: var(--bcb-primary);
    box-shadow: 0 0 0 3px rgba(0, 148, 217, 0.14);
}

.bcb-hint {
    font-size: 14px;
    color: var(--bcb-gray-500);
    margin: 6px 0 0;
    line-height: 1.5;
}

/* Important notice */
.bcb-important-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--bcb-warning-bg);
    border: 1px solid var(--bcb-warning-border);
    border-radius: var(--bcb-radius-lg);
}

.bcb-notice-icon {
    font-size: 22px;
    line-height: 1;
}

.bcb-important-notice p {
    margin: 0;
    color: var(--bcb-warning-text);
    line-height: 1.5;
}

/* Payment options */
.bcb-payment-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.bcb-radio-card {
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    align-items: center;
    padding: 16px;
    border: 2px solid var(--bcb-gray-200);
    border-radius: var(--bcb-radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    background: var(--bcb-white);
}

.bcb-radio-card:hover,
.bcb-radio-card.selected {
    border-color: var(--bcb-primary);
    background: rgba(0, 148, 217, 0.06);
}

.bcb-radio-card input[type="radio"] {
    margin: 0;
    accent-color: var(--bcb-primary);
}

.bcb-radio-label {
    font-weight: 750;
    color: var(--bcb-gray-900);
}

.bcb-radio-price {
    grid-column: 2;
    font-weight: 750;
    color: var(--bcb-primary);
}

.bcb-save-badge {
    border-color: rgba(59, 180, 74, 0.55);
    background: rgba(59, 180, 74, 0.06);
}

.bcb-savings {
    position: absolute;
    top: -10px;
    right: 12px;
    background: var(--bcb-success);
    color: var(--bcb-white);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
}

/* Summary */
.bcb-summary-box {
    background: var(--bcb-gray-50);
    padding: 16px;
    border-radius: var(--bcb-radius-lg);
    border: 1px solid var(--bcb-gray-200);
    margin-bottom: 16px;
}

.bcb-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    color: var(--bcb-gray-700);
}

.bcb-summary-divider {
    border-top: 1px dashed var(--bcb-gray-300);
    margin: 12px 0;
}

.bcb-summary-total {
    font-size: 18px;
    font-weight: 800;
    color: var(--bcb-gray-900);
}

/* Total box */
.bcb-total-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 20px;
    background: linear-gradient(135deg, var(--bcb-primary) 0%, var(--bcb-success) 100%);
    border-radius: var(--bcb-radius-lg);
    margin-bottom: 16px;
}

.bcb-total-label {
    color: var(--bcb-white);
    font-size: 17px;
    font-weight: 700;
}

.bcb-total-amount {
    color: var(--bcb-white);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 850;
    line-height: 1;
}

/* Buttons */
.bcb-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: var(--bcb-radius);
    font-weight: 750;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-size: 16px;
    text-align: center;
    line-height: 1.2;
}

.bcb-card .bcb-btn {
    width: 100%;
}

.bcb-btn-primary {
    background: var(--bcb-primary);
    color: var(--bcb-white);
}

.bcb-btn-primary:hover {
    background: var(--bcb-primary-dark);
    color: var(--bcb-white);
}

.bcb-btn-secondary {
    background: var(--bcb-white);
    color: var(--bcb-primary);
    border: 2px solid var(--bcb-primary);
}

.bcb-btn-secondary:hover {
    background: rgba(0, 148, 217, 0.08);
    color: var(--bcb-primary-dark);
}

.bcb-btn-checkout {
    width: 100%;
    padding: 17px;
    background: var(--bcb-success);
    color: var(--bcb-white);
    font-size: 18px;
}

.bcb-btn-checkout:hover {
    background: var(--bcb-success-dark);
    color: var(--bcb-white);
}

/* Notices */
.bcb-notice {
    padding: 14px 16px;
    margin: 0 0 18px;
    border-radius: var(--bcb-radius);
    background: var(--bcb-warning-bg);
    border: 1px solid var(--bcb-warning-border);
    color: var(--bcb-warning-text);
}

.bcb-error {
    padding: 14px 16px;
    margin: 18px 0;
    border-radius: var(--bcb-radius);
    background: #fff0f0;
    border: 1px solid #d63638;
    color: #8a2424;
}

.bcb-card-disabled {
    opacity: 0.66;
}

.bcb-card-disabled .bcb-btn[disabled] {
    cursor: not-allowed;
}

/* Elementor/content-area compatibility */
.elementor-widget-container .bcb-flow-selector,
.elementor-widget-container .bcb-booking-form,
.elementor-shortcode .bcb-flow-selector,
.elementor-shortcode .bcb-booking-form {
    max-width: 100%;
}

/* Responsive */
@media (max-width: 899px) {
    .bcb-cards,
    .bcb-payment-options {
        grid-template-columns: 1fr;
    }

    .bcb-booking-form {
        padding: 22px;
    }

    .bcb-frequency-row {
        margin-left: 0;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .bcb-flow-selector,
    .bcb-booking-form {
        margin: 16px auto;
    }

    .bcb-booking-form {
        padding: 16px;
        border-radius: 14px;
    }

    .bcb-card,
    .bcb-step {
        padding: 14px;
    }
	
	.bcb-cards.flow-selection {
		flex-direction: column
	}

    .bcb-form-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .bcb-back-link {
        white-space: normal;
    }

    .bcb-bin-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .bcb-quantity-control {
        width: 100%;
    }

    .bcb-quantity-control input {
        flex: 1;
    }

    .bcb-qty-btn {
        width: 46px;
    }

    .bcb-total-box,
    .bcb-summary-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* v9 layout refinements */
.bcb-cards {
    display: flex;
    align-items: stretch;
    gap: 22px;
}

.bcb-card {
    flex: 1 1 0;
}

.bcb-cards.flow-selection .bcb-card{
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

.bcb-card-highlight {
    border: 1px solid var(--bcb-gray-200);
}

.bcb-badge {
    display: none !important;
}

.bcb-form {
    display: flex;
    gap: 22px;
    align-items: flex-start;
}

.bcb-form-main,
.bcb-form-side {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.bcb-form-main {
    flex: 1 1 58%;
}

.bcb-form-side {
    flex: 1 1 42%;
}

.bcb-checkout-card {
    border-color: rgba(0, 148, 217, 0.28);
    box-shadow: var(--bcb-shadow-sm);
}

.bcb-total-box {
    background: var(--bcb-gray-50);
    border: 1px solid var(--bcb-gray-200);
}

.bcb-total-label {
    color: var(--bcb-gray-700);
}

.bcb-total-amount {
    color: var(--bcb-primary);
}

.bcb-summary-total span:last-child,
#bcb-total-price,
#summary-total-today {
    color: var(--bcb-primary);
    font-size: 22px;
    font-weight: 850;
}


/* Inline form validation */
.bcb-form-message {
    width: 100%;
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.45;
}

.bcb-form-message[hidden] {
    display: none !important;
}

.bcb-form-message.is-error {
    color: #7f1d1d;
    background: #fef2f2;
    border: 1px solid #fecaca;
}



@media (min-width: 900px) {
    .bcb-booking-form[data-flow="one-time"] .bcb-form,
    .bcb-booking-form[data-flow="subscription"] .bcb-form {
        display: flex;
        grid-template-columns: none;
        align-items: flex-start;
    }

    .bcb-booking-form[data-flow="one-time"] .bcb-step,
    .bcb-booking-form[data-flow="subscription"] .bcb-step {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

@media (max-width: 899px) {
    .bcb-cards,
    .bcb-form {
        flex-direction: column;
    }
	
	.bcb-cards.flow-selection {
		flex-direction: row
	}
	
    .bcb-form-main,
    .bcb-form-side {
        width: 100%;
    }
}

@media (max-width: 1024px) {
	.bcb-radio-card {
		padding: 16px 10px;
	}
	.bcb-cards.flow-selection {
		gap: 10px;
	}
}

@media (max-width: 500px) {
	.bcb-cards.flow-selection {
		flex-direction: column;
	}
}

@media (max-width: 480px) {
	.bcb-important-notice {
		display: flex;
		align-items: flex-start;
		flex-direction: column
	}
	
	.bcb-card, .bcb-step {
		padding: 12px;
	}
	.bcb-btn-checkout {
		width: 100%;
		padding: 17px;
		background: var(--bcb-success);
		color: var(--bcb-white);
		font-size: 16px;
	}
	
	 .bcb-select.nice-select:after {
		right: 12px;
	}
	
	.bcb-input {
		padding: 6px 12px !important;
	}
	.bcb-select {
		padding: 6px 32px 6px 12px !important
	}
}


/* Keep validation messages from becoming a third flex column */
.bcb-booking-form .bcb-form {
    flex-wrap: wrap;
}

.bcb-booking-form .bcb-form-message:not([hidden]) {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.bcb-booking-form .bcb-form-main,
.bcb-booking-form .bcb-form-side {
    min-width: 0;
}

@media (min-width: 900px) {
    .bcb-booking-form .bcb-form-main {
        flex: 1 1 calc(58% - 11px);
    }

    .bcb-booking-form .bcb-form-side {
        flex: 1 1 calc(42% - 11px);
    }
}