/* ============================================================
   Table Reservation — Frontend Styles
   Design inspired by kaiserin.hu
   Colors: #065e4f (teal) | #F9F7F5 (cream) | #1a1a1a (text)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Raleway:wght@300;400;500;600&display=swap');

/* ── CSS Variables ──────────────────────────────────────────── */
.tr-reservation-wrap {
	--tr-primary:      #065e4f;
	--tr-primary-dark: #044a3e;
	--tr-bg:           #F9F7F5;
	--tr-bg-input:     #ffffff;
	--tr-text:         #1a1a1a;
	--tr-text-light:   #6b6b6b;
	--tr-border:       #d8d4cf;
	--tr-border-focus: #065e4f;
	--tr-error:        #c0392b;
	--tr-success:      #065e4f;
	--tr-radius:       0px;
	--tr-font-serif:   'Cormorant Garamond', Georgia, serif;
	--tr-font-sans:    'Raleway', Arial, sans-serif;
	--tr-shadow:       0 2px 24px rgba(0,0,0,.08);
	--tr-transition:   .2s ease;
}

/* ── Wrapper ────────────────────────────────────────────────── */
.tr-reservation-wrap {
	background:  var(--tr-bg);
	color:       var(--tr-text);
	font-family: var(--tr-font-sans);
	font-weight: 400;
	font-size:   16px;
	line-height: 1.6;
	max-width:   780px;
	margin:      0 auto;
	padding:     48px 52px;
	box-shadow:  var(--tr-shadow);
	position:    relative;
	overflow:    hidden;
}

.tr-reservation-wrap *,
.tr-reservation-wrap *::before,
.tr-reservation-wrap *::after {
	box-sizing: border-box;
}

/* ── Header ─────────────────────────────────────────────────── */
.tr-form-header {
	text-align:    center;
	margin-bottom: 40px;
}

.tr-form-title {
	font-family:   var(--tr-font-serif);
	font-size:     clamp(26px, 4vw, 38px);
	font-weight:   500;
	color:         var(--tr-primary);
	letter-spacing: 1px;
	margin:        0 0 10px;
	line-height:   1.2;
}

.tr-form-subtitle {
	font-size:     15px;
	color:         var(--tr-text-light);
	margin:        0;
	letter-spacing: .5px;
}

/* ── Step Indicator ─────────────────────────────────────────── */
.tr-steps {
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin-bottom:   44px;
	gap:             0;
}

.tr-step {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            8px;
	position:       relative;
	z-index:        1;
}

.tr-step-circle {
	width:           40px;
	height:          40px;
	border-radius:   50%;
	border:          2px solid var(--tr-border);
	background:      var(--tr-bg);
	display:         flex;
	align-items:     center;
	justify-content: center;
	position:        relative;
	transition:      background var(--tr-transition), border-color var(--tr-transition);
	cursor:          default;
}

.tr-step-number {
	font-family:    var(--tr-font-sans);
	font-size:      14px;
	font-weight:    600;
	color:          var(--tr-text-light);
	transition:     opacity var(--tr-transition);
	letter-spacing: 0;
}

.tr-step-check {
	position:   absolute;
	font-size:  18px;
	color:      #fff;
	opacity:    0;
	transition: opacity var(--tr-transition);
	line-height: 1;
}

.tr-step-circle.active {
	border-color: var(--tr-primary);
	background:   var(--tr-primary);
}

.tr-step-circle.active .tr-step-number {
	color: #fff;
}

.tr-step-circle.done {
	border-color: var(--tr-primary);
	background:   var(--tr-primary);
}

.tr-step-circle.done .tr-step-number {
	opacity: 0;
}

.tr-step-circle.done .tr-step-check {
	opacity: 1;
}

.tr-step-label {
	font-size:      11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color:          var(--tr-text-light);
	white-space:    nowrap;
	font-weight:    500;
	transition:     color var(--tr-transition);
}

.tr-step[data-step].active-label .tr-step-label {
	color: var(--tr-primary);
}

.tr-step-line {
	flex:             1;
	height:           1px;
	background:       var(--tr-border);
	margin:           0 12px;
	margin-bottom:    24px; /* align with circle center */
	transition:       background var(--tr-transition);
	min-width:        40px;
}

