@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,500&display=swap');

/* ==========================================================================
   Dakkshaa brand tokens
   ========================================================================== */
.dk-booking-wrap, .dk-manager-wrap {
	--dk-bg:          #0d0906;
	--dk-bg-soft:     #17110b;
	--dk-bg-field:    #1b140d;
	--dk-gold:        #d9b56a;
	--dk-gold-bright: #ecd190;
	--dk-gold-deep:   #b8862f;
	--dk-cream:       #ece2cc;
	--dk-muted:       #ad9a76;
	--dk-purple:      #4b2e83;
	--dk-purple-soft: rgba(75,46,131,0.35);
	--dk-border:      rgba(217,181,106,0.35);
	--dk-border-soft: rgba(217,181,106,0.18);
	--dk-danger:      #e2725b;
	--dk-danger-bg:   rgba(226,114,91,0.12);
	--dk-success:     #8bb37a;
	--dk-success-bg:  rgba(139,179,122,0.12);
}

/* ==========================================================================
   Layout shell
   ========================================================================== */
.dk-booking-wrap, .dk-manager-wrap {
	max-width: 640px;
	margin: 0 auto;
	background: var(--dk-bg);
	background-image: radial-gradient(ellipse at top, rgba(75,46,131,0.25), transparent 60%);
	border: 1px solid var(--dk-border);
	border-radius: 6px;
	padding: 40px 36px;
	font-family: 'Cormorant Garamond', Georgia, serif;
	color: var(--dk-cream);
	box-sizing: border-box;
}

.dk-manager-wrap.dk-manager-login-wrap { max-width: 420px; }
.dk-manager-wrap { max-width: 1000px; }

/* ==========================================================================
   Headings / labels
   ========================================================================== */
.dk-form-title {
	font-family: 'Cinzel', Georgia, serif;
	font-weight: 600;
	font-size: 26px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dk-gold-bright);
	margin: 0 0 6px;
	text-align: center;
}

.dk-form-sub {
	text-align: center;
	color: var(--dk-muted);
	font-style: italic;
	font-size: 17px;
	margin-top: 0;
	margin-bottom: 26px;
}

.dk-form-row label {
	font-family: 'Cinzel', Georgia, serif;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--dk-gold);
	margin-bottom: 8px;
}
.dk-req { color: var(--dk-danger); }
.dk-optional { font-weight: 400; color: var(--dk-muted); text-transform: none; letter-spacing: 0; font-family: 'Cormorant Garamond', Georgia, serif; }

/* ==========================================================================
   Inputs
   ========================================================================== */
.dk-form input[type="text"],
.dk-form input[type="email"],
.dk-form input[type="tel"],
.dk-form input[type="date"],
.dk-form input[type="password"],
.dk-form select,
.dk-form textarea {
	background: var(--dk-bg-field);
	border: 1px solid var(--dk-border);
	color: var(--dk-cream);
	border-radius: 3px;
	padding: 12px 14px;
	font-size: 16px;
	font-family: 'Cormorant Garamond', Georgia, serif;
	width: 100%;
	box-sizing: border-box;
}

.dk-form input::placeholder, .dk-form textarea::placeholder { color: var(--dk-muted); }

.dk-form input:focus, .dk-form select:focus, .dk-form textarea:focus {
	outline: none;
	border-color: var(--dk-gold);
	box-shadow: 0 0 0 3px rgba(217,181,106,0.18);
}

/* Native date-picker icon is dark by default; invert so it's visible */
.dk-form input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8) sepia(1) saturate(3) hue-rotate(0deg); cursor: pointer; }

