/* =============================================================================
   CurrentCost Budget Calculator — Front-end styles
   All visual tokens are CSS custom properties. Override them via:
     • The global Appearance tab in Settings → CurrentCost
     • The Gutenberg block sidebar (per-instance)
     • Shortcode attributes (per-instance)
     • Your theme stylesheet targeting .currentcost-calculator
   ============================================================================= */

/* --------------------------------------------------------------------------
   Ensure the HTML `hidden` attribute is respected even when a CSS rule
   sets an explicit display value (e.g. display:flex on .cc-loading).
   -------------------------------------------------------------------------- */
.currentcost-calculator [hidden] {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Token defaults
   Three categories:
     1. Colour tokens  — override via block sidebar or shortcode
     2. Shape tokens   — border-radius, font, font-size
     3. Depth tokens   — shadows and transition speed
        Set --cc-shadow-sm/--cc-shadow to "none" for a flat aesthetic.
   -------------------------------------------------------------------------- */
.currentcost-calculator {
	/* Colours */
	--cc-primary:     #2563eb;
	--cc-primary-hover: color-mix(in srgb, var(--cc-primary) 82%, #000);
	--cc-secondary:   #059669;
	--cc-bg:          #ffffff;
	--cc-surface:     #f8fafc;
	--cc-text:        #1e293b;
	--cc-muted:       #64748b;
	--cc-border:      #e2e8f0;
	--cc-btn:         #2563eb;
	--cc-btn-hover:   color-mix(in srgb, var(--cc-btn) 82%, #000);
	--cc-btn-text:    #ffffff;
	--cc-savings:     #059669;

	/* Shape */
	--cc-radius:      8px;
	--cc-font:        inherit;
	--cc-font-size:   1rem;

	/* Depth — set to "none" for flat/borderless look */
	--cc-shadow-sm:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	--cc-shadow:      0 4px 12px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);

	/* Motion — set to "0s" to disable all transitions */
	--cc-transition:  150ms ease;

	font-family:  var(--cc-font);
	font-size:    var(--cc-font-size);
	color:        var(--cc-text);
	background:   var(--cc-bg);
	max-width:    720px;
	margin:       0 auto 2.5rem;
	padding:      0;
	box-sizing:   border-box;
	line-height:  1.5;
}

.currentcost-calculator *,
.currentcost-calculator *::before,
.currentcost-calculator *::after {
	box-sizing: inherit;
}

/* --------------------------------------------------------------------------
   Title
   -------------------------------------------------------------------------- */
.cc-tool-title {
	font-size:   calc(var(--cc-font-size) * 1.625);
	font-weight: 700;
	color:       var(--cc-text);
	margin:      0 0 1.5rem;
	padding:     0;
	border:      none;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

/* Brand signature: short primary→secondary gradient tick under the title
   (mirrors the card-title tick in the admin design language) */
.cc-tool-title::after {
	content:       "";
	display:       block;
	width:         3.5rem;
	height:        4px;
	margin-top:    0.625rem;
	border-radius: 999px;
	background:    var(--cc-primary); /* fallback */
	background:    linear-gradient(90deg, var(--cc-primary), var(--cc-secondary));
}

.cc-tool-description {
	font-size:   calc(var(--cc-font-size) * 1.0625);
	color:       var(--cc-muted);
	margin:      -0.875rem 0 1.5rem;
	line-height: 1.6;
}

.cc-member-note {
	margin:    0.625rem 0 0;
	font-size: calc(var(--cc-font-size) * 0.875);
	color:     var(--cc-muted);
}
.cc-member-note a {
	color: var(--cc-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cc-hotel-nights-list {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
	margin:    0;
	padding:   0;
	list-style:none;
}

.cc-hotel-night-option {
	display:        flex;
	align-items:    center;
	gap:            6px;
	padding:        7px 14px;
	border:         1px solid var(--cc-border);
	border-radius:  999px;
	cursor:         pointer;
	font-size:      calc(var(--cc-font-size) * 0.9375);
	color:          var(--cc-text);
	background:     var(--cc-surface);
	transition:     border-color var(--cc-transition), background var(--cc-transition), color var(--cc-transition);
	user-select:    none;
}

.cc-hotel-night-option:hover {
	border-color: var(--cc-primary);
}

.cc-hotel-night-option input[type="checkbox"] {
	accent-color: var(--cc-primary);
	width:  15px;
	height: 15px;
	flex-shrink: 0;
	cursor: pointer;
}

.cc-hotel-night-option:has(input:checked) {
	border-color: var(--cc-primary);
	background:   color-mix(in srgb, var(--cc-primary) 8%, transparent);
	background:   #eff6ff; /* fallback */
	background:   color-mix(in srgb, var(--cc-primary) 8%, transparent);
}

/* --------------------------------------------------------------------------
   Member group rates info panel — appears under Membership Status
   -------------------------------------------------------------------------- */
.cc-group-rates {
	margin-top:    0.875rem;
	margin-left:   2.25rem;
	padding:       0.75rem 1rem;
	background:    color-mix(in srgb, var(--cc-primary) 5%, transparent);
	border:        1px solid color-mix(in srgb, var(--cc-primary) 18%, transparent);
	border-radius: calc(var(--cc-radius) - 2px);
	font-size:     calc(var(--cc-font-size) * 0.8125);
}

.cc-group-rates__heading {
	margin:      0 0 0.5rem;
	font-weight: 600;
	color:       var(--cc-text);
}

.cc-group-rates__list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        0.3125rem;
}

.cc-group-rate-item {
	color:      var(--cc-muted);
	padding:    0.125rem 0 0.125rem 1rem;
	position:   relative;
	transition: color var(--cc-transition), font-weight var(--cc-transition);
}

.cc-group-rate-item::before {
	content:  "–";
	position: absolute;
	left:     0;
	color:    var(--cc-border);
}

.cc-group-rate--active {
	color:       var(--cc-primary);
	font-weight: 600;
}

.cc-group-rate--active::before {
	content: "✓";
	color:   var(--cc-primary);
}

.cc-flight-note {
	margin:      0 0 0.875rem;
	font-size:   calc(var(--cc-font-size) * 0.875);
	color:       var(--cc-muted);
	line-height: 1.6;
}

.cc-row-note {
	display:     block;
	font-size:   calc(var(--cc-font-size) * 0.8125);
	font-weight: normal;
	color:       var(--cc-muted);
	line-height: 1.5;
	margin-top:  0.25rem;
}

/* --------------------------------------------------------------------------
   Step cards — a guided "journey" treatment: each numbered milestone gets a
   halo ring and a fading connector rail, and the step's controls indent to
   align under the question text rather than the numeral.
   -------------------------------------------------------------------------- */
.cc-step {
	position:      relative;
	background:    var(--cc-bg);
	border-radius: var(--cc-radius);
	box-shadow:    var(--cc-shadow-sm);
	padding:       1.25rem 1.5rem 1.375rem;
	margin:        0 0 0.875rem;
	min-width:     0;
	border:        1px solid var(--cc-border);
}

/* Connector rail: drops from the numeral and fades toward the card bottom */
.cc-step::before {
	content:       "";
	position:      absolute;
	left:          calc(1.5rem + 0.875rem - 1px); /* card padding + half numeral */
	top:           3.5rem;
	bottom:        1.375rem;
	width:         2px;
	border-radius: 2px;
	background:    var(--cc-border); /* fallback */
	background:    linear-gradient(180deg,
	                   color-mix(in srgb, var(--cc-primary) 28%, transparent),
	                   transparent);
	pointer-events: none;
}

/* Controls sit in the indented column to the right of the rail */
.cc-step > :not(legend) {
	margin-left: 2.25rem;
}

.cc-step-label {
	display:     flex;
	align-items: center;
	gap:         0.5rem;
	font-size:   calc(var(--cc-font-size) * 1);
	font-weight: 600;
	color:       var(--cc-text);
	margin:      0 0 0.875rem;
	padding:     0;
	border:      none;
	float:       none;
	width:       100%;
	letter-spacing: -0.005em;
}

.cc-step-num {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           1.75rem;
	height:          1.75rem;
	border-radius:   50%;
	background:      var(--cc-primary);
	color:           var(--cc-btn-text);
	font-size:       calc(var(--cc-font-size) * 0.75);
	font-weight:     700;
	flex-shrink:     0;
	line-height:     1;
	box-shadow:      0 0 0 4px rgba(37,99,235,.12); /* fallback */
	box-shadow:      0 0 0 4px color-mix(in srgb, var(--cc-primary) 12%, transparent);
}

/* --------------------------------------------------------------------------
   Attendee stepper — pill track with floating round buttons, echoing the
   chip language of the flight-range options
   -------------------------------------------------------------------------- */
.cc-stepper {
	display:       flex;
	align-items:   center;
	width:         fit-content;
	border:        1.5px solid var(--cc-border);
	border-radius: 999px;
	background:    var(--cc-surface);
	padding:       3px;
	gap:           2px;
}

.cc-stepper-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           2.5rem;
	height:          2.5rem;
	border:          none;
	border-radius:   999px;
	background:      var(--cc-bg);
	box-shadow:      var(--cc-shadow-sm);
	color:           var(--cc-muted);
	font-size:       calc(var(--cc-font-size) * 1.25);
	line-height:     1;
	cursor:          pointer;
	transition:      background var(--cc-transition), color var(--cc-transition),
	                 box-shadow var(--cc-transition);
	flex-shrink:     0;
	font-family:     var(--cc-font);
}

.cc-stepper-btn:hover,
.cc-stepper-btn:focus-visible {
	background: var(--cc-primary-hover);
	color:      var(--cc-btn-text);
	outline:    none;
}

.cc-stepper-btn:disabled {
	opacity:    0.35;
	cursor:     not-allowed;
	box-shadow: none;
}

.cc-attendees {
	width:       3.25rem;
	height:      2.5rem;
	border:      none;
	text-align:  center;
	font-size:   calc(var(--cc-font-size) * 1.375);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color:       var(--cc-text);
	background:  transparent;
	appearance:  textfield;
	-moz-appearance: textfield;
	font-family: var(--cc-font);
	padding:     0;
}

.cc-attendees::-webkit-inner-spin-button,
.cc-attendees::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* --------------------------------------------------------------------------
   Member / Non-member segmented control
   The active pill slides into place with its own background + shadow.
   -------------------------------------------------------------------------- */
.cc-toggle-group {
	display:       inline-flex;
	border:        1.5px solid var(--cc-border);
	border-radius: var(--cc-radius);
	padding:       3px;
	gap:           3px;
	background:    var(--cc-surface);
	width:         fit-content;
}

.cc-toggle-option {
	position: relative;
	cursor:   pointer;
	flex:     1 1 auto;
}

.cc-toggle-option input[type="radio"] {
	position: absolute;
	opacity:  0;
	width:    0;
	height:   0;
}

.cc-toggle-option span {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	padding:         0.5rem 1.375rem;
	background:      transparent;
	color:           var(--cc-muted);
	font-size:       calc(var(--cc-font-size) * 0.875);
	font-weight:     500;
	border-radius:   calc(var(--cc-radius) - 3px);
	transition:      background var(--cc-transition), color var(--cc-transition), box-shadow var(--cc-transition);
	white-space:     nowrap;
	text-align:      center;
	user-select:     none;
}

/* Checkmark drawn in CSS — grows in on selection. Besides feeling tactile,
   it means selection is not communicated by colour alone (WCAG 1.4.1). */
.cc-toggle-option span::before,
.cc-flight-option span::before {
	content:      "";
	width:        0;
	height:       0.6em;
	border:       solid currentColor;
	border-width: 0 2px 2px 0;
	transform:    rotate(45deg);
	opacity:      0;
	flex-shrink:  0;
	position:     relative;
	top:          -0.0625em;
	transition:   width var(--cc-transition), opacity var(--cc-transition),
	              margin var(--cc-transition);
}

.cc-toggle-option input:checked + span::before,
.cc-flight-option input:checked + span::before {
	width:        0.4em;
	opacity:      1;
	margin-right: 0.5em;
}

.cc-toggle-option input:checked + span {
	background:  var(--cc-primary);
	color:       var(--cc-btn-text);
	font-weight: 600;
	box-shadow:  0 1px 4px rgba(0,0,0,.18);
}

.cc-toggle-option:hover input:not(:checked) + span {
	color:      var(--cc-text);
	background: color-mix(in srgb, var(--cc-primary) 8%, transparent);
}

.cc-toggle-option:hover input:checked + span {
	background: var(--cc-primary-hover);
}

.cc-toggle-option input:focus-visible + span {
	outline:        2px solid var(--cc-primary);
	outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Flight range pills — fully rounded chips
   -------------------------------------------------------------------------- */
.cc-flight-options {
	display:   flex;
	flex-wrap: wrap;
	gap:       0.5rem;
}

.cc-flight-option {
	position: relative;
	cursor:   pointer;
}

.cc-flight-option input[type="radio"] {
	position: absolute;
	opacity:  0;
	width:    0;
	height:   0;
}

.cc-flight-option span {
	display:       inline-flex;
	align-items:   center;
	padding:       0.5rem 1.0625rem;
	border:        1.5px solid var(--cc-border);
	border-radius: 999px;
	background:    var(--cc-bg);
	color:         var(--cc-muted);
	font-size:     calc(var(--cc-font-size) * 0.875);
	font-weight:   500;
	transition:    border-color var(--cc-transition), background var(--cc-transition),
	               color var(--cc-transition), box-shadow var(--cc-transition);
	white-space:   nowrap;
	user-select:   none;
}

.cc-flight-option input:checked + span {
	background:   var(--cc-primary);
	border-color: var(--cc-primary);
	color:        var(--cc-btn-text);
	font-weight:  600;
	box-shadow:   0 2px 8px -2px rgba(37,99,235,.45); /* fallback */
	box-shadow:   0 2px 8px -2px color-mix(in srgb, var(--cc-primary) 50%, transparent);
}

.cc-flight-option:hover span {
	border-color: var(--cc-primary-hover);
	color:        var(--cc-text);
}

.cc-flight-option input:checked:hover + span {
	background:   var(--cc-primary-hover);
	border-color: var(--cc-primary-hover);
	color:        var(--cc-btn-text); /* keep checked text colour on hover */
}

.cc-flight-option input:focus-visible + span {
	outline:        2px solid var(--cc-primary);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Calculate button — full width, prominent
   -------------------------------------------------------------------------- */
.cc-calculate-wrap {
	margin: 1.5rem 0 0;
}

.cc-calculate-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	padding:         0.9375rem 1.5rem;
	background:      var(--cc-btn);
	color:           var(--cc-btn-text);
	border:          none;
	border-radius:   var(--cc-radius);
	font-size:       calc(var(--cc-font-size) * 1);
	font-weight:     600;
	letter-spacing:  0.01em;
	cursor:          pointer;
	transition:      background var(--cc-transition), opacity var(--cc-transition),
	                 transform 0.1s, box-shadow var(--cc-transition);
	font-family:     var(--cc-font);
}

.cc-calculate-btn:hover {
	background: var(--cc-btn-hover);
	transform:  translateY(-1px);
	box-shadow: 0 8px 20px -6px rgba(37,99,235,.5); /* fallback */
	box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--cc-btn) 55%, transparent);
}

.cc-calculate-btn:active {
	transform:  translateY(0) scale(0.99);
	box-shadow: none;
}

.cc-calculate-btn:focus-visible {
	outline:        2px solid var(--cc-primary);
	outline-offset: 3px;
}

.cc-calculate-btn:disabled {
	opacity: 0.55;
	cursor:  not-allowed;
}

/* --------------------------------------------------------------------------
   Loading indicator
   -------------------------------------------------------------------------- */
.cc-loading {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             0.5rem;
	padding:         1.25rem;
	color:           var(--cc-muted);
	font-size:       calc(var(--cc-font-size) * 0.875);
}

.cc-spinner {
	display:          inline-block;
	width:            1rem;
	height:           1rem;
	border:           2px solid var(--cc-border);
	border-top-color: var(--cc-primary);
	border-radius:    50%;
	animation:        cc-spin 0.7s linear infinite;
	flex-shrink:      0;
}

@keyframes cc-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Results panel — shadow-based card, slide-in on first reveal
   -------------------------------------------------------------------------- */
.cc-results {
	margin-top:    1.5rem;
	border-radius: var(--cc-radius);
	box-shadow:    var(--cc-shadow);
	overflow:      hidden;
	border:        1px solid var(--cc-border);
	animation:     cc-results-in 0.3s ease both;
}

@keyframes cc-results-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0);    }
}

