/* Bee Spectrum Bridal Appointment v0.3 — My Account UI */

:root {
	--bsbr-primary: var(--pls-primary-color, #a5804f);
	--bsbr-secondary: var(--pls-secondary-color, #181818);
	--bsbr-border: var(--pls-border-color, #e5e5e5);
	--bsbr-success: #2c8f4a;
	--bsbr-danger: #c03a3a;
	--bsbr-mute: #6a6a6a;
	--bsbr-bg-soft: #fafaf7;
}

/* === Booking layout === */
.bsbr-booking { font-family: inherit; }
.bsbr-booking__head { margin-bottom: 24px; }
.bsbr-booking__title { font-size: 26px; font-weight: 500; margin: 0 0 6px; color: var(--bsbr-secondary); }
.bsbr-booking__desc { color: var(--bsbr-mute); margin: 0; }

/* Randevu bedeli bilgisi — urun modaliyle AYNI gorunum (musteri talebi 2026-07-27). */
.bsbr-booking__fee {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.55;
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--bsbr-primary) 8%, transparent);
}

.bsbr-booking__layout {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 32px;
	align-items: start;
}
@media (max-width: 900px) {
	.bsbr-booking__layout { grid-template-columns: 1fr; gap: 18px; }
}

.bsbr-booking__calendar {
	position: sticky;
	top: 96px;
	background: #fff;
	border: 1px solid var(--bsbr-border);
	border-radius: 12px;
	padding: 22px 18px 18px;
	overflow: hidden; /* Flatpickr taşmasın */
}
@media (max-width: 900px) {
	.bsbr-booking__calendar { position: static; }
}
/* Flatpickr inline — kart genişliğine zorla sığdır */
.bsbr-booking__calendar #bsbr-calendar { width: 100%; }
.bsbr-booking__calendar .flatpickr-calendar.inline {
	box-shadow: none !important;
	border: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	background: transparent !important;
	padding: 0 !important;
}
.bsbr-booking__calendar .flatpickr-innerContainer,
.bsbr-booking__calendar .flatpickr-rContainer { width: 100% !important; }
.bsbr-booking__calendar .flatpickr-days { width: 100% !important; }
.bsbr-booking__calendar .dayContainer {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	gap: 2px;
	padding: 0;
}
.bsbr-booking__calendar .flatpickr-weekdays { width: 100% !important; }
.bsbr-booking__calendar .flatpickr-weekdaycontainer {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	gap: 2px;
}
.bsbr-booking__calendar .flatpickr-weekday {
	background: transparent !important;
	color: var(--bsbr-mute) !important;
	font-weight: 600 !important;
	font-size: 11px !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 0;
}
.bsbr-booking__calendar .flatpickr-day {
	max-width: 100% !important;
	width: auto !important;
	height: 36px !important;
	line-height: 36px !important;
	border-radius: 6px;
	border: 0 !important;
	font-size: 13.5px;
	margin: 0;
}
.bsbr-booking__calendar .flatpickr-day:hover { background: #f5efe4 !important; color: var(--bsbr-secondary) !important; }
.bsbr-booking__calendar .flatpickr-day.selected,
.bsbr-booking__calendar .flatpickr-day.selected:hover {
	background: var(--bsbr-primary) !important;
	border-color: var(--bsbr-primary) !important;
	color: #fff !important;
	font-weight: 600;
}
.bsbr-booking__calendar .flatpickr-day.flatpickr-disabled,
.bsbr-booking__calendar .flatpickr-day.flatpickr-disabled:hover,
.bsbr-booking__calendar .flatpickr-day.prevMonthDay,
.bsbr-booking__calendar .flatpickr-day.nextMonthDay {
	color: #d4d4d4 !important;
	background: transparent !important;
	cursor: not-allowed;
}
/* === Flatpickr month header — CSS Grid: [Mayıs 2026] | [◀] | [▶] ===
   Codex senior pattern: Grid 3 kolon, ay-yıl sola, ok'lar sağa flush. */
.bsbr-booking__calendar .flatpickr-month {
	position: static !important;
	background: transparent !important;
	color: var(--bsbr-secondary) !important;
	height: 40px !important;
	min-height: 40px !important;
	overflow: visible !important;
	padding: 0 !important;
	margin-bottom: 8px !important;
	display: grid !important;
	grid-template-columns: 1fr auto auto !important;
	column-gap: 6px !important;
	align-items: center !important;
}
.bsbr-booking__calendar .flatpickr-current-month {
	position: static !important;
	transform: none !important;
	left: auto !important;
	top: auto !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	padding: 0 !important;
	height: auto !important;
	width: auto !important;
	color: var(--bsbr-secondary) !important;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	grid-column: 1 !important; /* SOL — ay/yıl */
	justify-self: start !important;
}
.bsbr-booking__calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
	font-weight: 600 !important;
	color: var(--bsbr-secondary) !important;
	font-size: 15px !important;
	padding: 2px 4px !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.bsbr-booking__calendar .flatpickr-current-month .numInputWrapper {
	width: 56px !important;
	display: inline-flex !important;
	align-items: center;
}
.bsbr-booking__calendar .flatpickr-current-month input.cur-year {
	font-weight: 600 !important;
	font-size: 15px !important;
	color: var(--bsbr-secondary) !important;
	padding: 0 !important;
	width: 50px !important;
	background: transparent !important;
	border: 0 !important;
	text-align: center;
}
.bsbr-booking__calendar .flatpickr-current-month .arrowUp,
.bsbr-booking__calendar .flatpickr-current-month .arrowDown { display: none !important; }
.bsbr-booking__calendar .flatpickr-prev-month,
.bsbr-booking__calendar .flatpickr-next-month {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	align-self: center !important;
	fill: var(--bsbr-mute) !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	border-radius: 6px;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
}
.bsbr-booking__calendar .flatpickr-prev-month { grid-column: 2 !important; justify-self: end !important; }
.bsbr-booking__calendar .flatpickr-next-month { grid-column: 3 !important; justify-self: end !important; }
/* Order: ◀ (1) Mayıs 2026 (2) ▶ (3) — Mayıs/2026'nın yanlarında */
.bsbr-booking__calendar .flatpickr-prev-month { order: 1; }
.bsbr-booking__calendar .flatpickr-current-month { order: 2; margin: 0 4px; }
.bsbr-booking__calendar .flatpickr-next-month { order: 3; }
.bsbr-booking__calendar .flatpickr-prev-month svg,
.bsbr-booking__calendar .flatpickr-next-month svg {
	width: 14px !important;
	height: 14px !important;
	display: block !important; /* SVG default inline-block + baseline → 4px alt offset; block fix */
	margin: 0 auto !important;
	vertical-align: middle !important;
}
.bsbr-booking__calendar .flatpickr-prev-month:hover,
.bsbr-booking__calendar .flatpickr-next-month:hover {
	background: #f5efe4;
	fill: var(--bsbr-primary) !important;
}
.bsbr-booking__hint { font-size: 12.5px; color: var(--bsbr-mute); margin: 14px 2px 0; line-height: 1.5; }

.bsbr-step-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bsbr-primary);
	margin: 0 0 14px;
}

