/* Flores Tadım Randevu — standalone frontend stilleri
   Marka rengi: #3a9bd8 */

.fr-body {
	margin: 0;
	background: #f2f7fb;
	min-height: 100vh;
	padding: 24px 0 40px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.flores-randevu {
	--fr-brand: #3a9bd8;
	--fr-brand-dark: #2b7fb5;
	--fr-brand-soft: #eaf5fc;
	--fr-ink: #2b333b;
	--fr-muted: #7a8894;
	--fr-line: #e4eaf0;
	--fr-danger: #d0403f;
	--fr-radius: 14px;
	max-width: 560px;
	margin: 0 auto;
	padding: 16px;
	box-sizing: border-box;
	color: var(--fr-ink);
	-webkit-font-smoothing: antialiased;
}
.flores-randevu *,
.flores-randevu *::before,
.flores-randevu *::after { box-sizing: border-box; }

.flores-randevu .fr-card {
	background: #fff;
	border: 1px solid var(--fr-line);
	border-radius: var(--fr-radius);
	box-shadow: 0 6px 28px rgba(43, 127, 181, .08);
	overflow: hidden;
}

/* Header */
.flores-randevu .fr-head {
	text-align: center;
	padding: 28px 24px 22px;
	border-bottom: 1px solid var(--fr-line);
	background: linear-gradient(180deg, var(--fr-brand-soft), #fff);
}
.flores-randevu .fr-logo { height: 46px; width: auto; margin: 0 auto 12px; display: block; }
.flores-randevu .fr-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.3px; }
.flores-randevu .fr-subtitle { margin: 6px 0 0; font-size: 14px; color: var(--fr-muted); }

/* Form */
.flores-randevu .fr-form { padding: 22px 24px 26px; }
.flores-randevu .fr-step { margin-bottom: 22px; }
.flores-randevu .fr-step[hidden] { display: none; }

.flores-randevu .fr-label {
	display: flex; align-items: center; gap: 9px;
	font-size: 15px; font-weight: 600; margin-bottom: 12px;
}
.flores-randevu .fr-step-no {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--fr-brand); color: #fff; font-size: 13px; font-weight: 700; flex: none;
}
.flores-randevu .fr-hint { margin: 8px 0 0; font-size: 13px; color: var(--fr-muted); }

/* Inputs */
.flores-randevu .fr-input {
	width: 100%; padding: 13px 14px; font-size: 16px;
	border: 1.5px solid var(--fr-line); border-radius: 10px;
	background: #fff; color: var(--fr-ink);
	transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none; appearance: none;
}
.flores-randevu .fr-input:focus {
	outline: none; border-color: var(--fr-brand);
	box-shadow: 0 0 0 3px rgba(58, 155, 216, .18);
}
.flores-randevu .fr-input.fr-invalid { border-color: var(--fr-danger); }
.flores-randevu .fr-field { margin-bottom: 14px; }
.flores-randevu .fr-field:last-child { margin-bottom: 0; }