.cc-results-title {
	margin:      0;
	padding:     1rem 1.5rem;
	font-size:   calc(var(--cc-font-size) * 1);
	font-weight: 700;
	background:  var(--cc-primary); /* fallback */
	background:  linear-gradient(120deg,
	                 var(--cc-primary),
	                 color-mix(in srgb, var(--cc-primary) 68%, var(--cc-secondary)));
	color:       var(--cc-btn-text);
	line-height: 1.3;
	letter-spacing: 0.01em;
}

/* Choreographed reveal: rows fade in top-to-bottom when results first open.
   Opacity-only (no transforms) so table layout is never disturbed. */
.cc-results-table tbody tr,
.cc-results-table tfoot tr {
	animation: cc-row-in 0.35s ease both;
}

@keyframes cc-row-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.cc-results-table tbody tr:nth-child(1) { animation-delay: 60ms;  }
.cc-results-table tbody tr:nth-child(2) { animation-delay: 110ms; }
.cc-results-table tbody tr:nth-child(3) { animation-delay: 160ms; }
.cc-results-table tbody tr:nth-child(4) { animation-delay: 210ms; }
.cc-results-table tfoot tr:nth-child(1) { animation-delay: 280ms; }
.cc-results-table tfoot tr:nth-child(2) { animation-delay: 340ms; }
.cc-results-table tfoot tr:nth-child(3) { animation-delay: 420ms; }