.bsbr-booking__intro { padding: 24px; background: var(--bsbr-bg-soft); border-radius: 10px; }

/* Summary box */
.bsbr-booking__summary {
	border: 1px solid var(--bsbr-border);
	border-radius: 8px;
	padding: 18px 22px;
	margin-bottom: 18px;
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
}
.bsbr-booking__summary > div { font-size: 14px; }
.bsbr-booking__summary span { color: var(--bsbr-mute); margin-right: 4px; }
.bsbr-booking__summary strong { color: var(--bsbr-secondary); font-weight: 600; }

/* Slot grid */
.bsbr-booking__slots-wrap { margin-bottom: 24px; }
.bsbr-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
}
.bsbr-slot {
	display: block;
	padding: 12px 14px;
	border: 2px solid var(--bsbr-border);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: center;
	position: relative;
}
.bsbr-slot__head { font-size: 11px; color: var(--bsbr-mute); margin-bottom: 4px; letter-spacing: 0.04em; text-transform: uppercase; }
.bsbr-slot__time { font-size: 17px; font-weight: 600; color: var(--bsbr-secondary); }
.bsbr-slot__badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	margin-top: 6px;
	color: #fff;
}
.bsbr-slot.is-available { border-color: var(--bsbr-success); }
.bsbr-slot.is-available:hover { background: var(--bsbr-success); }
.bsbr-slot.is-available:hover .bsbr-slot__time,
.bsbr-slot.is-available:hover .bsbr-slot__head { color: #fff; }
.bsbr-slot.is-available .bsbr-slot__badge { background: var(--bsbr-success); }
.bsbr-slot.is-available.is-selected {
	background: var(--bsbr-secondary);
	border-color: var(--bsbr-secondary);
	color: #fff;
}
.bsbr-slot.is-available.is-selected .bsbr-slot__head,
.bsbr-slot.is-available.is-selected .bsbr-slot__time { color: #fff; }
.bsbr-slot.is-available.is-selected .bsbr-slot__badge { background: var(--bsbr-primary); }
.bsbr-slot.is-booked, .bsbr-slot.is-past {
	border-color: var(--bsbr-danger);
	cursor: not-allowed;
	opacity: 0.55;
}
.bsbr-slot.is-booked .bsbr-slot__badge,
.bsbr-slot.is-past .bsbr-slot__badge { background: var(--bsbr-danger); }
.bsbr-slot.is-past { border-color: #999; opacity: 0.4; }
.bsbr-slot.is-past .bsbr-slot__badge { background: #999; }

/* === State machine — Codex senior pattern ===
   `.is-hidden` ortak gizleme rule'u; `display: flex !important` ile
   visible state default'tur. JS sadece `.is-hidden` toggle eder.
   Sebep: inline `style="display:none"` !important CSS'i tarafından eziliyor;
   class-toggle DOM state'ini semantic + test edilebilir kılar. */
.bsbr-booking .is-hidden { display: none !important; }

/* === Form — uniform vertical rhythm via flex gap === */
.bsbr-booking .bsbr-booking__form,
form.bsbr-booking__form {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	background: #fff;
	border: 1px solid var(--bsbr-border);
	border-radius: 10px;
	padding: 26px 24px 24px;
}

/* Slots-wrap state-machine: tek başlık + placeholder/grid switch.
   Codex senior pattern: hidden HTML attribute ile görünürlük + CSS sadece dekoratif. */
.bsbr-booking .bsbr-booking__slots-wrap {
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
}
.bsbr-booking .bsbr-booking__slots-wrap .bsbr-slots { margin: 0 !important; }
.bsbr-booking .bsbr-booking__slots-wrap .bsbr-step-label { margin: 0 !important; }
.bsbr-slots-placeholder {
	padding: 22px;
	border: 1.5px dashed var(--bsbr-border);
	border-radius: 8px;
	color: var(--bsbr-mute);
	font-size: 14px;
	text-align: center;
	background: var(--bsbr-bg-soft);
}
.bsbr-slots-placeholder p { margin: 0; line-height: 1.5; }

/* hidden attribute global default'unu güçlendir (Modave override'ına karşı) */
.bsbr-booking [hidden] { display: none !important; }

/* === Form-wrap: visible-disabled state ===
   Saat seçilmeden form görünür ama disabled (UX + cache-safe).
   Saat seçilince .is-disabled class kalkar + fieldset.disabled = false. */
.bsbr-booking__form-wrap {
	position: relative;
	transition: opacity 0.25s ease;
}
.bsbr-booking__form-wrap.is-disabled { opacity: 1; pointer-events: none; }
/* Müşteri revizesi 2026-06-20: kilitliyken "3. Randevu Bilgileri" başlığı 1-2 ile aynı net
   kalsın; form alanları tarih+saat seçilene kadar GİZLİ (seçilince görünür), kilit mesajı
   overlay yerine akışta dursun (alanlar gizlenince başlığı kaplamasın). */
.bsbr-booking__form-wrap.is-disabled .bsbr-booking__form-gate { display: flex; position: static; border-radius: 10px; margin-bottom: 2px; }
.bsbr-booking__form-wrap:not(.is-disabled) .bsbr-booking__form-gate { display: none; }
.bsbr-booking__form-wrap.is-disabled .bsbr-form__fieldset > *:not(.bsbr-step-label) { display: none; }
.bsbr-booking__form-gate {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.75));
	color: var(--bsbr-secondary);
	font-size: 13.5px;
	font-weight: 600;
	padding: 14px 18px;
	border-bottom: 1px dashed var(--bsbr-border);
	border-radius: 10px 10px 0 0;
	pointer-events: auto;
}
.bsbr-booking__form-gate svg { color: var(--bsbr-primary); flex-shrink: 0; }
.bsbr-form__fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
/* Hidden input'lar layout'a katkı vermesin */
.bsbr-booking__form > input[type="hidden"] {
	display: none !important;
	margin: 0 !important;
	height: 0 !important;
	width: 0 !important;
}
/* Step başlığı altındaki ilk eleman daha sıkı dursun (-4px gap eşdeğeri) */
.bsbr-step-label { margin-bottom: -6px !important; }

.bsbr-row {
	display: grid;
	gap: 16px;
	margin: 0 !important;
}
.bsbr-row-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .bsbr-row-2 { grid-template-columns: 1fr; } }

.bsbr-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 !important;
}
.bsbr-field label {
	font-size: 13px;
	color: var(--bsbr-secondary);
	font-weight: 600;
	letter-spacing: 0.01em;
	margin: 0;
	display: block;
}
.bsbr-field label small {
	color: var(--bsbr-mute);
	font-weight: 400;
	margin-left: 4px;
}
/* Tüm form input'ları tek-tip — height 44px standart */
.bsbr-field input[type="text"],
.bsbr-field input[type="email"],
.bsbr-field input[type="tel"],
.bsbr-field input[type="date"],
.bsbr-field input[type="number"],
.bsbr-field select,
.bsbr-field textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--bsbr-border);
	border-radius: 8px;
	padding: 11px 14px;
	font-size: 14px;
	font-family: inherit;
	color: var(--bsbr-secondary);
	background: #fff;
	line-height: 1.4;
	margin: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bsbr-field input[type="text"],