.tr-step-line.done {
	background: var(--tr-primary);
}

/* ── Step Panels ────────────────────────────────────────────── */
.tr-step-panel {
	display:    none;
	animation:  tr-fadein .25s ease;
}

.tr-step-panel.active {
	display: block;
}

@keyframes tr-fadein {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Grid ───────────────────────────────────────────────────── */
.tr-fields-grid {
	display: grid;
	gap:     20px 24px;
}

.tr-fields-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.tr-fields-grid--2 { grid-template-columns: 1fr 1fr; }

.tr-field--full { grid-column: 1 / -1; }

/* ── Fields ─────────────────────────────────────────────────── */
.tr-field {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.tr-label {
	font-size:      11px;
	font-weight:    600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color:          var(--tr-text-light);
	display:        flex;
	gap:            4px;
	align-items:    center;
}

.tr-required {
	color: var(--tr-primary);
	font-size: 14px;
	line-height: 1;
}

.tr-optional {
	font-weight:    400;
	letter-spacing: 0;
	text-transform: none;
	font-size:      11px;
	color:          var(--tr-text-light);
}

.tr-input-wrap {
	position: relative;
}

.tr-input {
	width:            100%;
	padding:          12px 16px;
	background:       var(--tr-bg-input);
	border:           1px solid var(--tr-border);
	border-radius:    var(--tr-radius);
	font-family:      var(--tr-font-sans);
	font-size:        15px;
	color:            var(--tr-text);
	outline:          none;
	transition:       border-color var(--tr-transition), box-shadow var(--tr-transition);
	appearance:       none;
	-webkit-appearance: none;
}

.tr-input:focus {
	border-color: var(--tr-border-focus);
	box-shadow:   0 0 0 3px rgba(6, 94, 79, .1);
}

.tr-input::placeholder {
	color: #bab6b1;
}

.tr-input.tr-has-icon {
	padding-right: 44px;
}

/* Inputs with icons */
.tr-datepicker,
.tr-select {
	padding-right: 44px;
	cursor: pointer;
}

.tr-input-icon {
	position:   absolute;
	right:      14px;
	top:        50%;
	transform:  translateY(-50%);
	width:      18px;
	height:     18px;
	color:      var(--tr-text-light);
	pointer-events: none;
}

.tr-input-icon svg {
	width:  100%;
	height: 100%;
}

/* ── Select ─────────────────────────────────────────────────── */
.tr-select:disabled {
	background: #f4f2ef;
	color:      #999;
	cursor:     not-allowed;
}

/* ── Guest counter ──────────────────────────────────────────── */
.tr-guest-counter {
	display:     flex;
	align-items: stretch;
	border:      1px solid var(--tr-border);
	background:  var(--tr-bg-input);
	transition:  border-color var(--tr-transition);
}

.tr-guest-counter:focus-within {
	border-color: var(--tr-border-focus);
	box-shadow:   0 0 0 3px rgba(6, 94, 79, .1);
}

.tr-counter-btn {
	width:           44px;
	background:      transparent;
	border:          none;
	font-size:       22px;
	font-weight:     300;
	color:           var(--tr-primary);
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         0;
	transition:      background var(--tr-transition), color var(--tr-transition);
	line-height:     1;
}

.tr-counter-btn:hover {
	background: var(--tr-primary);
	color:      #fff;
}

.tr-counter-btn:disabled {
	color:  var(--tr-border);
	cursor: not-allowed;
}

.tr-counter-btn:disabled:hover {
	background: transparent;
}

.tr-counter-input {
	border:     none !important;
	box-shadow: none !important;
	text-align: center;
	font-size:  18px;
	font-weight: 500;
	padding:    12px 8px;
	flex:       1;
	min-width:  0;
	appearance: textfield;
	-moz-appearance: textfield;
}

.tr-counter-input::-webkit-inner-spin-button,
.tr-counter-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
}

/* ── Textarea ───────────────────────────────────────────────── */
.tr-textarea {
	resize:     vertical;
	min-height: 90px;
}

/* ── Time loading ───────────────────────────────────────────── */
.tr-time-loading {
	font-size:  12px;
	color:      var(--tr-text-light);
	font-style: italic;
	min-height: 18px;
	display:    block;
}

/* ── Errors ─────────────────────────────────────────────────── */
.tr-error {
	font-size:  12px;
	color:      var(--tr-error);
	min-height: 18px;
	display:    block;
}

.tr-input.tr-invalid {
	border-color: var(--tr-error) !important;
}

/* ── Actions ────────────────────────────────────────────────── */
.tr-actions {
	display:     flex;
	align-items: center;
	margin-top:  32px;
	gap:         12px;
}

.tr-actions--right    { justify-content: flex-end; }
.tr-actions--between  { justify-content: space-between; }

/* ── Buttons ────────────────────────────────────────────────── */
.tr-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	padding:         14px 32px;
	font-family:     var(--tr-font-sans);
	font-size:       12px;
	font-weight:     600;
	letter-spacing:  2px;
	text-transform:  uppercase;
	border:          1px solid transparent;
	cursor:          pointer;
	transition:      background var(--tr-transition), color var(--tr-transition), border-color var(--tr-transition), transform var(--tr-transition);
	border-radius:   var(--tr-radius);
	position:        relative;
	white-space:     nowrap;
	text-decoration: none;
}

