/* ============================================================
   EasyBooking Fee Calculator — calculator.css
   Brand palette: deep charcoal + emerald green (Irish feel)
   No external dependencies.
   ============================================================ */

/* ── Custom Properties ──────────────────────────────────────── */
.ebi-calculator {
	--ebi-bg:            #0d1117;
	--ebi-surface:       #161b22;
	--ebi-surface-2:     #1c2333;
	--ebi-border:        rgba(255,255,255,.08);
	--ebi-border-hover:  rgba(255,255,255,.18);

	--ebi-green:         #10b981;   /* Emerald — primary accent   */
	--ebi-green-dark:    #059669;
	--ebi-green-glow:    rgba(16,185,129,.25);
	--ebi-teal:          #06b6d4;   /* Cyan — secondary           */
	--ebi-orange:        #f59e0b;   /* Amber — commission warning */
	--ebi-red:           #ef4444;   /* Danger highlight           */

	--ebi-text:          #e2e8f0;
	--ebi-text-muted:    #8b97a8;
	--ebi-text-dim:      #4a5568;

	--ebi-radius-sm:     8px;
	--ebi-radius:        16px;
	--ebi-radius-lg:     24px;
	--ebi-radius-pill:   9999px;

	--ebi-shadow:        0 8px 32px rgba(0,0,0,.5);
	--ebi-shadow-glow:   0 0 40px rgba(16,185,129,.15);

	--ebi-transition:    all .25s cubic-bezier(.4,0,.2,1);

	/* Import Google Font inline via @import inside the rule is not valid —
	   the @import is at the top of the file below. */
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Google Font ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── Root Reset (scoped) ─────────────────────────────────────── */
.ebi-calculator *,
.ebi-calculator *::before,
.ebi-calculator *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ── Outer Wrapper ───────────────────────────────────────────── */
.ebi-calculator {
	background: var(--ebi-bg);
	border-radius: var(--ebi-radius-lg);
	overflow: hidden;
	max-width: 780px;
	margin: 2rem auto;
	box-shadow: var(--ebi-shadow), var(--ebi-shadow-glow);
	border: 1px solid var(--ebi-border);
	color: var(--ebi-text);
	position: relative;
}

/* Subtle radial glow behind header */
.ebi-calculator::before {
	content: '';
	position: absolute;
	top: -120px;
	left: 50%;
	transform: translateX(-50%);
	width: 600px;
	height: 400px;
	background: radial-gradient(ellipse at center, rgba(16,185,129,.12) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

/* ── Header ──────────────────────────────────────────────────── */
.ebi-header {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 3rem 2rem 2rem;
	background: linear-gradient(180deg, rgba(16,185,129,.06) 0%, transparent 100%);
	border-bottom: 1px solid var(--ebi-border);
}

.ebi-header-badge {
	display: inline-block;
	background: rgba(16,185,129,.15);
	color: var(--ebi-green);
	border: 1px solid rgba(16,185,129,.3);
	border-radius: var(--ebi-radius-pill);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .35rem 1rem;
	margin-bottom: 1.25rem;
}

.ebi-title {
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
	margin-bottom: .75rem;
}

.ebi-title-highlight {
	display: block;
	background: linear-gradient(135deg, var(--ebi-green) 0%, var(--ebi-teal) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.ebi-subtitle {
	font-size: 1rem;
	color: var(--ebi-text-muted);
	max-width: 480px;
	margin: 0 auto;
	line-height: 1.6;
}

/* ── Form Shell ──────────────────────────────────────────────── */
.ebi-form {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

/* ── Field Group ─────────────────────────────────────────────── */
.ebi-field-group {
	background: var(--ebi-surface);
	border: 1px solid var(--ebi-border);
	border-radius: var(--ebi-radius);
	padding: 1.5rem;
	transition: var(--ebi-transition);
}

.ebi-field-group:focus-within {
	border-color: rgba(16,185,129,.4);
	box-shadow: 0 0 0 3px rgba(16,185,129,.08);
}

/* ── Label ───────────────────────────────────────────────────── */
.ebi-label {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: .95rem;
	font-weight: 600;
	color: var(--ebi-text);
	margin-bottom: 1rem;
	cursor: default;
}

.ebi-step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-width: 28px;
	background: linear-gradient(135deg, var(--ebi-green) 0%, var(--ebi-teal) 100%);
	border-radius: 50%;
	font-size: .8rem;
	font-weight: 800;
	color: #fff;
	flex-shrink: 0;
}

/* ── Select ──────────────────────────────────────────────────── */
.ebi-select-wrapper {
	position: relative;
}

.ebi-select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background: var(--ebi-surface-2);
	color: var(--ebi-text);
	border: 1px solid var(--ebi-border);
	border-radius: var(--ebi-radius-sm);
	padding: .85rem 3rem .85rem 1rem;
	font-size: .95rem;
	font-family: inherit;
	cursor: pointer;
	transition: var(--ebi-transition);
	outline: none;
}

.ebi-select:hover,
.ebi-select:focus {
	border-color: var(--ebi-green);
	background: #1e2a35;
}

.ebi-select option {
	background: #1c2333;
	color: var(--ebi-text);
}

.ebi-select-arrow {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ebi-text-muted);
	pointer-events: none;
	font-size: .85rem;
}

/* ── Platform Info Badges ────────────────────────────────────── */
.ebi-platform-info {
	margin-top: .85rem;
}

.ebi-platform-badges {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.ebi-badge {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .78rem;
	font-weight: 600;
	padding: .3rem .75rem;
	border-radius: var(--ebi-radius-pill);
}

.ebi-badge--commission {
	background: rgba(239,68,68,.12);
	color: #f87171;
	border: 1px solid rgba(239,68,68,.25);
}

.ebi-badge--subscription {
	background: rgba(245,158,11,.1);
	color: #fbbf24;
	border: 1px solid rgba(245,158,11,.2);
}

.ebi-badge--no-commission {
	background: rgba(16,185,129,.1);
	color: var(--ebi-green);
	border: 1px solid rgba(16,185,129,.2);
}

/* ── Revenue Input ───────────────────────────────────────────── */
.ebi-input-prefix-wrapper {
	display: flex;
	align-items: center;
	background: var(--ebi-surface-2);
	border: 1px solid var(--ebi-border);
	border-radius: var(--ebi-radius-sm);
	overflow: hidden;
	margin-bottom: 1rem;
	transition: var(--ebi-transition);
}

.ebi-input-prefix-wrapper:focus-within {
	border-color: var(--ebi-green);
}

.ebi-prefix {
	padding: .85rem 1rem;
	background: rgba(16,185,129,.1);
	color: var(--ebi-green);
	font-weight: 700;
	font-size: 1.1rem;
	border-right: 1px solid var(--ebi-border);
	user-select: none;
}

.ebi-input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	color: var(--ebi-text);
	font-size: 1.05rem;
	font-weight: 600;
	font-family: inherit;
	padding: .85rem 1rem;
}

.ebi-input::-webkit-outer-spin-button,
.ebi-input::-webkit-inner-spin-button {
	opacity: .4;
}

/* ── Slider ──────────────────────────────────────────────────── */
.ebi-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: var(--ebi-surface-2);
	outline: none;
	cursor: pointer;
	accent-color: var(--ebi-green);
	transition: var(--ebi-transition);
}

.ebi-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ebi-green) 0%, var(--ebi-teal) 100%);
	border: 3px solid var(--ebi-bg);
	box-shadow: 0 0 0 2px var(--ebi-green), 0 4px 12px rgba(16,185,129,.4);
	cursor: pointer;
	transition: var(--ebi-transition);
}