.bsbr-field input[type="email"],
.bsbr-field input[type="tel"],
.bsbr-field input[type="date"],
.bsbr-field input[type="number"],
.bsbr-field select { height: 44px; }
.bsbr-field textarea { min-height: 92px; resize: vertical; }
.bsbr-field input:focus,
.bsbr-field select:focus,
.bsbr-field textarea:focus {
	outline: none;
	border-color: var(--bsbr-primary);
	box-shadow: 0 0 0 3px rgba(165,128,79,0.18);
}
.bsbr-field input::placeholder,
.bsbr-field textarea::placeholder { color: #b8b8b8; }
.req { color: var(--bsbr-danger); margin-left: 2px; }

/* iti (intl-tel-input) — input width düzelt + gap */
.bsbr-field .iti { width: 100%; display: block; }
.bsbr-field .iti input { padding-left: 92px !important; }
.bsbr-field .iti--separate-dial-code .iti__selected-flag { background: #fafafa; border-radius: 8px 0 0 8px; }

/* === Custom Checkbox — KVKK ===
   - 20×20 daha refined ölçü
   - Label flex align-items:center: text 1-2 satır olsa da checkbox dikey ortada
   - 2px border, 6px border-radius — modern kompakt
   - Tick: thin (1.5px) + center perfect rotate */
.bsbr-kvkk label {
	display: flex !important;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	user-select: none;
	margin: 0;
	font-weight: 400;
}
.bsbr-kvkk input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	max-width: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid #c5c5c5 !important;
	border-radius: 6px !important;
	background: #fff !important;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative;
	flex: 0 0 20px;
	overflow: visible !important;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
	top: 0 !important;
	vertical-align: middle;
	line-height: 1 !important;
}
.bsbr-kvkk input[type="checkbox"]::before {
	display: none !important;
	content: none !important;
}
.bsbr-kvkk input[type="checkbox"]:hover { border-color: var(--bsbr-primary) !important; }
.bsbr-kvkk input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(165,128,79,0.22) !important;
}
.bsbr-kvkk input[type="checkbox"]:checked {
	background: var(--bsbr-primary) !important;
	border-color: var(--bsbr-primary) !important;
}
.bsbr-kvkk input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
	pointer-events: none;
}
.bsbr-kvkk span {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--bsbr-mute);
	flex: 1 1 auto;
}