/* --------------------------------------------------------------------------
   Results table — currency values right-aligned
   -------------------------------------------------------------------------- */
.cc-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cc-table-wrap:focus-visible {
	outline:        2px solid var(--cc-primary);
	outline-offset: -2px;
}

.cc-results-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       calc(var(--cc-font-size) * 0.875);
}

/* Column headers */
.cc-results-table thead tr {
	background: var(--cc-surface);
}

.cc-results-table thead th {
	padding:        0.625rem 1.5rem;
	font-size:      calc(var(--cc-font-size) * 0.6875);
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color:          var(--cc-muted);
	white-space:    nowrap;
	text-align:     left;
	border-bottom:  1px solid var(--cc-border);
}

/* Right-align value column headers */
.cc-results-table thead th:not(:first-child) {
	text-align: right;
}

/* Row label cells */
.cc-results-table tbody th,
.cc-results-table tfoot th {
	padding:     0.75rem 1.5rem;
	font-weight: 500;
	color:       var(--cc-text);
	text-align:  left;
	border-bottom: 1px solid var(--cc-border);
}

/* Value cells — right-aligned tabular numbers */
.cc-val {
	padding:              0.75rem 1.5rem;
	font-variant-numeric: tabular-nums;
	font-weight:          500;
	white-space:          nowrap;
	text-align:           right;
	border-bottom:        1px solid var(--cc-border);
}