.ebi-slider::-webkit-slider-thumb:hover {
	transform: scale(1.15);
	box-shadow: 0 0 0 3px var(--ebi-green), 0 6px 18px rgba(16,185,129,.5);
}

.ebi-slider::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ebi-green) 0%, var(--ebi-teal) 100%);
	border: 3px solid var(--ebi-bg);
	cursor: pointer;
}

.ebi-slider-labels {
	display: flex;
	justify-content: space-between;
	margin-top: .5rem;
	font-size: .75rem;
	color: var(--ebi-text-muted);
}

/* ── Percentage Display ──────────────────────────────────────── */
.ebi-percentage-display {
	text-align: center;
	margin-bottom: 1rem;
	line-height: 1;
}

.ebi-percentage-display span:first-child {
	font-size: 3rem;
	font-weight: 900;
	background: linear-gradient(135deg, var(--ebi-green) 0%, var(--ebi-teal) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	transition: var(--ebi-transition);
}

.ebi-pct-sign {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ebi-text-muted) !important;
	-webkit-text-fill-color: var(--ebi-text-muted) !important;
}

/* ── Calculate Button ────────────────────────────────────────── */
.ebi-btn-calculate {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	width: 100%;
	padding: 1.1rem 2rem;
	background: linear-gradient(135deg, var(--ebi-green) 0%, var(--ebi-teal) 100%);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	font-family: inherit;
	border: none;
	border-radius: var(--ebi-radius);
	cursor: pointer;
	transition: var(--ebi-transition);
	position: relative;
	overflow: hidden;
	letter-spacing: .01em;
	box-shadow: 0 4px 20px rgba(16,185,129,.35);
}