.dk-form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--dk-gold) 50%), linear-gradient(135deg, var(--dk-gold) 50%, transparent 50%);
	background-position: calc(100% - 20px) center, calc(100% - 15px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* ==========================================================================
   Payment option toggle (Pay Booking Amount / Pay Full Amount)
   ========================================================================== */
.dk-pay-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 4px;
}
.dk-pay-options.dk-pay-options-single { grid-template-columns: 1fr; }
.dk-pay-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 14px 10px;
	border: 1px solid var(--dk-border);
	border-radius: 3px;
	background: var(--dk-bg-field);
	cursor: pointer;
	text-align: center;
}
.dk-pay-option input[type="radio"] {
	accent-color: var(--dk-gold);
	margin: 0 0 4px;
	width: 15px;
	height: 15px;
}
.dk-pay-option span {
	font-family: 'Cinzel', Georgia, serif;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--dk-cream);
}
.dk-pay-option em {
	font-style: normal;
	font-family: 'Cinzel', Georgia, serif;
	font-size: 15px;
	color: var(--dk-gold);
	letter-spacing: 0.02em;
}
.dk-pay-option:hover { border-color: var(--dk-gold); }
.dk-pay-option.dk-pay-option-selected {
	background: linear-gradient(180deg, rgba(217,181,106,0.18), rgba(184,134,47,0.1));
	border-color: var(--dk-gold-deep);
}
.dk-pay-option.dk-pay-option-selected span { color: var(--dk-gold-bright); }
.dk-pay-option.dk-pay-option-selected em { color: var(--dk-gold-bright); }

@media (max-width: 480px) {
	.dk-pay-options { grid-template-columns: 1fr; }
}