/* Subtotals */
.cc-subtotal-row th,
.cc-subtotal-row .cc-val {
	background:   var(--cc-surface);
	font-weight:  600;
	border-top:   2px solid var(--cc-border);
	border-bottom: 1px solid var(--cc-border);
}

/* Group total — the headline number of the whole tool */
.cc-total-row th,
.cc-total-row .cc-val {
	background:    var(--cc-surface);
	font-weight:   700;
	font-size:     calc(var(--cc-font-size) * 0.9375);
	border-top:    3px solid var(--cc-primary);
	border-bottom: none;
	padding-top:   1rem;
}

.cc-total-row .cc-val {
	font-size:      calc(var(--cc-font-size) * 1.125);
	font-weight:    800;
	letter-spacing: -0.01em;
	color:          var(--cc-primary);
}

/* --------------------------------------------------------------------------
   Savings callout row — bolder treatment so it reads as a highlight
   -------------------------------------------------------------------------- */
.cc-savings-row th,
.cc-savings-row td {
	background:    #f0fdf4; /* fallback for browsers without color-mix() */
	background:    color-mix(in srgb, var(--cc-savings) 10%, transparent);
	border-top:    2px solid var(--cc-savings);
	border-bottom: none;
	padding-top:   0.875rem;
	padding-bottom:0.875rem;
}