.tr-btn svg {
	width:  16px;
	height: 16px;
	flex-shrink: 0;
}

.tr-btn-primary {
	background:   var(--tr-primary);
	color:        #fff;
	border-color: var(--tr-primary);
}

.tr-btn-primary:hover {
	background:   var(--tr-primary-dark);
	border-color: var(--tr-primary-dark);
	transform:    translateY(-1px);
}

.tr-btn-primary:active {
	transform: translateY(0);
}

.tr-btn-ghost {
	background:   transparent;
	color:        var(--tr-text-light);
	border-color: var(--tr-border);
}

.tr-btn-ghost:hover {
	border-color: var(--tr-text-light);
	color:        var(--tr-text);
}

/* Submit loading state */
.tr-btn-loading {
	display: none;
}

.tr-btn-submit.loading .tr-btn-text {
	display: none;
}

.tr-btn-submit.loading .tr-btn-loading {
	display: flex;
}

.tr-spinner {
	width:     18px;
	height:    18px;
	animation: tr-spin 1s linear infinite;
}

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

/* ── Summary (Step 3) ───────────────────────────────────────── */
.tr-summary {
	border:  1px solid var(--tr-border);
	padding: 0;
}

.tr-summary-header {
	padding:     20px 24px;
	background:  var(--tr-primary);
	color:       #fff;
}

.tr-summary-header h3 {
	margin:      0;
	font-family: var(--tr-font-serif);
	font-size:   20px;
	font-weight: 500;
	letter-spacing: .5px;
}

.tr-summary-body {
	padding: 0 24px;
}

.tr-summary-row {
	display:       flex;
	gap:           20px;
	padding:       14px 0;
	border-bottom: 1px solid var(--tr-border);
	align-items:   flex-start;
}

.tr-summary-row:last-child {
	border-bottom: none;
}

.tr-summary-key {
	font-size:      11px;
	font-weight:    600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color:          var(--tr-text-light);
	min-width:      110px;
	padding-top:    2px;
}

.tr-summary-val {
	font-size:   15px;
	color:       var(--tr-text);
	flex:        1;
	word-break:  break-word;
}

/* ── Form notice ────────────────────────────────────────────── */
.tr-form-notice {
	margin-top: 16px;
	text-align: center;
}

.tr-form-notice p {
	font-size: 12px;
	color:     var(--tr-text-light);
	margin:    0;
}

/* ── Success state ──────────────────────────────────────────── */
.tr-success {
	text-align:  center;
	padding:     40px 24px;
	animation:   tr-fadein .4s ease;
}

.tr-success-icon {
	width:        72px;
	height:       72px;
	margin:       0 auto 24px;
	color:        var(--tr-primary);
}

.tr-success-icon svg {
	width:  100%;
	height: 100%;
}

.tr-success-title {
	font-family:   var(--tr-font-serif);
	font-size:     clamp(22px, 3vw, 30px);
	font-weight:   500;
	color:         var(--tr-primary);
	margin:        0 0 12px;
	letter-spacing: .5px;
}

.tr-success-message {
	font-size: 15px;
	color:     var(--tr-text-light);
	margin:    0;
	max-width: 420px;
	margin:    0 auto;
}

