/* =====================================================================
   Headshot Calculator — Deposit Booking Page  (v5.5.3)
   All colours driven by CSS variables set on .hsc2-bp-wrap.
   PHP sets the defaults; Elementor widget overrides per-instance
   via {{WRAPPER}} .hsc2-bp-wrap selectors (higher specificity).
   ===================================================================== */

/* ── CSS variable defaults (overridden by PHP inline block & Elementor) ── */
.hsc2-bp-wrap {
	--bp-accent:      #C8A96D;
	--bp-dark:        #1C1C1A;
	--bp-bg:          #f4f4f4;
	--bp-card-bg:     #ffffff;
	--bp-text:        #1C1C1A;
	--bp-label:       #666666;
	--bp-border:      #d0d0d0;
	--bp-field-bg:    #fafafa;
	--bp-header-text: #ffffff;
	--bp-header-sub:  rgba(255,255,255,0.70);
	--bp-max-width:   680px;
	--bp-card-radius: 8px;
	--bp-card-shadow: 0 1px 4px rgba(0,0,0,0.07);
	--bp-btn-radius:  6px;
	--bp-font:        'Roboto', Arial, sans-serif;
	--bp-font-size:   15px;
}

/* ── Wrapper ── */
.hsc2-bp-wrap {
	max-width:   var(--bp-max-width);
	margin:      0 auto;
	padding:     0 16px 48px;
	font-family: var(--bp-font);
	font-size:   var(--bp-font-size);
	color:       var(--bp-text);
	box-sizing:  border-box;
}
.hsc2-bp-wrap *, .hsc2-bp-wrap *::before, .hsc2-bp-wrap *::after {
	box-sizing: inherit;
}

/* ── Header ── */
.hsc2-bp-header {
	background:    var(--bp-header-bg, var(--bp-dark));
	border-radius: var(--bp-card-radius) var(--bp-card-radius) 0 0;
	padding:       32px 36px;
}
.hsc2-bp-brand {
	margin:         0 0 4px;
	font-size:      var(--bp-brand-size, 11px);
	font-weight:    700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color:          var(--bp-brand-color, var(--bp-accent));
}
.hsc2-bp-header h1 {
	margin:      0 0 6px;
	font-size:   var(--bp-title-size, 26px);
	font-weight: 700;
	line-height: 1.2;
	color:       var(--bp-header-text);
}
.hsc2-bp-header p {
	margin:    0;
	font-size: var(--bp-sub-size, 14px);
	color:     var(--bp-header-sub);
}

/* ── Body ── */
.hsc2-bp-body {
	background:     var(--bp-bg);
	border-radius:  0 0 var(--bp-card-radius) var(--bp-card-radius);
	padding:        20px;
	display:        flex;
	flex-direction: column;
	gap:            16px;
}

/* ── Card ── */
.hsc2-bp-card {
	background:    var(--bp-card-bg);
	border-radius: var(--bp-card-radius);
	padding:       28px 28px 32px;
	box-shadow:    var(--bp-card-shadow);
}
.hsc2-bp-card-title {
	margin:         0 0 20px;
	font-size:      16px;
	font-weight:    700;
	letter-spacing: 0.02em;
	color:          var(--bp-dark);
}

/* ── Summary grid ── */
.hsc2-bp-summary-grid {
	display:        flex;
	flex-direction: column;
}
.hsc2-bp-summary-row {
	display:         flex;
	justify-content: space-between;
	align-items:     baseline;
	padding:         9px 0;
	border-bottom:   1px solid var(--bp-border);
	gap:             12px;
}
.hsc2-bp-summary-row:last-child { border-bottom: none; }
.hsc2-bp-summary-label {
	font-size: 13px;
	color:     var(--bp-label);
	min-width: 120px;
}
.hsc2-bp-summary-value {
	font-size:   14px;
	font-weight: 600;
	color:       var(--bp-text);
	text-align:  right;
}
.hsc2-bp-total-row {
	padding-top:   12px;
	margin-top:    4px;
	border-top:    2px solid var(--bp-dark) !important;
	border-bottom: none !important;
}
.hsc2-bp-total-row .hsc2-bp-summary-label { font-weight: 700; }
.hsc2-bp-total-val {
	font-size:   20px;
	font-weight: 700;
	color:       var(--bp-accent) !important;
}

/* ── Discounted total row (v5.5.41) ── */
.hsc2-bp-discounted-total-row {
	border-bottom: none !important;
	padding:       4px 0 2px !important;
}
.hsc2-bp-discounted-val {
	font-size:   20px;
	font-weight: 700;
	color:       var(--bp-accent) !important;
}

/* ── Urgency savings row (v5.5.33) ── */
.hsc2-bp-savings-row {
	border-bottom: none !important;
	padding:       6px 0 !important;
}
.hsc2-bp-savings-text {
	font-size:   14px;
	font-weight: 600;
	color:       var(--bp-accent);
}