.cc-savings-row .cc-val {
	font-weight: 700;
}

.cc-savings-row .cc-val-savings {
	display:     flex;
	align-items: center;
	justify-content: flex-end;
	gap:         0.375rem;
}

.cc-savings-amount {
	font-size:      calc(var(--cc-font-size) * 1.125);
	font-weight:    800;
	letter-spacing: -0.01em;
	color:          var(--cc-savings);
}

.cc-savings-text {
	font-size:   calc(var(--cc-font-size) * 0.75);
	font-weight: 500;
	color:       var(--cc-savings);
	opacity:     0.75;
}

.cc-savings-icon {
	font-size:      calc(var(--cc-font-size) * 0.5);
	color:          var(--cc-savings);
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Promo column — controlled by .cc-has-promo on the wrapper
   -------------------------------------------------------------------------- */
.currentcost-calculator:not(.cc-has-promo) .cc-promo-col {
	display: none;
}

/* Promo nudge under the attendee step — same .cc-has-promo gate */
.cc-promo-notice {
	display:       flex;
	align-items:   flex-start;
	gap:           0.5rem;
	margin:        0.75rem 0 0;
	padding:       0.625rem 0.875rem;
	font-size:     calc(var(--cc-font-size) * 0.875);
	font-weight:   600;
	line-height:   1.45;
	color:         var(--cc-savings);
	background:    #f0fdf8; /* fallback */
	background:    color-mix(in srgb, var(--cc-savings) 8%, transparent);
	border:        1px solid color-mix(in srgb, var(--cc-savings) 30%, transparent);
	border-radius: calc(var(--cc-radius) * 0.75);
}

.cc-promo-notice svg {
	flex-shrink: 0;
	margin-top:  0.1875rem;
}

.currentcost-calculator:not(.cc-has-promo) .cc-promo-notice {
	display: none;
}

/* Subtle tint on promo data cells */
.cc-results-table tbody .cc-promo-col,
.cc-results-table tfoot .cc-promo-col {
	background: #f0fdf8; /* fallback */
	background: color-mix(in srgb, var(--cc-secondary) 5%, transparent);
}

.cc-results-table thead .cc-promo-col {
	background: #e6f7f1; /* fallback */
	background: color-mix(in srgb, var(--cc-secondary) 12%, var(--cc-surface));
}

/* --------------------------------------------------------------------------
   Meals note
   -------------------------------------------------------------------------- */
.cc-meals-note {
	margin:      0 0 0.875rem;
	font-size:   calc(var(--cc-font-size) * 0.875);
	color:       var(--cc-muted);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Lead capture form + Email estimate form — shared container styles
   -------------------------------------------------------------------------- */
.cc-lead-form,
.cc-email-form {
	padding:    1.25rem 1.375rem 1rem;
	border-top: 1px solid var(--cc-border);
	background: var(--cc-surface);
	animation:  cc-results-in 0.2s ease both;
}

.cc-lead-intro {
	margin:      0 0 1rem;
	font-size:   calc(var(--cc-font-size) * 0.9375);
	font-weight: 600;
	color:       var(--cc-text);
}

.cc-lead-fields {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   0.75rem 1rem;
	margin-bottom:         1rem;
}

.cc-lead-field {
	display:        flex;
	flex-direction: column;
	gap:            0.3125rem;
}

/* Third field (org) spans full width */
.cc-lead-field:nth-child(3) {
	grid-column: 1 / -1;
}

.cc-lead-field label {
	font-size:   calc(var(--cc-font-size) * 0.8125);
	font-weight: 600;
	color:       var(--cc-text);
}

.cc-required {
	color:       #dc2626;
	margin-left: 2px;
}

.cc-lead-field input {
	padding:       0.625rem 0.875rem;
	border:        1.5px solid var(--cc-border);
	border-radius: calc( var(--cc-radius) - 2px );
	background:    var(--cc-bg);
	color:         var(--cc-text);
	font-size:     calc(var(--cc-font-size) * 0.875);
	font-family:   var(--cc-font);
	transition:    border-color var(--cc-transition), box-shadow var(--cc-transition);
	width:         100%;
}

.cc-lead-field input:focus {
	outline:      none;
	border-color: var(--cc-primary);
	box-shadow:   0 0 0 3px rgba(37,99,235,.12); /* fallback */
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--cc-primary) 15%, transparent);
}

