/* Devonshire Grove — guest reservation-management page overrides.
 *
 * Layered on top of the plugin's manage-page.css (which ships a dark
 * theme for the Cococure venues). Re-skins the same elements with the
 * cream / teal / Source-Serif palette used across the rest of the DG
 * site. Loaded only on pages containing the [coco_reservation_manage]
 * shortcode, so it never leaks elsewhere.
 */

/* ── Page wash ─────────────────────────────────────────── */
body:has(.coco-manage-wrap) {
	background: #F4EBE0;
}

.coco-manage-wrap {
	max-width: 580px;
	margin: 48px auto;
	padding: 0 20px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: #2C3E3D;
}

/* ── Loading state ─────────────────────────────────────── */
.coco-manage-loading {
	text-align: center;
	padding: 80px 20px;
}
.coco-manage-spinner {
	border: 3px solid rgba(74, 155, 151, 0.18);
	border-top-color: #4A9B97;
}
.coco-manage-loading p {
	color: #8B8576;
	font-size: 14px;
}

.coco-manage-invalid {
	background: #fff;
	border: 1px solid #D9CDB8;
	border-radius: 4px;
	color: #2C3E3D;
	font-size: 15px;
	padding: 48px 24px;
}

/* ── Main card ─────────────────────────────────────────── */
.coco-manage-card {
	background: #fff;
	border: 1px solid #D9CDB8;
	border-radius: 4px;
	padding: 40px 32px;
	box-shadow: 0 4px 24px rgba(74, 64, 41, 0.06);
}

.coco-manage-title {
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight: 400;
	font-size: 28px;
	color: #4A9B97;
	margin: 0 0 6px;
	text-align: center;
	line-height: 1.15;
}

.coco-manage-ref {
	text-align: center;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #8C6F45;
	margin: 0 0 26px;
}

/* ── Status badge — softened DG palette ───────────────── */
.coco-manage-status {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	padding: 5px 14px;
	border-radius: 20px;
	margin-bottom: 24px;
}
.coco-manage-status--confirmed {
	color: #1F6B47;
	background: #DEF1E6;
	border: 1px solid #BFE0C9;
}
.coco-manage-status--pending {
	color: #8C6F45;
	background: #FAEFD2;
	border: 1px solid #E8D9AB;
}
.coco-manage-status--cancelled {
	color: #B23A48;
	background: #F2DCDF;
	border: 1px solid #E3BFC3;
}
.coco-manage-status--arrived {
	color: #2C7A75;
	background: #E2F0EE;
	border: 1px solid #C0DEDB;
}
.coco-manage-status--completed {
	color: #6B5B8C;
	background: #ECE6F5;
	border: 1px solid #D3C9E6;
}
.coco-manage-status--no_show {
	color: #5C6766;
	background: #ECE4D2;
	border: 1px solid #D9CDB8;
}

/* ── Summary rows ──────────────────────────────────────── */
.coco-manage-summary {
	background: #FAF4E9;
	border: 1px solid #E8DBC2;
	border-radius: 3px;
	padding: 4px 0;
	margin-bottom: 24px;
}
.coco-manage-row {
	padding: 12px 20px;
	border-bottom: 1px solid rgba(140, 111, 69, 0.12);
}
.coco-manage-row:last-child {
	border-bottom: none;
}
.coco-manage-label {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8C6F45;
}
.coco-manage-value {
	font-size: 15px;
	color: #2C3E3D;
	font-weight: 500;
}

/* ── Deposit block ─────────────────────────────────────── */
.coco-manage-deposit {
	background: #FAF4E9;
	border: 1px solid #E8DBC2;
	border-radius: 3px;
	padding: 18px 20px;
	margin-bottom: 24px;
}
.coco-manage-deposit-badge {
	color: #8C6F45;
	background: #fff;
	border: 1px solid #E8DBC2;
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 10px;
	letter-spacing: 0.16em;
	font-weight: 700;
	margin-bottom: 8px;
}
.coco-manage-deposit-amount {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 24px;
	font-weight: 600;
	color: #4A9B97;
	margin-bottom: 4px;
}
.coco-manage-deposit-status {
	color: #8B8576;
	font-size: 12px;
}