/* ── Form fields ── */
.hsc2-bp-field-row { margin-bottom: 20px; }
.hsc2-bp-field-row:last-of-type { margin-bottom: 0; }
.hsc2-bp-field-row > label {
	display:       block;
	font-size:     13px;
	font-weight:   600;
	color:         var(--bp-text);
	margin-bottom: 6px;
}
.hsc2-bp-req     { color: #e74c3c; }
.hsc2-bp-optional { font-weight: 400; color: #999; font-size: 12px; }

.hsc2-bp-field-row input[type="text"],
.hsc2-bp-field-row textarea {
	width:         100%;
	padding:       11px 14px;
	border:        1px solid var(--bp-border);
	border-radius: 6px;
	font-size:     14px;
	font-family:   inherit;
	color:         var(--bp-text);
	background:    var(--bp-field-bg);
	transition:    border-color 0.15s;
	outline:       none;
	resize:        vertical;
}
.hsc2-bp-field-row input[type="text"]:focus,
.hsc2-bp-field-row textarea:focus {
	border-color: var(--bp-dark);
	background:   #fff;
}

/* ── Date picker ── */
.hsc2-bp-date-wrap { position: relative; }
.hsc2-bp-date-wrap input[type="text"] {
	cursor:        pointer;
	padding-right: 40px;
}
.hsc2-bp-cal-icon {
	position:       absolute;
	right:          12px;
	top:            50%;
	transform:      translateY(-50%);
	font-size:      16px;
	pointer-events: none;
	opacity:        0.5;
}

/* ── Time slot pills ── */
.hsc2-bp-time-options { display: flex; gap: 12px; flex-wrap: wrap; }
.hsc2-bp-time-opt { cursor: pointer; margin: 0; font-weight: 400 !important; }
.hsc2-bp-time-opt input[type="radio"] { display: none; }
.hsc2-bp-time-pill {
	display:        inline-block;
	padding:        10px 28px;
	border:         2px solid var(--bp-border);
	border-radius:  30px;
	font-size:      14px;
	font-weight:    600;
	color:          var(--bp-label);
	background:     var(--bp-field-bg);
	transition:     background 0.15s, border-color 0.15s, color 0.15s;
	user-select:    none;
}
.hsc2-bp-time-opt input:checked + .hsc2-bp-time-pill {
	background:   var(--bp-dark);
	border-color: var(--bp-dark);
	color:        var(--bp-accent);
}
.hsc2-bp-time-opt:hover .hsc2-bp-time-pill { border-color: var(--bp-dark); }

/* ── Square card container ── */
#hsc2-bp-card-container {
	min-height:    90px;
	border:        1px solid var(--bp-border);
	border-radius: 6px;
	padding:       12px;
	background:    var(--bp-field-bg);
}

/* ── Submit button ── */
.hsc2-bp-btn {
	display:        block;
	width:          100%;
	padding:        16px 24px;
	margin-top:     24px;
	border:         none;
	border-radius:  var(--bp-btn-radius);
	font-size:      16px;
	font-weight:    700;
	font-family:    inherit;
	background:     var(--bp-dark);
	color:          var(--bp-accent);
	cursor:         pointer;
	transition:     opacity 0.15s, transform 0.1s;
	letter-spacing: 0.01em;
}
.hsc2-bp-btn:hover:not(:disabled)  { opacity: 0.88; }
.hsc2-bp-btn:active:not(:disabled) { transform: scale(0.99); }
.hsc2-bp-btn:disabled              { opacity: 0.45; cursor: not-allowed; }
.hsc2-bp-btn.hsc2-bp-loading       { opacity: 0.65; pointer-events: none; }

/* ── Notices ── */
.hsc2-bp-notice        { padding: 12px 16px; border-radius: 6px; font-size: 13px; margin-top: 12px; }
.hsc2-bp-warn          { background: #fff8e1; color: #7a5f00; }
.hsc2-bp-error-notice  { background: #fdecea; color: #b00020; }
.hsc2-bp-field-error   { margin-top: 6px; font-size: 12px; color: #b00020; }

/* ── Success state ── */
.hsc2-bp-success             { text-align: center; padding: 20px 0 8px; }
.hsc2-bp-success-icon        { font-size: 48px; margin-bottom: 12px; line-height: 1; color: var(--bp-accent); }
.hsc2-bp-success h2          { margin: 0 0 10px; font-size: 22px; font-weight: 700; color: var(--bp-dark); }
.hsc2-bp-success p           { margin: 0 0 8px; font-size: 15px; color: var(--bp-label); line-height: 1.6; }

/* ── Full-page error / already-used states ── */
.hsc2-bp-error,
.hsc2-bp-wrap > .hsc2-bp-success {
	background:    var(--bp-card-bg);
	border-radius: var(--bp-card-radius);
	padding:       40px 28px;
	text-align:    center;
	box-shadow:    var(--bp-card-shadow);
}
.hsc2-bp-error p { color: #b00020; font-size: 15px; margin: 0; }

/* ── Team sign-up block (shown in success state when Phase 2 is active) ── */
#hsc2-bp-team-link {
	background:    var(--bp-bg);
	border-radius: var(--bp-card-radius);
	text-align:    left;
}
#hsc2-bp-team-link p { color: var(--bp-label); }
#hsc2-bp-team-url    { color: var(--bp-dark); font-size: 13px; word-break: break-all; }

/* ── Flatpickr overrides ── */
.hsc2-bp-wrap .flatpickr-calendar { font-family: var(--bp-font); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.14); }