/* === Submit button === */
.bsbr-form__actions { margin: 22px 0 0; }
.bsbr-submit {
	background: var(--bsbr-secondary);
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 13px 30px !important;
	height: 48px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	transition: background-color 0.18s ease, transform 0.1s ease;
	box-shadow: none !important;
}
.bsbr-submit:hover { background: var(--bsbr-primary); transform: translateY(-1px); }
.bsbr-submit:active { transform: translateY(0); }
.bsbr-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.bsbr-form__msg {
	margin-top: 14px;
	padding: 12px 16px;
	border-radius: 8px;
	display: none;
	font-size: 14px;
	line-height: 1.5;
}
.bsbr-form__msg.is-success { display: block; background: #e8f5ec; color: var(--bsbr-success); border: 1px solid #b7dfc1; }
.bsbr-form__msg.is-error   { display: block; background: #fde8e8; color: var(--bsbr-danger);  border: 1px solid #f3b0b0; }

/* === List view === */
.bsbr-list__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.bsbr-list__title { font-size: 24px; font-weight: 500; margin: 0; color: var(--bsbr-secondary); }
.bsbr-list__cta-types { display: flex; gap: 8px; }
.bsbr-list__cta { background: var(--bsbr-primary); color: #fff !important; padding: 8px 16px; border-radius: 999px; text-decoration: none; font-size: 13px; }
.bsbr-list__cta:hover { background: var(--bsbr-secondary); }

.bsbr-list__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bsbr-border); margin-bottom: 16px; }
.bsbr-list__tab { padding: 10px 16px; color: var(--bsbr-mute); text-decoration: none; border-bottom: 2px solid transparent; font-size: 14px; }
.bsbr-list__tab.is-active { color: var(--bsbr-secondary); border-bottom-color: var(--bsbr-primary); font-weight: 600; }

.bsbr-list__table { width: 100%; border-collapse: collapse; }
.bsbr-list__table th, .bsbr-list__table td { padding: 12px 14px; border-bottom: 1px solid var(--bsbr-border); text-align: left; font-size: 14px; }
.bsbr-list__table th { font-weight: 600; color: var(--bsbr-secondary); background: var(--bsbr-bg-soft); }
.bsbr-list__cancel { background: transparent; border: 1px solid var(--bsbr-danger); color: var(--bsbr-danger); padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.bsbr-list__cancel:hover { background: var(--bsbr-danger); color: #fff; }
.bsbr-list__empty { padding: 32px; text-align: center; color: var(--bsbr-mute); background: var(--bsbr-bg-soft); border-radius: 8px; }

.bsbr-status { padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; display: inline-block; }
.bsbr-status-pending   { background: #fff4dd; color: #c8870a; border: 1px solid #f0d9a8; }
.bsbr-status-confirmed { background: #e6f5ec; color: #2c8f4a; border: 1px solid #b8e0c4; }
.bsbr-status-rejected  { background: #fdeaea; color: #c03a3a; border: 1px solid #f3c5c0; }
.bsbr-status-cancelled { background: #ededed; color: #6b6b6b; border: 1px solid #d8d8d8; }
.bsbr-status-completed { background: #e8eef5; color: #2952a3; border: 1px solid #c5d4ea; }
.bsbr-status-no_show   { background: #fff4e0; color: #b8730a; border: 1px solid #f0d9a8; }
/* M10 — ödemeli akış rozetleri. Rozet stili eklenmezse durum yazısı
   biçimsiz (renksiz/çerçevesiz) görünür; diğerleriyle aynı dilde olmalı. */
.bsbr-status-pending_payment { background: #fff4dd; color: #b8730a; border: 1px solid #f0d9a8; }
.bsbr-status-expired         { background: #ededed; color: #6b6b6b; border: 1px solid #d8d8d8; }
/* v0.8.0 — ödeme alındı ama saat tutulamadı. Gri değil KIRMIZI: müşteri bunun
   sıradan bir "süresi doldu" olmadığını görmeli, ekip de öyle. */
.bsbr-status-payment_conflict { background: #fdeaea; color: #c03a3a; border: 1px solid #f3c5c0; }

/* === 4. ÖDEME (M10) ===
   Not: kart ile başlığı arasına margin YAZILMAZ — `.bsbr-step-label` zaten
   `margin: 0 0 14px` taşıyor ve sayfanın 2./3. adım ritmi de ölçümle 14px çıktı.
   Buraya ikinci bir boşluk koymak o ritmi bozardı (ve iki kaynak üretirdi). */
.bsbr-pay {
	border: 1px solid color-mix(in srgb, var(--bsbr-primary) 45%, transparent);
	border-radius: 10px;
	padding: 22px 24px;
	background: color-mix(in srgb, var(--bsbr-primary) 6%, transparent);
}
.bsbr-pay__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
}
.bsbr-pay__info { flex: 1 1 220px; min-width: 220px; }
.bsbr-pay__label {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bsbr-mute);
	line-height: 1.2;
}
.bsbr-pay__desc { font-size: 14px; color: var(--bsbr-mute); margin: 8px 0 0; line-height: 1.5; }
.bsbr-pay__amount {
	font-size: 30px;
	font-weight: 700;
	color: var(--bsbr-primary);
	white-space: nowrap;
	line-height: 1;
	margin-top: 6px;
}
.bsbr-pay__sep {
	border: 0;
	border-top: 1px solid var(--bsbr-border);
	margin: 20px 0;
}
.bsbr-pay__row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.bsbr-pay__row + .bsbr-pay__row { margin-top: 18px; }
.bsbr-pay__row input[type="radio"],
.bsbr-pay__row input[type="checkbox"] { margin-top: 4px; flex: 0 0 auto; }
.bsbr-pay__row > span { line-height: 1.5; }
.bsbr-pay__hint { display: block; font-size: 13px; color: var(--bsbr-mute); margin-top: 4px; }
.bsbr-pay__consent { font-size: 13px; }
.bsbr-pay__consent a { text-decoration: underline; }
.bsbr-pay__note {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--bsbr-border);
	font-size: 13px;
	line-height: 1.5;
	color: var(--bsbr-mute);
}
.bsbr-pay__note svg { flex: 0 0 auto; margin-top: 3px; }

/* Dar ekran: tutar alt satıra düşerken sola yaslanır, sağda asılı kalmasın. */
@media (max-width: 480px) {
	.bsbr-pay { padding: 18px 16px; }
	.bsbr-pay__amount { font-size: 26px; }
}

/* intl-tel-input width fix */
.iti { width: 100%; }