﻿/*
 * ivein-gold.css
 * iVein-One Gold theme  –  main colour #d1b472, transparent background
 * Applied when booking via /book/IVEIN_PREMIUM
 */

/* ── CSS custom properties ───────────────────────────────────────────── */
:root {
    --brand-primary:      #d1b472;
    --brand-primary-dark: #b8953a;
    --brand-primary-glow: rgba(209, 180, 114, 0.90);
    --brand-primary-bg:   rgba(209, 180, 114, 0.08);
    --brand-bg:           transparent;
}

/* ── Base ────────────────────────────────────────────────────────────── */
body {
    background: var(--brand-bg) !important;
}

/* ── All cards white ─────────────────────────────────────────────────── */
.booking-card,
.booking-summary-bar {
    background: #ffffff !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ── Section header icons → gold ─────────────────────────────────────── */
.section-header svg {
    color: var(--brand-primary) !important;
}

/* ── Input focus border → gold ───────────────────────────────────────── */
.form-control-booking:focus {
    border-color: var(--brand-primary) !important;
}

/* ── Service icon – clean, no bg/border ─────────────────────────────── */
.service-icon-img {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* ── Service card default ────────────────────────────────────────────── */
.service-card {
    background: #ffffff !important;
    border: 1.5px solid #e5e9f2 !important;
}

/* ── Service card hover ──────────────────────────────────────────────── */
.service-card:hover {
    border-color: var(--brand-primary) !important;
    background: var(--brand-primary-bg) !important;
    box-shadow: 0 0 0 1px rgba(209, 180, 114, 0.25) !important;
}

/* ── Service card SELECTED – full gold fill ──────────────────────────── */
.service-card.selected {
    border: none !important;
    background: var(--brand-primary) !important;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.20) !important;
}

/* ── Text inside selected card → BLACK ───────────────────────────────── */
.service-card.selected .service-name,
.service-card.selected .service-desc,
.service-card.selected .service-price {
    color: #171717 !important;
}

/* ── Check badge → near-black ────────────────────────────────────────── */
.service-card .check-badge {
    background: #171717 !important;
}

/* ── Select button default → gold outline ───────────────────────────── */
.service-btn {
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
    background: transparent !important;
}

/* ── Select button when selected → black fill, white text ───────────── */
.service-card.selected .service-btn {
    background: #171717 !important;
    color: #ffffff !important;
    border: none !important;
}

/* ── Summary price → gold ────────────────────────────────────────────── */
.summary-item .price {
    color: var(--brand-primary) !important;
}

/* ── Continue / CTA button → gold bg, BLACK text ────────────────────── */
.btn-continue {
    background: var(--brand-primary) !important;
    color: #171717 !important;
}

.btn-continue:hover {
    background: var(--brand-primary-dark) !important;
    box-shadow: 0 4px 18px var(--brand-primary-glow) !important;
    color: #171717 !important;
}

.btn-continue:disabled {
    background: rgba(209, 180, 114, 0.35) !important;
    color: #171717 !important;
}

/* ── Trust badges ────────────────────────────────────────────────────── */
.trust-badge {
    color: #6b7280 !important;
}

.trust-badge svg {
    color: #9ca3af !important;
}