.cc-lead-field input.cc-input-error {
	border-color: #dc2626;
}

.cc-field-error {
	font-size:  calc(var(--cc-font-size) * 0.75);
	color:      #dc2626;
	font-weight:500;
}

.cc-lead-privacy {
	margin:    0 0 0.875rem;
	font-size: calc(var(--cc-font-size) * 0.75);
	color:     var(--cc-muted);
	line-height: 1.5;
}

.cc-lead-actions {
	display:     flex;
	align-items: center;
	gap:         0.875rem;
}

.cc-btn-lead-submit {
	display:         inline-flex;
	align-items:     center;
	gap:             0.375rem;
	padding:         0.7rem 1.125rem;
	background:      var(--cc-btn);
	color:           var(--cc-btn-text);
	border:          none;
	border-radius:   var(--cc-radius);
	font-size:       calc(var(--cc-font-size) * 0.9375);
	font-weight:     600;
	cursor:          pointer;
	transition:      background var(--cc-transition), opacity var(--cc-transition);
	font-family:     var(--cc-font);
}

.cc-btn-lead-submit:hover   { background: var(--cc-btn-hover); }
.cc-btn-lead-submit:disabled {
	opacity: 0.55;
	cursor:  wait;
}

.cc-btn-lead-submit:focus-visible,
.cc-btn-lead-cancel:focus-visible {
	outline:        2px solid var(--cc-primary);
	outline-offset: 2px;
}