.ebi-btn-calculate::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
	opacity: 0;
	transition: opacity .2s;
}

.ebi-btn-calculate:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(16,185,129,.5);
}

.ebi-btn-calculate:hover::before { opacity: 1; }
.ebi-btn-calculate:active { transform: translateY(0); }

/* Shake animation for validation error */
@keyframes ebi-shake {
	0%,100% { transform: translateX(0); }
	20%      { transform: translateX(-8px); }
	40%      { transform: translateX(8px); }
	60%      { transform: translateX(-5px); }
	80%      { transform: translateX(5px); }
}
.ebi-shake { animation: ebi-shake .5s ease-in-out; }

/* ── Results Panel ───────────────────────────────────────────── */
.ebi-results {
	border-top: 1px solid var(--ebi-border);
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .4s ease, transform .4s ease;
}

.ebi-results:not([hidden]) {
	display: block;
}

.ebi-results--visible {
	opacity: 1;
	transform: translateY(0);
}

/* ── Hero Number ─────────────────────────────────────────────── */
.ebi-result-hero {
	text-align: center;
	padding: 3rem 2rem 2rem;
	background: linear-gradient(180deg, rgba(239,68,68,.06) 0%, transparent 100%);
	border-bottom: 1px solid var(--ebi-border);
}

.ebi-result-label {
	font-size: .9rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--ebi-text-muted);
	margin-bottom: .5rem;
}

.ebi-result-amount {
	font-size: clamp(3.5rem, 10vw, 6rem);
	font-weight: 900;
	line-height: 1;
	background: linear-gradient(135deg, #ef4444 0%, #f59e0b 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin: .25rem 0;
	letter-spacing: -.02em;
}

.ebi-result-sublabel {
	font-size: 1rem;
	color: var(--ebi-text-muted);
	margin-top: .5rem;
}

.ebi-result-sublabel strong {
	color: var(--ebi-text);
}

/* ── Breakdown ───────────────────────────────────────────────── */
.ebi-breakdown,
.ebi-chart-section {
	padding: 2rem;
	border-bottom: 1px solid var(--ebi-border);
}

.ebi-section-title {
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--ebi-text-muted);
	margin-bottom: 1.25rem;
}

.ebi-breakdown-grid {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.ebi-breakdown-item {
	display: flex;
	align-items: center;
	gap: .85rem;
	background: var(--ebi-surface);
	border: 1px solid var(--ebi-border);
	border-radius: var(--ebi-radius-sm);
	padding: .85rem 1rem;
	transition: var(--ebi-transition);
}

.ebi-breakdown-item:hover {
	border-color: var(--ebi-border-hover);
}

.ebi-breakdown-item--easybooking {
	border-color: rgba(16,185,129,.2);
	background: rgba(16,185,129,.05);
}

.ebi-dot {
	width: 12px;
	height: 12px;
	min-width: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}

.ebi-dot--subscription { background: var(--ebi-orange); }
.ebi-dot--commission   { background: var(--ebi-red); }
.ebi-dot--easybooking  { background: var(--ebi-green); }

.ebi-breakdown-label {
	flex: 1;
	font-size: .9rem;
	color: var(--ebi-text-muted);
}

.ebi-breakdown-value {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ebi-text);
}

.ebi-green { color: var(--ebi-green) !important; }

/* ── Bar Chart ───────────────────────────────────────────────── */
.ebi-chart {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 3rem;
	height: 240px;
	padding: 0 1rem;
}

.ebi-bar-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 120px;
	height: 100%;
}

.ebi-bar-track {
	flex: 1;
	width: 64px;
	display: flex;
	align-items: flex-end;
	border-radius: var(--ebi-radius-sm) var(--ebi-radius-sm) 0 0;
	overflow: hidden;
}