/* ── Error banner ───────────────────────────────────────────── */
.tr-error-banner {
	margin-top:  16px;
	padding:     14px 18px;
	background:  #fdf2f2;
	border-left: 3px solid var(--tr-error);
	color:       var(--tr-error);
	font-size:   14px;
}

/* ── Flatpickr customisation ────────────────────────────────── */
.flatpickr-calendar {
	border-radius: 0 !important;
	font-family:   var(--tr-font-sans) !important;
	box-shadow:    0 8px 32px rgba(0,0,0,.12) !important;
	border:        1px solid var(--tr-border) !important;
}

.flatpickr-months .flatpickr-month {
	background: var(--tr-primary) !important;
	color:      #fff !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
	background: transparent !important;
	color:      #fff !important;
	font-family: var(--tr-font-sans) !important;
}

.flatpickr-weekdays {
	background: var(--tr-primary) !important;
}

span.flatpickr-weekday {
	background: var(--tr-primary) !important;
	color:      rgba(255,255,255,.7) !important;
	font-size:  11px !important;
	font-weight: 600 !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
	background:   var(--tr-primary) !important;
	border-color: var(--tr-primary) !important;
	color:        #fff !important;
	border-radius: 0 !important;
}

.flatpickr-day:hover {
	background:   rgba(6, 94, 79, .1) !important;
	border-radius: 0 !important;
}

.flatpickr-day.today {
	border-color: var(--tr-primary) !important;
	border-radius: 0 !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
	color:  #ccc !important;
	background: transparent !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
	fill: #fff !important;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
	fill: rgba(255,255,255,.7) !important;
}

/* ── Location Picker ────────────────────────────────────────────── */
.tr-location-picker {
	margin-bottom: 40px;
}

.tr-location-intro {
	font-size:      11px;
	font-weight:    600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color:          var(--tr-text-light);
	text-align:     center;
	margin:         0 0 20px;
}

.tr-location-cards {
	display: grid;
	grid-template-columns: 1fr;      /* single location → full width */
	gap: 16px;
}

.tr-location-cards--2 {
	grid-template-columns: 1fr 1fr;  /* two locations → 50 % each */
}

.tr-location-card {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            8px;
	padding:        24px 48px 24px 24px;
	background:     var(--tr-bg-input);
	border:         1px solid var(--tr-border);
	border-radius:  var(--tr-radius);
	cursor:         pointer;
	text-align:     left;
	font-family:    var(--tr-font-sans);
	transition:     border-color var(--tr-transition), box-shadow var(--tr-transition), transform var(--tr-transition);
	position:       relative;
	width:          100%;
}

.tr-location-card:hover {
	background:   var(--tr-primary)  !important; /* override Elementor theme button:hover */
	border-color: var(--tr-primary)  !important;
	box-shadow:   0 4px 20px rgba(6, 94, 79, .25);
	transform:    translateY(-2px);
	color:        #fff               !important;
}

/* Keep child text white on hover */
.tr-location-card:hover .tr-location-card-name {
	color: #fff !important;
}

.tr-location-card:hover .tr-location-card-hours {
	color: rgba(255, 255, 255, .8) !important;
}

.tr-location-card:hover .tr-location-card-arrow {
	color:   #fff !important;
	opacity: 1   !important;
}

.tr-location-card-name {
	font-family:    var(--tr-font-serif);
	font-size:      22px;
	font-weight:    500;
	color:          var(--tr-primary);
	letter-spacing: .5px;
	line-height:    1.2;
}

.tr-location-card-hours {
	font-size:   13px;
	color:       var(--tr-text-light);
	line-height: 1.7;
}

.tr-location-card-arrow {
	position:  absolute;
	right:     20px;
	top:       50%;
	transform: translateY(-50%);
	width:     20px;
	height:    20px;
	color:     var(--tr-primary);
	opacity:   .4;
	transition: opacity var(--tr-transition);
}

.tr-location-card:hover .tr-location-card-arrow {
	opacity: 1;
}

.tr-location-card-arrow svg {
	width:  100%;
	height: 100%;
}