/* ── Buttons ──────────────────────────────────────────── */
.coco-manage-btn {
	padding: 14px 24px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	border-radius: 3px;
	font-family: inherit;
	transition: background 0.15s, border-color 0.15s, transform 0.05s;
}

.coco-manage-btn--primary {
	background: #4A9B97;
	color: #fff;
	border: 1px solid #4A9B97;
}
.coco-manage-btn--primary:hover:not(:disabled) {
	background: #3D8682;
	border-color: #3D8682;
	transform: none;
}

.coco-manage-btn--outline {
	background: transparent;
	color: #4A9B97;
	border: 1px solid #4A9B97;
}
.coco-manage-btn--outline:hover:not(:disabled) {
	background: rgba(74, 155, 151, 0.08);
}

.coco-manage-btn--danger {
	background: transparent;
	color: #B23A48;
	border: 1px solid rgba(178, 58, 72, 0.4);
}
.coco-manage-btn--danger:hover:not(:disabled) {
	background: rgba(178, 58, 72, 0.06);
	border-color: #B23A48;
}

/* ── Error notices ─────────────────────────────────────── */
.coco-manage-error {
	background: #FBEEEB;
	border: 1px solid #E5C5C0;
	border-radius: 3px;
	color: #B23A48;
	font-size: 14px;
}

/* ── Edit form ─────────────────────────────────────────── */
.coco-manage-edit-title {
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight: 400;
	color: #4A9B97;
	font-size: 22px;
	margin: 0 0 18px;
}

.coco-manage-field label {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8C6F45;
	font-weight: 700;
}

.coco-manage-field select,
.coco-manage-field input[type="date"] {
	background: #fff;
	border: 1px solid #D9CDB8;
	border-radius: 3px;
	color: #2C3E3D;
	font-family: inherit;
	font-size: 14px;
	padding: 12px 14px;
	box-sizing: border-box;
}
.coco-manage-field select {
	/* Replace the arrow icon to match the cream palette. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238C6F45' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
}
.coco-manage-field select:focus,
.coco-manage-field input[type="date"]:focus {
	border-color: #4A9B97;
}
.coco-manage-field-hint {
	color: #8B8576;
	font-size: 12px;
}

/* ── Modal ─────────────────────────────────────────────── */
.coco-manage-overlay {
	background: rgba(74, 64, 41, 0.5);
}
.coco-manage-modal {
	background: #fff;
	border: 1px solid #D9CDB8;
	border-radius: 4px;
}
.coco-manage-modal-title {
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight: 400;
	color: #4A9B97;
	font-size: 22px;
}
.coco-manage-modal-text {
	color: #3A2E24;
	font-size: 14px;
}
.coco-manage-modal-warning {
	background: #FBEEEB;
	border: 1px solid #E5C5C0;
	color: #B23A48;
	border-radius: 3px;
	font-size: 13px;
}

.coco-manage-other-text textarea {
	background: #fff;
	border: 1px solid #D9CDB8;
	color: #2C3E3D;
	border-radius: 3px;
	font-family: inherit;
	font-size: 14px;
}
.coco-manage-other-text textarea:focus {
	border-color: #4A9B97;
}
.coco-manage-other-text textarea::placeholder {
	color: #8B8576;
}

/* ── Cancelled confirmation ────────────────────────────── */
.coco-manage-cancelled-icon {
	color: #B23A48;
	background: #F2DCDF;
	border: 2px solid #E3BFC3;
}
.coco-manage-cancelled-confirm h3 {
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight: 400;
	color: #4A9B97;
	font-size: 22px;
}
.coco-manage-cancelled-confirm p {
	color: #3A2E24;
	font-size: 14px;
}
.coco-manage-refund-info {
	background: #FAF4E9;
	border: 1px solid #E8DBC2;
	color: #2C3E3D;
	border-radius: 3px;
	font-size: 14px;
}

/* ── Inline loading ────────────────────────────────────── */
.coco-manage-inline-loading {
	color: #8B8576;
	font-size: 13px;
}