.ebi-bar-stack {
	width: 100%;
	display: flex;
	flex-direction: column-reverse; /* commission on top */
	overflow: hidden;
	border-radius: var(--ebi-radius-sm) var(--ebi-radius-sm) 0 0;
}

.ebi-bar {
	width: 100%;
	height: 0;
	transition: height .8s cubic-bezier(.34,1.56,.64,1);
	min-height: 0;
}

.ebi-bar--subscription {
	background: linear-gradient(0deg, var(--ebi-orange) 0%, #fbbf24 100%);
}

.ebi-bar--commission {
	background: linear-gradient(0deg, #dc2626 0%, #ef4444 100%);
}

.ebi-bar--easybooking {
	background: linear-gradient(0deg, var(--ebi-green-dark) 0%, var(--ebi-green) 100%);
	border-radius: var(--ebi-radius-sm) var(--ebi-radius-sm) 0 0;
}

.ebi-bar-value {
	font-size: .85rem;
	font-weight: 700;
	color: var(--ebi-text);
	margin-top: .5rem;
}

.ebi-bar-name {
	font-size: .78rem;
	color: var(--ebi-text-muted);
	margin-top: .2rem;
	text-align: center;
}

/* Legend */
.ebi-chart-legend {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin-top: 1.25rem;
	flex-wrap: wrap;
}

.ebi-legend-item {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .78rem;
	color: var(--ebi-text-muted);
}

.ebi-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 2px;
}

/* ── CTA Block ───────────────────────────────────────────────── */
.ebi-cta {
	padding: 2.5rem 2rem;
	text-align: center;
	background: linear-gradient(180deg, transparent 0%, rgba(16,185,129,.04) 100%);
}

.ebi-cta-saving-pill {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	background: rgba(16,185,129,.1);
	border: 1px solid rgba(16,185,129,.25);
	border-radius: var(--ebi-radius);
	padding: 1rem 1.75rem;
	margin-bottom: 1.75rem;
	text-align: left;
}

.ebi-cta-saving-icon {
	font-size: 2rem;
	line-height: 1;
}

.ebi-cta-saving-label {
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ebi-text-muted);
	margin-bottom: .15rem;
}

.ebi-cta-saving-amount {
	font-size: 2rem;
	font-weight: 900;
	color: var(--ebi-green);
	line-height: 1;
}

.ebi-cta-message {
	font-size: 1.05rem;
	color: var(--ebi-text);
	line-height: 1.7;
	margin-bottom: 1.75rem;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}

.ebi-cta-message strong {
	color: #fff;
}

/* ── CTA Button ──────────────────────────────────────────────── */
.ebi-btn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	padding: 1.1rem 2.5rem;
	background: linear-gradient(135deg, var(--ebi-green) 0%, var(--ebi-teal) 100%);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	font-family: inherit;
	border-radius: var(--ebi-radius-pill);
	text-decoration: none;
	transition: var(--ebi-transition);
	box-shadow: 0 4px 20px rgba(16,185,129,.35);
	position: relative;
	overflow: hidden;
}

.ebi-btn-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);
	opacity: 0;
	transition: opacity .2s;
}

.ebi-btn-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(16,185,129,.5);
	color: #fff;
	text-decoration: none;
}

.ebi-btn-cta:hover::before { opacity: 1; }

.ebi-btn-arrow {
	display: inline-block;
	transition: transform .25s ease;
}

.ebi-btn-cta:hover .ebi-btn-arrow {
	transform: translateX(4px);
}

.ebi-cta-disclaimer {
	margin-top: 1rem;
	font-size: .8rem;
	color: var(--ebi-text-dim);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
	.ebi-form,
	.ebi-breakdown,
	.ebi-chart-section,
	.ebi-cta {
		padding: 1.5rem;
	}

	.ebi-header {
		padding: 2rem 1.5rem 1.5rem;
	}

	.ebi-chart {
		gap: 1.5rem;
		height: 180px;
	}

	.ebi-bar-track {
		width: 50px;
	}

	.ebi-bar-group {
		width: 80px;
	}

	.ebi-cta-saving-pill {
		flex-direction: column;
		text-align: center;
	}
}

@media (max-width: 400px) {
	.ebi-title { font-size: 1.4rem; }
	.ebi-result-amount { font-size: 3rem; }
}