/* ── Selected location bar ──────────────────────────────────────── */
.tr-selected-location {
	display:       flex;
	align-items:   center;
	gap:           8px;
	padding:       10px 16px;
	background:    rgba(6, 94, 79, .06);
	border-left:   3px solid var(--tr-primary);
	margin-bottom: 32px;
	font-size:     14px;
}

.tr-selected-location-label {
	color:          var(--tr-text-light);
	font-size:      12px;
	font-weight:    500;
	letter-spacing: .5px;
}

.tr-selected-location strong {
	color:       var(--tr-primary);
	font-weight: 600;
}

.tr-change-location-btn {
	margin-left:     auto;
	background:      transparent;
	border:          none;
	color:           var(--tr-primary);
	font-family:     var(--tr-font-sans);
	font-size:       12px;
	font-weight:     600;
	letter-spacing:  1px;
	text-transform:  uppercase;
	cursor:          pointer;
	padding:         4px 0;
	transition:      opacity var(--tr-transition);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tr-change-location-btn:hover {
	opacity: .7;
}

/* ── Seating type options ────────────────────────────────────────── */
.tr-seating-type-wrap {
	margin-bottom: 24px;
}

.tr-seating-options {
	display: flex;
	gap:     12px;
}

.tr-seating-option {
	flex:    1;
	cursor:  pointer;
	display: block;
}

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

.tr-seating-option-label {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            10px;
	padding:        20px 16px;
	border:         1px solid var(--tr-border);
	background:     var(--tr-bg-input);
	font-size:      13px;
	font-weight:    600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color:          var(--tr-text-light);
	transition:     border-color var(--tr-transition), color var(--tr-transition), background var(--tr-transition);
	cursor:         pointer;
}

.tr-seating-option-label svg {
	width:  28px;
	height: 28px;
}

.tr-seating-option input[type="radio"]:checked + .tr-seating-option-label {
	border-color: var(--tr-primary);
	color:        var(--tr-primary);
	background:   rgba(6, 94, 79, .05);
}

.tr-seating-option:hover .tr-seating-option-label {
	border-color: var(--tr-primary);
}

/* ── Available seats indicator ──────────────────────────────────── */
.tr-available-seats {
	display:      flex;
	align-items:  center;
	gap:          8px;
	margin-top:   12px;
	padding:      10px 14px;
	background:   rgba(6, 94, 79, .06);
	border-left:  3px solid var(--tr-primary);
	font-size:    13px;
	color:        var(--tr-primary);
	font-weight:  500;
	animation:    tr-fadein .2s ease;
}

.tr-available-seats svg {
	width:       16px;
	height:      16px;
	flex-shrink: 0;
}

/* ── Privacy checkbox ───────────────────────────────────────────── */
.tr-privacy-field {
	margin-top: 8px;
}

.tr-privacy-label {
	display:        flex;
	align-items:    center;   /* checkbox and text on the same baseline */
	gap:            12px;
	cursor:         pointer;
	font-size:      14px;
	color:          var(--tr-text-light);
	font-weight:    400;
	letter-spacing: 0;
	text-transform: none;
}

.tr-privacy-label input[type="checkbox"] {
	flex-shrink:  0;
	width:        18px;
	height:       18px;
	margin-top:   0;          /* reset theme margin that shifts the box */
	margin:       0;
	accent-color: var(--tr-primary);
	cursor:       pointer;
	vertical-align: middle;
}

.tr-privacy-text a {
	color:       var(--tr-primary);
	font-weight: 600;
}

.tr-privacy-text a:hover {
	text-decoration: none;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 680px) {
	.tr-reservation-wrap {
		padding: 32px 24px;
	}

	.tr-fields-grid--3,
	.tr-fields-grid--2 {
		grid-template-columns: 1fr;
	}

	.tr-location-cards,
	.tr-location-cards--2 {
		grid-template-columns: 1fr;
	}

	.tr-seating-options {
		flex-direction: column;
	}

	.tr-step-label {
		font-size: 9px;
	}

	.tr-steps {
		gap: 0;
	}

	.tr-step-line {
		min-width: 20px;
	}

	.tr-btn {
		padding: 13px 22px;
		font-size: 11px;
	}
}

@media (max-width: 420px) {
	.tr-reservation-wrap {
		padding: 24px 18px;
	}

	.tr-step-label {
		display: none;
	}
}