.dk-fee-row {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background: var(--dk-bg-field);
	border: 1px solid var(--dk-border-soft);
	padding: 14px 18px;
	border-radius: 3px;
}
.dk-fee-row span { font-style: italic; color: var(--dk-muted); }
.dk-fee-row strong { color: var(--dk-gold-bright); font-family: 'Cinzel', Georgia, serif; font-size: 18px; letter-spacing: 0.03em; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.dk-btn {
	font-family: 'Cinzel', Georgia, serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 15px 24px;
	border-radius: 3px;
	border: 1px solid transparent;
	cursor: pointer;
}
.dk-btn-primary {
	width: 100%;
	background: linear-gradient(180deg, var(--dk-gold-bright), var(--dk-gold-deep));
	color: #1a1207;
	border-color: var(--dk-gold-deep);
}
.dk-btn-primary:hover { background: linear-gradient(180deg, #f0dba0, var(--dk-gold)); }
.dk-btn-primary[disabled] { opacity: 0.55; cursor: not-allowed; }

.dk-btn-secondary {
	background: transparent;
	color: var(--dk-gold);
	border: 1px solid var(--dk-gold-deep);
}
.dk-btn-secondary:hover { background: rgba(217,181,106,0.08); }

.dk-btn-danger { background: var(--dk-danger-bg); color: var(--dk-danger); border-color: rgba(226,114,91,0.4); }
.dk-btn-small { padding: 8px 14px; font-size: 11px; }

/* ==========================================================================
   Messages
   ========================================================================== */
.dk-message { padding: 14px 16px; border-radius: 3px; margin-bottom: 20px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16px; border: 1px solid; }
.dk-message-error { background: var(--dk-danger-bg); color: #f0a894; border-color: rgba(226,114,91,0.4); }
.dk-message-success { background: var(--dk-success-bg); color: #b7d6a9; border-color: rgba(139,179,122,0.4); }

/* ==========================================================================
   Slot grid — styled like the zodiac accent badges
   ========================================================================== */
.dk-slot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 10px;
	margin-top: 8px;
}
.dk-slot-hint { color: var(--dk-muted); font-style: italic; font-size: 15px; grid-column: 1 / -1; }

.dk-slot {
	padding: 11px 6px;
	text-align: center;
	border: 1px solid var(--dk-border);
	border-radius: 3px;
	font-family: 'Cinzel', Georgia, serif;
	font-size: 12px;
	letter-spacing: 0.03em;
	cursor: pointer;
	background: var(--dk-bg-field);
	color: var(--dk-cream);
	user-select: none;
}
.dk-slot:hover { border-color: var(--dk-gold); }
.dk-slot.dk-slot-selected {
	background: linear-gradient(180deg, var(--dk-gold-bright), var(--dk-gold-deep));
	color: #1a1207;
	border-color: var(--dk-gold-deep);
}
.dk-slot.dk-slot-unavailable,
.dk-slot.dk-slot-booked,
.dk-slot.dk-slot-blocked,
.dk-slot.dk-slot-past {
	background: rgba(255,255,255,0.03);
	color: var(--dk-muted);
	border-color: var(--dk-border-soft);
	cursor: not-allowed;
	text-decoration: line-through;
}

.dk-slot-grid-manage .dk-slot.dk-slot-blocked { background: var(--dk-danger-bg); color: #f0a894; border-color: rgba(226,114,91,0.4); text-decoration: none; cursor: pointer; }
.dk-slot-grid-manage .dk-slot.dk-slot-available { cursor: pointer; text-decoration: none; }
.dk-slot-grid-manage .dk-slot.dk-slot-booked { background: var(--dk-purple-soft); color: #cbb8ea; border-color: rgba(75,46,131,0.6); text-decoration: none; cursor: not-allowed; }

/* ==========================================================================
   Manager portal
   ========================================================================== */
.dk-manager-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.dk-manager-header h2 { font-family: 'Cinzel', Georgia, serif; color: var(--dk-gold-bright); letter-spacing: 0.04em; margin-bottom: 2px; }

.dk-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 28px; }
.dk-stat-card { background: var(--dk-bg-field); border: 1px solid var(--dk-border-soft); border-radius: 4px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.dk-stat-card span { color: var(--dk-muted); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-family: 'Cinzel', Georgia, serif; }
.dk-stat-card strong { font-size: 26px; color: var(--dk-gold-bright); font-family: 'Cinzel', Georgia, serif; }

.dk-manager-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--dk-border-soft); }
.dk-tab-btn {
	background: none; border: none; padding: 10px 4px; margin-right: 20px;
	font-family: 'Cinzel', Georgia, serif; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--dk-muted); cursor: pointer; border-bottom: 2px solid transparent;
}
.dk-tab-btn.active { color: var(--dk-gold-bright); border-color: var(--dk-gold); }
.dk-tab-panel { display: none; }
.dk-tab-panel.active { display: block; }

.dk-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.dk-filter-bar select, .dk-filter-bar input {
	background: var(--dk-bg-field); border: 1px solid var(--dk-border); color: var(--dk-cream);
	padding: 9px 12px; border-radius: 3px; font-family: 'Cormorant Garamond', Georgia, serif;
}

.dk-table-wrap { overflow-x: auto; }
.dk-table { width: 100%; border-collapse: collapse; font-size: 15px; font-family: 'Cormorant Garamond', Georgia, serif; }
.dk-table th, .dk-table td { padding: 12px 14px; border-bottom: 1px solid var(--dk-border-soft); text-align: left; white-space: nowrap; }
.dk-table th { color: var(--dk-gold); font-family: 'Cinzel', Georgia, serif; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }

.dk-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-family: 'Cinzel', Georgia, serif; letter-spacing: 0.05em; text-transform: uppercase; }
.dk-badge-paid, .dk-badge-confirmed { background: var(--dk-success-bg); color: #b7d6a9; }
.dk-badge-pending { background: rgba(217,181,106,0.14); color: var(--dk-gold); }
.dk-badge-failed, .dk-badge-cancelled { background: var(--dk-danger-bg); color: #f0a894; }

.dk-pagination { display: flex; gap: 6px; margin-top: 20px; }
.dk-pagination a { padding: 7px 13px; border: 1px solid var(--dk-border); border-radius: 3px; text-decoration: none; color: var(--dk-cream); font-family: 'Cinzel', Georgia, serif; font-size: 12px; }
.dk-pagination a.active { background: linear-gradient(180deg, var(--dk-gold-bright), var(--dk-gold-deep)); color: #1a1207; border-color: var(--dk-gold-deep); }