/* Sheffield Grand Mosque: presentation-only layer, scoped to plugin markup.
 * Palette supplied by the owner. No external fonts or invented logo assets.
 */
.sgm-booking-page, .sgm-room-grid, .sgm-empty-state,
.sgm-calendar-section, .rrsm-cal-widget, .rrsm-modal-overlay,
.rrsm-cal-disabled, .rrsm-cal-empty, body.sgm-admin {
	--sgm-teal: #5AA58F;
	--sgm-cream: #F8E5D9;
	--sgm-yellow: #D7AB27;
	--sgm-brown: #935124;
	--sgm-gold: #DA9D3C;
	--sgm-orange: #E7592F;
	--sgm-dark: #431A08;
	--sgm-warm: #845B2F;
	--sgm-line: rgba(132, 91, 47, .25);
	--sgm-shadow: 0 8px 28px rgba(67, 26, 8, .08);
	color: var(--sgm-dark);
}
.sgm-booking-page, .sgm-room-grid, .sgm-calendar-section,
.sgm-empty-state, .rrsm-cal-widget, .rrsm-modal-overlay {
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.6;
}
.sgm-booking-page *, .sgm-room-grid * { box-sizing: border-box; }
.sgm-booking-page { max-width: 1160px; margin: 0 auto; padding: 24px 16px 48px; }
.sgm-page-intro {
	position: relative; overflow: hidden; padding: 44px 40px; margin-bottom: 32px;
	background-color: #fff;
	background-image: radial-gradient(ellipse at top left, rgba(248, 229, 217, .42), transparent 65%), linear-gradient(130deg, rgba(248, 229, 217, .1), rgba(248, 229, 217, .26));
	border: 0; border-radius: 0;
}
.sgm-page-intro::before {
	/* Decorative rosette inspired by the reference, not an official logo. */
	content: ""; display: block; width: 28px; height: 28px; margin-bottom: 16px;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3l4 5 6 1-1 7 1 7-6 1-4 5-4-5-6-1 1-7-1-7 6-1z' fill='none' stroke='%23DA9D3C' stroke-width='2'/%3E%3Cpath d='M16 10l2 3 3 3-3 3-2 3-2-3-3-3 3-3z' fill='none' stroke='%23D7AB27' stroke-width='1.5'/%3E%3C/svg%3E");
}
.sgm-page-intro::after {
	content: ""; position: absolute; top: -50px; right: -45px; width: 220px; height: 220px;
	border: 4px double rgba(132, 91, 47, .08); transform: rotate(45deg); pointer-events: none;
}
.sgm-eyebrow { display: block; font-size: .76rem; font-weight: 750; text-transform: uppercase; letter-spacing: .14em; color: var(--sgm-brown); }
.sgm-page-intro h1, .sgm-calendar-section h2, .sgm-room-heading h2 {
	font-family: Georgia, "Times New Roman", serif; color: var(--sgm-dark); line-height: 1.2;
}
.sgm-page-intro h1 { margin: 12px 0 24px; max-width: 850px; font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 700; text-transform: uppercase; letter-spacing: -.025em; }
.sgm-page-intro p { max-width: 840px; margin: 0; color: var(--sgm-warm); font-family: Georgia, "Times New Roman", serif; font-size: 1rem; line-height: 1.75; }
.sgm-room-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.sgm-room-card {
	display: flex; flex-direction: column; min-width: 0; overflow: hidden;
	background: #fff; border: 1px solid var(--sgm-line); border-radius: 5px;
	box-shadow: 0 3px 12px rgba(67, 26, 8, .05);
}
.sgm-room-gallery { background: var(--sgm-cream); border-bottom: 3px solid var(--sgm-gold); }
.sgm-room-gallery > .sgm-room-cover { display: block; width: 100%; height: 270px; object-fit: cover; margin: 0; }
.sgm-room-placeholder { display: grid !important; place-items: center; position: relative; overflow: hidden; }
.sgm-room-placeholder::before, .sgm-room-placeholder::after {
	content: ""; position: absolute; width: 105px; height: 105px; border: 2px solid var(--sgm-gold);
}
.sgm-room-placeholder::after { transform: rotate(45deg); }
.sgm-room-placeholder span { color: var(--sgm-brown); letter-spacing: .15em; font-weight: 700; }
.sgm-room-thumbnails { display: flex; gap: 8px; padding: 10px; }
.sgm-room-thumbnails img { width: calc(25% - 6px); height: 64px; object-fit: cover; border-radius: 5px; border: 1px solid var(--sgm-line); }
.sgm-room-content { display: flex; flex-direction: column; flex: 1; padding: 25px; }
.sgm-room-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.sgm-room-heading h2 { font-size: 1.65rem; margin: 0; }
.sgm-room-capacity { padding: 4px 10px; border-radius: 30px; background: var(--sgm-cream); border: 1px solid var(--sgm-gold); color: var(--sgm-dark); font-size: .8rem; font-weight: 650; }
.sgm-room-description { color: var(--sgm-warm); margin: 16px 0; overflow-wrap: anywhere; font-family: Georgia, "Times New Roman", serif; }
.sgm-room-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 0; margin: 0; border-top: 1px solid var(--sgm-line); border-bottom: 1px solid var(--sgm-line); }
.sgm-room-specs dt { color: var(--sgm-brown); text-transform: uppercase; font-weight: 700; font-size: .72rem; letter-spacing: .04em; }
.sgm-room-specs dd { margin: 5px 0 0; font-size: .88rem; overflow-wrap: anywhere; }
.sgm-room-facilities h3 { color: var(--sgm-brown); font-size: .85rem; margin: 18px 0 8px; }
.sgm-room-facilities ul { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 0 0 20px; list-style: none; }
.sgm-room-facilities li { font-size: .84rem; }
.sgm-room-facilities li::before { content: "✓"; color: var(--sgm-brown); margin-right: 6px; }
.sgm-room-booking-row { margin-top: auto; padding-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; border-top: 1px solid var(--sgm-line); }
.sgm-room-rate { font-size: .83rem; color: var(--sgm-warm); }
.sgm-room-rate strong { color: var(--sgm-dark); font-size: 1.15rem; }
.sgm-room-book-button {
	display: inline-flex; gap: 12px; align-items: center; justify-content: center; min-height: 44px;
	padding: 10px 17px; background: var(--sgm-teal); color: var(--sgm-dark);
	border: 1px solid var(--sgm-teal); border-radius: 3px; font-weight: 650; font-size: .85rem; text-decoration: none;
}
.sgm-room-book-button:hover { background: var(--sgm-yellow); border-color: var(--sgm-yellow); color: var(--sgm-dark); text-decoration: none; }
.sgm-calendar-section { margin-top: 40px; padding: 30px; background: #fff; border: 1px solid var(--sgm-line); border-top: 2px solid var(--sgm-gold); border-radius: 5px; box-shadow: 0 3px 12px rgba(67, 26, 8, .05); }
.sgm-calendar-section h2 { margin: 9px 0; font-size: 1.6rem; font-weight: 700; text-transform: uppercase; }
.sgm-calendar-section > p { color: var(--sgm-warm); margin: 0 0 24px; }
.sgm-empty-state, div.rrsm-cal-disabled, div.rrsm-cal-empty { padding: 28px; background: var(--sgm-cream); border: 1px solid var(--sgm-gold); border-radius: 12px; }
div.rrsm-cal-disabled a, div.rrsm-cal-empty a { color: var(--sgm-brown); text-decoration: underline; }
/* More-specific selectors override the retained calendar's inline CSS.
 * !important is only needed for cells already reset with !important.
 */
.rrsm-cal-widget .rrsm-cal-controls { flex-wrap: wrap; gap: 12px; }
.rrsm-cal-widget .rrsm-cal-prop-label { color: var(--sgm-brown); }
.rrsm-cal-widget .rrsm-cal-prop-select { min-height: 44px; border-color: var(--sgm-line); color: var(--sgm-dark); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23935124' stroke-width='2' fill='none'/%3E%3C/svg%3E"); }
.rrsm-cal-widget .rrsm-cal-nav { background: var(--sgm-cream); border-color: var(--sgm-line); }
.rrsm-cal-widget .rrsm-cal-nav-label { color: var(--sgm-dark); font-family: Georgia, serif; }
.rrsm-cal-widget .rrsm-cal-nav-btn { background: #fff; color: var(--sgm-brown); border-color: var(--sgm-brown); min-height: 44px; }
.rrsm-cal-widget .rrsm-cal-nav-btn:hover:not(:disabled) { background: var(--sgm-teal); color: var(--sgm-dark); border-color: var(--sgm-teal); }
.rrsm-cal-widget .rrsm-cal-body { border-color: var(--sgm-line); }
.rrsm-cal-widget .rrsm-cal-table thead th { background: var(--sgm-cream) !important; color: var(--sgm-brown); border-color: var(--sgm-line); }
.rrsm-cal-widget .rrsm-cal-table td { border-color: var(--sgm-line); }
.rrsm-cal-widget .rrsm-cal-table td.rrsm-day-available { background: var(--sgm-teal) !important; }
.rrsm-cal-widget .rrsm-day-available .rrsm-cal-day-link { color: var(--sgm-dark); }
.rrsm-cal-widget .rrsm-day-available .rrsm-cal-day-link:hover { background: var(--sgm-yellow); color: var(--sgm-dark); }
.rrsm-cal-widget .rrsm-cal-table td.rrsm-day-booked { background: var(--sgm-cream) !important; box-shadow: inset 0 -4px var(--sgm-orange); }
.rrsm-cal-widget .rrsm-day-booked .rrsm-cal-day { color: var(--sgm-brown); }
.rrsm-cal-widget .rrsm-cal-table td.rrsm-day-maintenance { background: var(--sgm-warm) !important; }
.rrsm-cal-widget .rrsm-day-maintenance .rrsm-cal-day { color: var(--sgm-cream); }
.rrsm-cal-widget .rrsm-cal-table td.rrsm-day-past { background: var(--sgm-cream) !important; }
.rrsm-cal-widget .rrsm-day-past .rrsm-cal-day { color: var(--sgm-warm); }
.rrsm-cal-widget .rrsm-day-today { outline-color: var(--sgm-brown); }
.rrsm-cal-widget .rrsm-cal-table td.rrsm-day-empty { background: #fff !important; }
.rrsm-cal-widget .rrsm-cal-loading { color: var(--sgm-brown); }
.rrsm-cal-widget .rrsm-cal-legend { color: var(--sgm-warm); }
.rrsm-cal-widget .sgm-legend-available { background: var(--sgm-teal); border-color: var(--sgm-teal); }
.rrsm-cal-widget .sgm-legend-booked { background: var(--sgm-cream); border-color: var(--sgm-orange); border-bottom-width: 4px; }
.rrsm-cal-widget .sgm-legend-unavailable { background: var(--sgm-warm); border-color: var(--sgm-warm); }
.rrsm-modal-overlay[role="dialog"] { background: rgba(67, 26, 8, .65); }
.rrsm-modal-overlay .rrsm-modal-box { background: #fff; border-top: 5px solid var(--sgm-teal); box-shadow: 0 16px 60px rgba(67, 26, 8, .25); }
.rrsm-modal-overlay .rrsm-modal-title { color: var(--sgm-dark); font-family: Georgia, serif; }
.rrsm-modal-overlay .rrsm-modal-close { color: var(--sgm-warm); }
.rrsm-modal-overlay .rrsm-modal-close:hover { color: var(--sgm-brown); background: var(--sgm-cream); }
.rrsm-modal-overlay .rrsm-modal-prop-name { color: var(--sgm-dark); }
.rrsm-modal-overlay .rrsm-modal-arr-disp, .rrsm-modal-overlay .rrsm-modal-row label { color: var(--sgm-brown); }
.rrsm-modal-overlay .rrsm-modal-req { color: var(--sgm-brown); }
.rrsm-modal-overlay .rrsm-modal-row input, .rrsm-modal-overlay .rrsm-modal-row textarea { color: var(--sgm-dark); border-color: var(--sgm-line); }
.rrsm-modal-overlay .rrsm-modal-err { background: var(--sgm-cream); color: var(--sgm-dark); border-color: var(--sgm-orange); border-left-width: 4px; }
.rrsm-modal-overlay .rrsm-modal-submit { background: var(--sgm-teal); color: var(--sgm-dark); border: 1px solid var(--sgm-teal); }
.rrsm-modal-overlay .rrsm-modal-submit:hover:not(:disabled) { background: var(--sgm-yellow); color: var(--sgm-dark); border-color: var(--sgm-yellow); }
.rrsm-modal-overlay .rrsm-modal-success-icon { background: var(--sgm-teal); color: var(--sgm-dark); }
.rrsm-modal-overlay .rrsm-modal-success h4 { color: var(--sgm-dark); }
.rrsm-modal-overlay .rrsm-modal-success-text { color: var(--sgm-warm); }
.rrsm-modal-overlay .rrsm-modal-close-btn { background: var(--sgm-cream); color: var(--sgm-dark); border-color: var(--sgm-gold); }
.rrsm-modal-overlay .rrsm-modal-close-btn:hover { background: var(--sgm-yellow); color: var(--sgm-dark); }
.rrsm-modal-overlay .rrsm-modal-price-box { background: var(--sgm-cream); border-color: var(--sgm-gold); }
.rrsm-modal-overlay .rrsm-modal-price-calculating, .rrsm-modal-overlay .rrsm-modal-price-row,
.rrsm-modal-overlay .rrsm-modal-price-nights-label, .rrsm-modal-overlay .rrsm-modal-price-unavailable { color: var(--sgm-warm); }
.rrsm-modal-overlay .rrsm-modal-price-grand-total { color: var(--sgm-dark); }
.rrsm-modal-overlay .rrsm-modal-price-total-row { border-color: var(--sgm-line); }
.rrsm-modal-overlay .rrsm-modal-price-spinner { border-color: var(--sgm-gold); border-top-color: var(--sgm-brown); }
.sgm-booking-page a:focus-visible, .sgm-room-grid a:focus-visible,
.rrsm-cal-widget button:focus-visible, .rrsm-cal-widget a:focus-visible,
.rrsm-cal-widget select:focus-visible, .rrsm-modal-overlay button:focus-visible,
.rrsm-modal-overlay .rrsm-modal-row input:focus-visible, .rrsm-modal-overlay .rrsm-modal-row textarea:focus-visible {
	outline: 3px solid var(--sgm-dark); outline-offset: 3px; border-color: var(--sgm-gold);
	box-shadow: 0 0 0 2px var(--sgm-cream);
}
/* Final colour balance: retain all layout dimensions and structures. */
.sgm-page-intro { background-image: linear-gradient(130deg, rgba(248, 229, 217, .12), rgba(248, 229, 217, .06)); }
.sgm-page-intro::after { border-color: rgba(218, 157, 60, .2); }
.sgm-room-facilities h3 { color: var(--sgm-dark); }
.sgm-room-gallery { background-color: #fff; }
.sgm-room-capacity { background: #fff; border-color: var(--sgm-gold); }
.rrsm-cal-widget .rrsm-cal-nav { background: #fff; border-color: var(--sgm-gold); }
.rrsm-cal-widget .rrsm-cal-table thead th { background: #fff !important; color: var(--sgm-dark); border-bottom-color: var(--sgm-gold); }
.rrsm-cal-widget .rrsm-cal-prop-label, .rrsm-modal-overlay .rrsm-modal-row label { color: var(--sgm-dark); }
.rrsm-cal-widget .rrsm-cal-prop-select,
.rrsm-modal-overlay .rrsm-modal-row input,
.rrsm-modal-overlay .rrsm-modal-row textarea { border-color: var(--sgm-warm); }
.rrsm-modal-overlay .rrsm-modal-price-box { background: #fff; border-color: var(--sgm-gold); }
.rrsm-modal-overlay .rrsm-modal-price-grand-total { font-weight: 750; }
.rrsm-cal-widget .rrsm-cal-nav-btn { border-color: var(--sgm-gold); color: var(--sgm-dark); }
@media (max-width: 760px) {
	.sgm-room-grid { grid-template-columns: 1fr; }
	.sgm-page-intro { padding: 30px 22px; }
	.sgm-calendar-section { padding: 22px 14px; }
	.sgm-room-gallery > .sgm-room-cover { height: 240px; }
}
@media (max-width: 400px) {
	.sgm-booking-page { padding: 14px 8px 30px; }
	.sgm-room-content { padding: 20px; }
	.sgm-room-specs { grid-template-columns: 1fr; }
	.sgm-room-book-button { width: 100%; }
	.rrsm-cal-widget .rrsm-cal-nav { padding: 10px 8px; }
	.rrsm-cal-widget .rrsm-cal-nav-btn { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.sgm-room-book-button, .rrsm-cal-widget button, .rrsm-cal-widget a, .rrsm-modal-overlay button { transition: none; }
}