/*
 * ivein-main.css
 * iVein brand theme  –  main colour #2aabe3, transparent background
 * Applied when a service is booked via /book/{serviceCode}
 */

/* ?? CSS custom properties ????????????????????????????????????????????? */
:root {
    --brand-primary:      #2aabe3;
    --brand-primary-dark: #1a8fc2;
    --brand-primary-glow: rgba(42, 171, 227, 0.35);
    --brand-primary-bg:   rgba(42, 171, 227, 0.08);
    --brand-bg:           transparent;
}

/* ?? Base ?????????????????????????????????????????????????????????????? */
body {
    background: var(--brand-bg) !important;
}

/* ?? Header ???????????????????????????????????????????????????????????? */
.booking-header {
    background: rgba(255, 255, 255, 0.80);
    border-bottom: 1px solid rgba(42, 171, 227, 0.15);
}

.ivein-logo-text .tagline {
    color: var(--brand-primary);
}

.header-call svg {
    color: var(--brand-primary);
}

/* ?? Accent colour overrides ??????????????????????????????????????????? */
.section-header svg {
    color: var(--brand-primary);
}

.form-control-booking:focus {
    border-color: var(--brand-primary);
}

/* ?? Service cards ????????????????????????????????????????????????????? */
.service-card:hover {
    border-color: var(--brand-primary);
    background: var(--brand-primary-bg);
    box-shadow: 0 0 0 1px rgba(42, 171, 227, 0.20);
}

.service-card.selected {
    border-color: var(--brand-primary);
    background: var(--brand-primary-bg);
    box-shadow: 0 0 0 2px rgba(42, 171, 227, 0.25);
}

.service-card .check-badge {
    background: var(--brand-primary);
}

.service-btn {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.service-card.selected .service-btn {
    background: var(--brand-primary);
    color: #fff;
}

/* ?? Summary price ????????????????????????????????????????????????????? */
.summary-item .price {
    color: var(--brand-primary);
}

/* ?? Continue / CTA button ????????????????????????????????????????????? */
.btn-continue {
    background: var(--brand-primary);
}

.btn-continue:hover {
    background: var(--brand-primary-dark);
    box-shadow: 0 4px 18px var(--brand-primary-glow);
}

.btn-continue:disabled {
    background: rgba(42, 171, 227, 0.35);
}

/* ?? Misc ?????????????????????????????????????????????????????????????? */
.service-icon-img {
    border: 1px solid rgba(42, 171, 227, 0.20);
    background: rgba(255, 255, 255, 0.70);
}