.cc-btn-lead-cancel {
	display:       inline-flex;
	align-items:   center;
	padding:       0.5625rem 1.125rem;
	background:    transparent;
	color:         var(--cc-muted);
	border:        1.5px solid var(--cc-border);
	border-radius: var(--cc-radius);
	font-size:     calc(var(--cc-font-size) * 0.9375);
	font-weight:   500;
	cursor:        pointer;
	font-family:   var(--cc-font);
	transition:    border-color var(--cc-transition), color var(--cc-transition),
	               background var(--cc-transition);
}

.cc-btn-lead-cancel:hover {
	border-color: var(--cc-muted);
	color:        var(--cc-text);
	background:   color-mix(in srgb, var(--cc-muted) 6%, transparent);
}

/* --------------------------------------------------------------------------
   Email estimate — trigger button & status message
   -------------------------------------------------------------------------- */
.cc-btn-email-trigger {
	display:         inline-flex;
	align-items:     center;
	gap:             0.375rem;
	padding:         0.5625rem 1.125rem;
	background:      transparent;
	color:           var(--cc-btn);
	border:          1.5px solid var(--cc-btn);
	border-radius:   var(--cc-radius);
	font-size:       calc(var(--cc-font-size) * 0.8125);
	font-weight:     600;
	cursor:          pointer;
	transition:      background var(--cc-transition), color var(--cc-transition),
	                 border-color var(--cc-transition);
	font-family:     var(--cc-font);
	letter-spacing:  0.01em;
}

.cc-btn-email-trigger:hover {
	background:   var(--cc-btn-hover);
	border-color: var(--cc-btn-hover);
	color:        var(--cc-btn-text);
}

.cc-btn-email-trigger:focus-visible {
	outline:        2px solid var(--cc-primary);
	outline-offset: 2px;
}