/* Takvim */
.flores-randevu .fr-cal {
	border: 1.5px solid var(--fr-line); border-radius: 14px;
	padding: 14px 14px 10px; background: #fff;
}
.flores-randevu .fr-cal-head {
	display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.flores-randevu .fr-cal-title {
	font-size: 15px; font-weight: 700; color: var(--fr-ink); text-transform: capitalize;
}
.flores-randevu .fr-cal-nav {
	width: 34px; height: 34px; border: 1.5px solid var(--fr-line); background: #fff;
	border-radius: 9px; font-size: 20px; line-height: 1; color: var(--fr-ink); cursor: pointer;
	display: flex; align-items: center; justify-content: center; transition: all .15s; font-family: inherit;
	padding: 0;
}
.flores-randevu .fr-cal-nav:hover:not(:disabled) { border-color: var(--fr-brand); color: var(--fr-brand); }
.flores-randevu .fr-cal-nav:active:not(:disabled) { transform: scale(.94); }
.flores-randevu .fr-cal-nav:disabled { opacity: .3; cursor: not-allowed; }

.flores-randevu .fr-cal-weekdays,
.flores-randevu .fr-cal-grid {
	display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.flores-randevu .fr-cal-weekdays { margin-bottom: 6px; }
.flores-randevu .fr-cal-wd {
	text-align: center; font-size: 11px; font-weight: 600; color: var(--fr-muted);
	text-transform: uppercase; letter-spacing: .02em; padding: 4px 0;
}

.flores-randevu .fr-cal-cell {
	aspect-ratio: 1 / 1; border: none; background: transparent; border-radius: 10px;
	font-size: 14px; font-weight: 600; color: var(--fr-ink); cursor: default;
	display: flex; align-items: center; justify-content: center; font-family: inherit;
	padding: 0; position: relative; transition: background .15s, color .15s, transform .05s;
}
.flores-randevu .fr-cal-cell.empty { visibility: hidden; }

/* Seçilemeyen günler — gri, yarı saydam */
.flores-randevu .fr-cal-cell.disabled { color: #c2ccd4; opacity: .5; cursor: not-allowed; }

/* Seçilebilir günler (Çarşamba/Pazar) — hafif marka tonu, öne çıkar */
.flores-randevu .fr-cal-cell.available {
	background: var(--fr-brand-soft); color: var(--fr-brand-dark); cursor: pointer;
}
.flores-randevu .fr-cal-cell.available:hover { background: #d3ebfa; }
.flores-randevu .fr-cal-cell.available:active { transform: scale(.92); }

/* Seçili gün */
.flores-randevu .fr-cal-cell.selected,
.flores-randevu .fr-cal-cell.selected:hover {
	background: var(--fr-brand); color: #fff; box-shadow: 0 3px 12px rgba(58, 155, 216, .35);
}

/* Bugün işareti */
.flores-randevu .fr-cal-cell.today::after {
	content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
	width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55;
}
.flores-randevu .fr-cal-cell.selected.today::after { background: #fff; opacity: .9; }

.flores-randevu .fr-cal-legend {
	display: flex; align-items: center; gap: 7px; margin: 12px 2px 4px;
	font-size: 12.5px; color: var(--fr-muted);
}
.flores-randevu .fr-cal-legend .fr-cal-dot {
	width: 13px; height: 13px; border-radius: 4px;
	background: var(--fr-brand-soft); border: 1.5px solid var(--fr-brand); flex: none;
}

/* Slot grid */
.flores-randevu .fr-slots {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px;
}
.flores-randevu .fr-slot {
	border: 1.5px solid var(--fr-line); background: #fff; border-radius: 10px;
	padding: 11px 6px; cursor: pointer; text-align: center;
	transition: border-color .15s, background .15s, transform .05s;
	font-family: inherit; color: var(--fr-ink);
}
.flores-randevu .fr-slot:hover:not(:disabled) { border-color: var(--fr-brand); }
.flores-randevu .fr-slot:active:not(:disabled) { transform: scale(.97); }
.flores-randevu .fr-slot .fr-slot-time { display: block; font-size: 16px; font-weight: 700; }
.flores-randevu .fr-slot .fr-slot-cap { display: block; font-size: 11px; color: var(--fr-muted); margin-top: 3px; }
.flores-randevu .fr-slot.selected { border-color: var(--fr-brand); background: var(--fr-brand); color: #fff; }
.flores-randevu .fr-slot.selected .fr-slot-cap { color: rgba(255,255,255,.9); }
.flores-randevu .fr-slot:disabled { opacity: .5; cursor: not-allowed; background: #f5f7f9; }
.flores-randevu .fr-slot.full .fr-slot-cap { color: var(--fr-danger); font-weight: 600; }
.flores-randevu .fr-slots-loading { margin: 4px 0 0; font-size: 13px; color: var(--fr-muted); }

/* People */
.flores-randevu .fr-people { display: flex; gap: 10px; flex-wrap: wrap; }
.flores-randevu .fr-person {
	flex: 1; min-width: 60px; border: 1.5px solid var(--fr-line); background: #fff;
	border-radius: 10px; padding: 14px 6px; font-size: 17px; font-weight: 700;
	cursor: pointer; text-align: center; color: var(--fr-ink);
	transition: border-color .15s, background .15s, transform .05s; font-family: inherit;
}
.flores-randevu .fr-person:hover:not(:disabled) { border-color: var(--fr-brand); }
.flores-randevu .fr-person:active:not(:disabled) { transform: scale(.97); }
.flores-randevu .fr-person.selected { border-color: var(--fr-brand); background: var(--fr-brand); color: #fff; }
.flores-randevu .fr-person:disabled { opacity: .4; cursor: not-allowed; background: #f5f7f9; }

/* Submit */
.flores-randevu .fr-submit {
	width: 100%; margin-top: 6px; padding: 15px; font-size: 16px; font-weight: 700;
	color: #fff; background: var(--fr-brand); border: none; border-radius: 11px;
	cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
	transition: background .15s, opacity .15s; font-family: inherit;
}
.flores-randevu .fr-submit:hover:not(:disabled) { background: var(--fr-brand-dark); }
.flores-randevu .fr-submit:disabled { opacity: .45; cursor: not-allowed; }

.flores-randevu .fr-spinner {
	width: 17px; height: 17px; border: 2.5px solid rgba(255,255,255,.4);
	border-top-color: #fff; border-radius: 50%; animation: fr-spin .7s linear infinite;
}
@keyframes fr-spin { to { transform: rotate(360deg); } }

/* Errors */
.flores-randevu .fr-field-error,
.flores-randevu .fr-form-error { color: var(--fr-danger); font-size: 13px; margin: 8px 0 0; }
.flores-randevu .fr-form-error {
	background: #fdecec; border: 1px solid #f6c9c9; border-radius: 9px;
	padding: 11px 13px; margin-top: 14px; font-weight: 500;
}

/* Success */
.flores-randevu .fr-success { padding: 34px 26px 30px; text-align: center; }
.flores-randevu .fr-success[hidden] { display: none; }
.flores-randevu .fr-success-icon {
	width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
	background: var(--fr-brand); color: #fff; font-size: 30px; line-height: 58px; font-weight: 700;
}
.flores-randevu .fr-success h3 { margin: 0 0 14px; font-size: 21px; }
.flores-randevu .fr-success-summary {
	background: var(--fr-brand-soft); border-radius: 11px; padding: 16px 18px;
	text-align: left; display: inline-block; min-width: 260px; margin: 0 auto;
}
.flores-randevu .fr-success-summary .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.flores-randevu .fr-success-summary .row .k { color: var(--fr-muted); }
.flores-randevu .fr-success-summary .row .v { font-weight: 600; }
.flores-randevu .fr-success-note { margin: 16px 0 8px; font-size: 14px; color: var(--fr-muted); }
.flores-randevu .fr-success-cancel { margin: 0 0 18px; font-size: 13px; color: var(--fr-muted); }
.flores-randevu .fr-success-cancel a { color: var(--fr-brand); font-weight: 600; text-decoration: none; }
.flores-randevu .fr-success-cancel a:hover { text-decoration: underline; }
.flores-randevu .fr-again {
	background: none; border: 1.5px solid var(--fr-brand); color: var(--fr-brand);
	padding: 11px 22px; border-radius: 10px; font-size: 15px; font-weight: 600;
	cursor: pointer; font-family: inherit;
}
.flores-randevu .fr-again:hover { background: var(--fr-brand); color: #fff; }

.flores-randevu .fr-footer { text-align: center; color: var(--fr-muted); font-size: 12px; margin: 18px 0 0; }

/* Mobil */
@media (max-width: 480px) {
	.fr-body { padding: 12px 0 24px; }
	.flores-randevu { padding: 10px; }
	.flores-randevu .fr-form { padding: 18px 16px 22px; }
	.flores-randevu .fr-head { padding: 22px 16px 18px; }
	.flores-randevu .fr-slots { grid-template-columns: repeat(3, 1fr); }
}