/* Single-column layout for the email form */
.cc-email-fields {
	grid-template-columns: 1fr !important;
}

.cc-email-status {
	padding:       0.625rem 0.875rem;
	border-radius: calc( var(--cc-radius) - 2px );
	font-size:     calc(var(--cc-font-size) * 0.875);
	font-weight:   500;
	margin-bottom: 0.75rem;
}

.cc-email-status.cc-status-success {
	background: #f0fdf4;
	color:      #166534;
	border:     1px solid #bbf7d0;
}

.cc-email-status.cc-status-error {
	background: #fef2f2;
	color:      #991b1b;
	border:     1px solid #fecaca;
}

/* --------------------------------------------------------------------------
   PDF / print action bar
   -------------------------------------------------------------------------- */
.cc-pdf-actions {
	padding:    0.875rem 1.375rem;
	background: var(--cc-surface);
	border-top: 1px solid var(--cc-border);
	display:    flex;
	gap:        0.625rem;
	flex-wrap:  wrap;
	align-items: center;
}

.cc-btn-pdf {
	display:         inline-flex;
	align-items:     center;
	gap:             0.375rem;
	padding:         0.7rem 1.125rem;
	background:      var(--cc-btn);
	color:           var(--cc-btn-text);
	border:          none;
	border-radius:   var(--cc-radius);
	font-size:       calc(var(--cc-font-size) * 0.8125);
	font-weight:     600;
	cursor:          pointer;
	transition:      background var(--cc-transition), opacity var(--cc-transition);
	font-family:     var(--cc-font);
	letter-spacing:  0.01em;
}

.cc-btn-pdf:hover { background: var(--cc-btn-hover); }

.cc-btn-pdf:focus-visible {
	outline:        2px solid var(--cc-primary);
	outline-offset: 2px;
}

.cc-btn-pdf:disabled {
	opacity: 0.55;
	cursor:  wait;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 540px) {
	.cc-tool-title {
		font-size: calc(var(--cc-font-size) * 1.375);
	}

	.cc-step {
		padding: 1rem 1.125rem 1.125rem;
	}

	/* Narrow screens: drop the rail + indent so controls use the full width */
	.cc-step::before {
		display: none;
	}

	.cc-step > :not(legend) {
		margin-left: 0;
	}

	.cc-flight-options {
		gap: 0.4rem;
	}

	.cc-flight-option span {
		padding: 0.375rem 0.875rem;
		font-size: calc(var(--cc-font-size) * 0.8125);
	}

	.cc-toggle-group {
		width: 100%;
	}

	.cc-toggle-option span {
		padding: 0.4375rem 1rem;
	}

	.cc-results-table thead th,
	.cc-results-table tbody th,
	.cc-results-table tfoot th,
	.cc-val {
		padding: 0.5625rem 0.875rem;
		font-size: calc(var(--cc-font-size) * 0.8125);
	}

	.cc-savings-amount {
		font-size: calc(var(--cc-font-size) * 0.9375);
	}
}

/* --------------------------------------------------------------------------
   Print styles
   -------------------------------------------------------------------------- */
@media print {
	.cc-step,
	.cc-calculate-wrap,
	.cc-loading,
	.cc-pdf-actions {
		display: none !important;
	}

	.cc-results {
		box-shadow: none;
		border:     1px solid #ccc;
	}

	.cc-results-table tbody th,
	.cc-results-table tfoot th,
	.cc-val {
		border: 1px solid #ccc !important;
	}
}

/* --------------------------------------------------------------------------
   Calculation error message
   -------------------------------------------------------------------------- */
.cc-calc-error {
	margin:        0.875rem 0 0;
	padding:       0.625rem 0.875rem;
	border-radius: calc( var(--cc-radius) - 2px );
	font-size:     calc(var(--cc-font-size) * 0.875);
	font-weight:   500;
	font-family:   var(--cc-font);
	background:    #fef2f2;
	color:         #991b1b;
	border:        1px solid #fecaca;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.currentcost-calculator,
	.currentcost-calculator * {
		transition-duration: 0.01ms !important;
		animation-duration:  0.01ms !important;
	}
}