@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');.key-offerings {
  padding: 2rem;
  margin-bottom: 2rem;
  background-color: #fafafa;
  border-radius: 10px;
  text-align: center;
}

.key-offerings h2 {
  margin-bottom: 1rem;
  font-size: 2rem;
}

.key-offerings p {
  max-width: 800px;
  margin: 0 auto 2rem;
  text-align: justify;
}

.offerings-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.offering-card {
  background-color: white;
  padding: 1.5rem;
  width: 300px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.offering-card h3 {
  text-align: center;
  margin-bottom: 0.5rem;
  color: #005588;
}

.offering-card p {
  text-align: justify;
}

.news-section {
  background-color: #eee;
  padding: 2rem 0;
  margin-bottom: 2rem;
}

.news-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: #222;
}

.news-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.news-card {
  background-color: #fff;
  padding: 1.5rem;
  width: 300px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.news-card h3 {
  text-align: center;
  margin-bottom: 0.5rem;
  color: #c00;
}

.news-card p {
  text-align: justify;
  color: #333;
}

.news-section h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}

.latest-news h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}


.intro {
  background: url('/images/BRGB_Logo.jpeg') center center / cover no-repeat;
  position: relative;
  padding: 6rem 2rem;
  color: white;
}

.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.intro h1,
.intro p {
  position: relative;
  z-index: 2;
  text-align: center;
}

.intro h1 {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 1.2rem;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

.intro p {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 1.6;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}


.events-page {
  padding: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.events-page h1 {
  text-align: center;
  margin-bottom: 2rem;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.event-card {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 1.5rem;
  background-color: #fafafa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.event-card h2 {
  margin-top: 0;
  color: #333;
}

.error {
  color: red;
  text-align: center;
  margin-bottom: 2rem;
}

.event-description {
  margin-top: 1rem;
  line-height: 1.5;
}

.event-description h1,
.event-description h2,
.event-description h3 {
  margin: 0.5rem 0;
}

.event-description ul {
  padding-left: 1.2rem;
  list-style: disc;
}

.event-btn {
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 600;
}

.register-btn {
  background-color: #007bff;
  color: white;
}

.register-btn:hover {
  background-color: #0056b3;
}

.waitlist-btn {
  background-color: #ff9800;
  color: white;
}

.waitlist-btn:hover {
  background-color: #e68900;
}


/* --- additions for sections & "Next" highlight --- */
.events-section {
  margin-bottom: 3rem;
}

.events-title {
  text-align: center;
  margin-bottom: 2rem;
}

.events-subtitle {
  text-align: center;
  margin: 0 0 1.5rem 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: #333;
}

.next-event {
  position: relative;
  border-color: #0b6bf2;
  box-shadow: 0 4px 10px rgba(11, 107, 242, 0.15);
}

.next-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  background: #0b6bf2;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(11, 107, 242, 0.3);
}

.event-dates {
  font-weight: 600;
  margin: 0.25rem 0 0;
}

.event-when {
  margin: 0.15rem 0 0.6rem;
  font-size: 0.95rem;
  opacity: 0.85;
}

.full-note {
  margin-top: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  background: #fff5e6;
  border: 1px solid #ffd7a8;
  color: #8a5300;
  font-weight: 600;
}

.closed-note {
  margin-top: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  background: #eef4ff;
  border: 1px solid #cfe0ff;
  color: #1b3a77;
  font-weight: 600;
}
/* General page styling */
.results-page {
  padding: 2rem;
  font-family: sans-serif;
}

h1 {
  margin-bottom: 1rem;
}

/* Tabs */
.results-tabs {
  display: flex;
  margin-bottom: 1rem;
}

.results-tab {
  padding: 0.5rem 1rem;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #f2f2f2;
  margin-right: 0.5rem;
  border-radius: 4px 4px 0 0;
  font-weight: bold;
}

.results-tab.active {
  background-color: white;
  border-bottom: none;
}

.results-tab-content {
  border: 1px solid #ccc;
  padding: 1rem;
  background-color: white;
  border-radius: 0 4px 4px 4px;
}

/* Filters toolbar */
.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem; /* row gap, col gap */
  margin-bottom: 1rem;
  align-items: center;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-group label {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap; /* keep label on one line */
}

.filter-input,
.filter-select {
  height: 2rem;
  min-width: 120px;
  padding: 0 0.5rem;
  font-size: 0.9rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  line-height: 1.2rem;
  box-sizing: border-box;
}

/* Tables */
.table-container {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

th,
td {
  border: 1px solid #ccc;
  padding: 0.4rem 0.6rem;
  text-align: center;
  font-size: 0.9rem;
}

th {
  background-color: #f0f0f0;
}

tr:nth-child(even) {
  background-color: #fafafa;
}
.clubs-page {
  /* was 1100px */
  max-width: min(1400px, 96vw);
  margin: 0 auto;
  padding: 16px 12px;
}
.clubs-page h2 { margin: 0 0 12px; }

.clubs-controls {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto auto auto;
  gap: 8px;
  margin-bottom: 12px;
}
.clubs-controls input, .clubs-controls select, .clubs-controls button {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}
.clubs-controls button {
  background: #1d4ed8; color: #fff; border-color: #1d4ed8; font-weight: 700; cursor: pointer;
}
.clubs-controls button[type="button"] { background: #6b7280; border-color: #6b7280; }
.clubs-controls button:hover { filter: brightness(0.98); }

.clubs-error { color: #b42318; }

.clubs-layout {
  /* was 1.1fr 1fr */
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) 1.1fr;
  gap: 12px;
  align-items: stretch;
}
.clubs-map { background: #fff; border: 1px solid #eee; border-radius: 10px; overflow: hidden; }
.clubs-list {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  /* was overflow: hidden; */
  overflow: auto;
  /* match the map height for a clean side-by-side look */
  max-height: 420px;
}

.clubs-list table { width: 100%; border-collapse: collapse; }
.clubs-list th, .clubs-list td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
  white-space: nowrap;
}
.clubs-list thead th {
  background: #fafafe;
  color: #666;
  font-weight: 700;
  position: sticky;
  top: 0;
}

/* Ellipsis long club names so columns don’t force the grid narrower */
.clubs-list td:first-child {
  max-width: 420px;          /* adjust as you like */
  overflow: hidden;
  text-overflow: ellipsis;
}

.club-popup a { color: #1d4ed8; text-decoration: none; }
.club-popup a:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .clubs-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .clubs-controls { grid-template-columns: 1fr 1fr 1fr; }
  .clubs-controls input:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .clubs-layout {
    grid-template-columns: minmax(420px, 0.8fr) 1.2fr;
  }
}
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
:root { --line:#e2e6ee; --text:#1d2433; --bg:#ffffff; --overlay:#0b0b0b; }

.muted { color:#6b7280; }

.gallery-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gallery-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.gallery-bar input, .gallery-bar select {
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
  background:#fff;
}
.gallery-switch { display:inline-flex; gap:8px; align-items:center; padding-left:8px; }

/* Masonry grid */
.masonry { column-count:4; column-gap:12px; }
@media (max-width:1200px){ .masonry{ column-count:3; } }
@media (max-width:800px){ .masonry{ column-count:2; } }
@media (max-width:520px){ .masonry{ column-count:1; } }

.masonry-item {
  break-inside: avoid;
  display:block;
  margin:0 0 12px;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  width:100%;
}
.masonry-item img {
  width:100%; display:block; border-radius:10px; background:#f4f6fa;
}

/* Compact mode: fill tiles (crops edges), removes any perceived empty/black borders */
.masonry--compact .masonry-item img {
  aspect-ratio: 4 / 3;   /* uniform tiles */
  object-fit: cover;     /* fills, cropping edges */
}

/* ---------- Lightbox ---------- */
.lb {
  position: fixed; inset:0;
  background: rgba(0,0,0,.9);
  display:flex; align-items:center; justify-content:center;
  z-index: 1000;
}
.lb-fig { margin:0; max-width:95vw; max-height:92vh; display:grid; gap:8px; }
.lb-img {
  max-width:95vw; max-height:85vh;
  width:auto; height:auto;
  object-fit: contain;           /* no letterbox cropping in lightbox */
  border-radius:10px;
  background: #111;              /* subtle neutral around transparent PNGs */
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.lb-cap { color:#e8e8e8; font-size:.95rem; text-align:center; }

.lb-close {
  position:absolute; top:14px; right:16px;
  font-size:28px; line-height:28px;
  width:38px; height:38px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.4); color:#fff; cursor:pointer;
}
.lb-nav {
  position:absolute; top:50%; transform: translateY(-50%);
  width:44px; height:44px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35); color:#fff; font-size:28px; line-height:44px;
  cursor:pointer;
}
.lb-prev { left:14px; }
.lb-next { right:14px; }
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.12); }
/* -------------------------------
   Shop page – variables & base
-------------------------------- */
:root {
  --primary: #0b6bf2;
  --line: #e2e6ee;
  --text: #1d2433;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(20,30,55,.05);
}

/* Buttons */
.btn { font-weight: 700; cursor: pointer; }
.btn-primary {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  border-radius: 10px;
  padding: 10px 12px;
}
.btn-primary:hover { filter: brightness(0.95); }
.btn-primary:focus { outline: 2px solid rgba(11,107,242,.3); outline-offset: 2px; }
/* Ensure the CTA has a coloured background and visible text */
.prod-actions .btn.btn-primary {
  background: var(--primary, #004080);
  color: #fff;
  border-color: var(--primary, #004080);
}

/* Utility */
.muted { color: #6b7280; font-weight: 500; }

/* -------------------------------
   Header & search
-------------------------------- */
.shop { max-width: 1200px; margin: 0 auto; }
.shop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.shop-search {
  width: min(360px, 50%);
  border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; background:#fff;
}

/* -------------------------------
   Filters bar
-------------------------------- */
.shop-filters { padding: 12px; margin-bottom: 12px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr auto 1fr auto; gap: 10px; align-items: end; }
@media (max-width: 900px) {
  .f-row { grid-template-columns: 1fr 1fr; }
}
.f-field { display: grid; gap: 6px; }
.f-field > span { font-size: .85rem; color: #505666; }
.f-field select, .f-field input[type="number"] {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff;
}
.f-price .price-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.f-check { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.f-clear { align-self: end; }

/* -------------------------------
   Grid of products
-------------------------------- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* -------------------------------
   Product card
-------------------------------- */
.product-card { display: grid; grid-template-rows: auto 1fr; gap: 10px; padding: 12px; }
.product-card * { box-sizing: border-box; }
.product-card { overflow: hidden; } /* prevents inputs from bleeding out on small cards */

.prod-body { display: grid; gap: 8px; }
.prod-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.prod-title { margin: 0; font-size: 1.05rem; color: var(--text); }
.prod-price { font-weight: 700; }

.prod-desc { margin: 0; color: #444; font-size: .95rem; }

.prod-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 520px) { .prod-options { grid-template-columns: 1fr 1fr; } }
.opt { display: grid; gap: 4px; }
.opt > span { font-size: .85rem; color: #505666; }
.opt select, .opt input[type="number"] {
  border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; background: #fff;
}
.opt-qty input[type="number"] { max-width: 100px; }

/* Embroidery */
.prod-emb { display: grid; gap: 4px; }
.prod-emb label { display: grid; gap: 4px; }
.prod-emb input[type="text"] {
  border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; background: #fff;
  width: 100%; max-width: 100%;
}
.emb-help { display: flex; gap: 10px; justify-content: space-between; font-size: .85rem; }

/* Actions */
.prod-actions { margin-top: 6px; }
.prod-actions .btn {
  border: 1px solid var(--line);
  background: #fff; border-radius: 10px; padding: 10px 12px; cursor: pointer; font-weight: 700;
}
.prod-actions .btn:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(11,107,242,.12); }

/* -------------------------------
   Media / Carousel
-------------------------------- */
.carousel { aspect-ratio: 4/3; background: #fafafa; border-radius: 10px; overflow: hidden; position: relative; }
.carousel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-controls {
  position: absolute; inset: auto 8px 8px 8px; display: flex; justify-content: space-between; gap: 8px;
}
.carousel-controls button {
  border: 1px solid rgba(0,0,0,.15); background: rgba(255,255,255,.9);
  padding: 4px 10px; border-radius: 8px; cursor: pointer;
}
.carousel-thumbs {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  display: flex; gap: 6px; justify-content: center; pointer-events: none;
}
.thumb { pointer-events: auto; border: 1px solid rgba(0,0,0,.1); background: rgba(255,255,255,.95); padding: 0; border-radius: 6px; cursor: pointer; }
.thumb img { display: block; width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.thumb.active { outline: 2px solid var(--primary); }

/* -------------------------------
   Toast & Basket pulse
-------------------------------- */
.shop-toast {
  position: fixed;
  right: 16px;
  top: 16px;
  background: #111;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  z-index: 50;
  animation: toast-pop .18s ease-out, toast-fade .2s ease-out 1.3s forwards;
}
@keyframes toast-pop { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toast-fade { to { opacity: 0; transform: translateY(-6px); } }

.basket.pulse { animation: basketPulse .9s ease-out; }
@keyframes basketPulse {
  0% { transform: scale(1); box-shadow: none; }
  35% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(11,107,242,.15); }
  100% { transform: scale(1); box-shadow: none; }
}
/* ===== Scope + sizing reset so nothing overflows the card ===== */
.contact,
.contact * {
  box-sizing: border-box;
}

/* ===== Page wrapper ===== */
.contact {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 12px;
}

/* ===== Card ===== */
.contact-card {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e6e8ef;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
  padding: 16px;
  overflow: hidden;              /* clip any inner overlap */
}

.contact-card h2 {
  margin: 0 0 6px;
  line-height: 1.25;
}

.contact-sub {
  margin: 0 0 10px;
  color: #667085;
}
.contact-sub a {
  color: #1d4ed8;
  font-weight: 700;
  text-decoration: none;
}
.contact-sub a:hover { text-decoration: underline; }

/* ===== Alerts ===== */
.alert {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
}
.alert.success { background: #effaf3; color: #1f6b3b; border: 1px solid #cdebd8; }
.alert.error   { background: #fff1f2; color: #811d2e; border: 1px solid #f7c2c7; }

/* ===== Form grid ===== */
.contact-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* prevents overflow in grid cells */
  gap: 12px;
  margin-top: 10px;
  min-width: 0;
}
@media (max-width: 720px) {
  .contact-form { grid-template-columns: 1fr; }
}

/* Each field is a mini grid (label + control) */
.cf-field {
  display: grid;
  gap: 6px;
  min-width: 0;                  /* allow shrinking inside grid */
}
.cf-field > span {
  font-weight: 600;
  color: #1d2433;
}

/* Make a field span both columns */
.cf-col-2 { grid-column: 1 / -1; }

/* Inputs & textarea */
.cf-field input[type="text"],
.cf-field input[type="email"],
.cf-field textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;                  /* critical to avoid overflow */
  border: 1px solid #cfd6e4;
  border-radius: 10px;
  background: #fff;
  font-size: 1rem;
  line-height: 1.3;
  padding: 10px 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: #9aa3af; }

.cf-field input:focus,
.cf-field textarea:focus {
  border-color: #2d6cdf;
  box-shadow: 0 0 0 3px rgba(45,108,223,.12);
}

/* Textarea sizing */
.cf-field textarea {
  resize: vertical;
  min-height: 140px;
  max-height: 420px;
}

/* Actions row */
.cf-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 2px;
}

/* Buttons */
.btn {
  border: 1px solid #d0d0d0;
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}
.btn.primary {
  background: #2d6cdf;
  color: #fff;
  border-color: #2d6cdf;
}
.btn.primary:hover { filter: brightness(0.98); }

/* Honeypot (kept out of layout) */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

/* Defensive: neutralize any global table/label styles from admin.css */
.contact-card label { display: block; margin: 0; }
.contact-card table, .contact-card th, .contact-card td { border: 0; padding: 0; }
/* src/pages/Cart.css */
.cart-container {
  padding: 2rem;
}

.cart-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

.cart-table th,
.cart-table td {
  border: 1px solid #ccc;
  padding: 0.75rem;
  text-align: center;
}

.cart-table th {
  background-color: #f4f4f4;
}

.cart-table input[type="number"] {
  width: 60px;
  padding: 0.25rem;
  text-align: center;
}

.remove-btn {
  background-color: #d9534f;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 4px;
}

.remove-btn:hover {
  background-color: #c9302c;
}

.cart-summary {
  text-align: right;
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.cart-total {
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 0.5rem;
}

.paypal-buttons {
  margin-top: 2rem;
}

/* src/App.css */
/* Import font if used previously */
/* Hide the old nav (desktop) on mobile */
@media (max-width: 768px) {
  .desktop-nav { display: none !important; }
}
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background-color: #fff;
  color: #111;
}
/* Prevent background scroll when mobile menu open */
body.no-scroll { overflow: hidden; }
/* Color classes */
.blue { color: #004080; }
.red  { color: #cc0000; }
/* Header styling */
.header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.25rem;
  background: white; border-bottom: 1px solid #ddd;
  position: sticky; top: 0; z-index: 1000;
}
.header h2 { font-size: 1.8rem; margin: 0; }
@media (max-width: 768px) { .header h2 { font-size: 1.4rem; } }
.header nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.header nav a {
  text-decoration: none; color: #222; font-weight: 500; transition: color 0.3s;
}
.header nav a:hover { color: #004080; }
.cart-icon { position: relative; }
.cart-count {
  position: absolute; top: -8px; right: -10px;
  background: red; color: white; border-radius: 50%;
  font-size: 0.75rem; padding: 2px 6px;
}
/* Footer styling */
.footer {
  padding: 2rem; background: #f9f9f9; text-align: center;
  border-top: 1px solid #ddd; font-size: 0.9rem; margin-top: 3rem;
}
.footer .social-icons a { margin: 0 0.5rem; font-size: 1.2rem; color: #222; }
.footer .social-icons a:hover { color: #004080; }
.main-content { padding: 2rem; min-height: 70vh; }
/* Shop grid layout */
.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem; margin-top: 2rem;
}
.card {
  border: 1px solid #ccc; border-radius: 8px; padding: 1rem; text-align: center;
  background-color: #fff; transition: box-shadow 0.3s;
}
.card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.card img { max-width: 100%; height: auto; border-radius: 4px; margin-bottom: 1rem; }
.card select, .card input[type="number"] { margin-top: 0.5rem; padding: 0.3rem; width: 100%; }
.card button {
  margin-top: 1rem; padding: 0.5rem 1rem; background-color: #004080; color: white;
  border: none; border-radius: 4px; cursor: pointer; font-weight: bold;
}
.card button:hover { background-color: #002d59; }
/* Dropdowns (desktop) */
.dropdown { position: relative; display: inline-block; }
.dropdown-toggle { cursor: pointer; padding: 0 10px; }
.dropdown-menu {
  position: absolute; top: 100%; right: 0; background: white; border: 1px solid #ccc;
  padding: 0.5rem; z-index: 1000; min-width: 180px; display: flex; flex-direction: column;
}
.dropdown-menu a { padding: 0.5rem; text-decoration: none; color: black; }
.dropdown-menu a:hover { background-color: #f0f0f0; }
.admin-label {
  font-size: 0.9rem; background: #222; color: #fff; padding: 0.2rem 0.5rem;
  border-radius: 4px; margin-left: 0.5rem; vertical-align: middle;
}
nav .dropdown-menu button {
  background-color: transparent; border: none; color: black;
  padding: 8px 16px; text-align: left; width: 100%; cursor: pointer;
  font-size: 1rem; font-family: inherit;
}
nav .dropdown-menu button:hover { background-color: #f0f0f0; }
/* Hamburger button */
.hamburger {
  display: none; font-size: 1.8rem; background: none; border: none; cursor: pointer; margin-left: auto;
}
.desktop-nav { display: flex; gap: 1rem; }
@media (max-width: 768px) {
  .desktop-nav { display: none; }
  .hamburger   { display: block; }
}
/* ===========================
   Mobile drawer navigation
   =========================== */
/* Base container (off-canvas drawer) */
.mobile-nav {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;              /* slide in from the right */
  width: min(88vw, 420px);
  height: 100dvh;        /* modern mobile viewport */
  height: 100vh;         /* fallback */
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
  border-left: 1px solid #e9eef6;

  /* start hidden off-canvas; keep your existing transitions if any */
  transform: translateX(100%);
  transition: transform 240ms ease-in-out;

  /* prevent background scroll and bounce behind the drawer */
  overscroll-behavior: contain;
}
/* Open state (drawer visible) */
.mobile-nav.open {
  transform: translateX(0);
}
/* Scrollable content area inside the drawer.
   Wrap all menu links/details inside a <div class="mobile-scroll"> */
.mobile-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 16px;
}
/* Sticky action bar at the bottom of the drawer (e.g., Cart / Members buttons) */
.mobile-actions {
  position: sticky;
  bottom: max(env(safe-area-inset-bottom), 0px);
  background: #fff;
  border-top: 1px solid #e9eef6;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Buttons inside the action bar */
.mobile-actions .primary,
.mobile-actions .secondary,
.mobile-actions a,
.mobile-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #d6deea;
  background: #f7f9fe;
  color: #0a2a66;
}
.mobile-actions .primary {
  background: #1b6ef3;
  border-color: #1b6ef3;
  color: #fff;
}
.mobile-actions .secondary {
  background: #eef4ff;
  border-color: #cfe0ff;
  color: #1b4ed0;
}
/* Close button at the top of the drawer */
.mobile-nav .close-btn {
  appearance: none;
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  padding: 8px;
  margin: 4px 4px 8px auto;
  border-radius: 8px;
  cursor: pointer;
}
.mobile-nav .close-btn:hover {
  background: #f2f5fb;
}
/* Headings / groups inside the drawer */
.mobile-group {
  margin: 10px 0 6px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #607290;
}
/* Links and details in the drawer */
.mobile-nav a {
  display: block;
  padding: 10px 8px;
  border-radius: 8px;
  color: #0a2a66;
  text-decoration: none;
}
.mobile-nav a:hover {
  background: #f2f6ff;
}
.mobile-nav details {
  margin: 4px 0;
}
.mobile-nav summary {
  display: block;
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 10px 8px;
  border-radius: 8px;
  color: #0a2a66;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav details[open] > summary {
  background: #f2f6ff;
}
/* Optional: nested links inside details */
.mobile-nav details a {
  padding-left: 16px;
}
/* Optional: lock page scroll when drawer is open (toggle this class on <body>) */
body.mobile-open {
  overflow: hidden;
  touch-action: none;
}
/* Small screens: ensure full-bleed and proper spacing */
@media (max-width: 360px) {
  .mobile-nav {
    width: 100vw;
  }
  .mobile-actions {
    grid-template-columns: 1fr;
  }
}
/* Keep the basket stable and badge pinned */
.basket { position: relative; display: inline-flex; align-items: center; }
.basket .cart-count { position: absolute; top: -8px; right: -10px; transform: none; }
.basket.pulse { animation: none; }
.basket.pulse::after {
  content: ""; position: absolute; inset: -6px; border-radius: 999px; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(11, 107, 242, 0.35); animation: basketRing .9s ease-out;
}
@keyframes basketRing {
  0% { box-shadow: 0 0 0 0 rgba(11, 107, 242, 0.35); opacity: 1; }
  100% { box-shadow: 0 0 0 16px rgba(11, 107, 242, 0.00); opacity: 0; }
}
/* ===== Shared page container & cards (match Sponsors look) ===== */
.section { max-width: 1100px; margin: 0 auto; padding: 12px 0; }
.head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.lead { color:#556; }

.grid { list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card { background:#fff; border:1px solid var(--line, #e2e6ee); border-radius:12px; padding:12px; }

/* Prose for long text pages (postal rules etc.) */
.prose { color:#334; line-height:1.65; }
.prose h2, .prose h3 { margin: 16px 0 8px; }
.prose p { margin: 8px 0; }
.prose a { color:#1b57f0; text-decoration: none; }
.prose a:hover { text-decoration: underline; }

/* FAQ */
.faq-list { display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); }
.faq-item { background:#fff; border:1px solid #e2e6ee; border-radius:12px; padding:12px; }
.faq-item h3 { margin:0 0 6px; font-size:1.05rem; }

/* Committee cards */
.committee-grid { list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); }
.member { display:grid; gap:6px; }
.member h3 { margin:0; font-size:1.05rem; }
.member .role { font-size:.9rem; color:#556; }
.member .email a { color:#1b57f0; text-decoration:none; }
.member .email a:hover { text-decoration:underline; }

/* Optional hero sections you already had */
.about-air25m-page { width:100%; margin:0; padding:0; }

/* Add a generic .intro-section so pages using it pick up styling */
.intro-section,
.intro-section-25m,
.intro-section-50m,
.intro-section-wrabf {
  background-size: cover; background-position: center; background-repeat: no-repeat;
  padding: 60px 20px; color: white;
}

/* Keep your specific hero images (if used) */
.intro-section-25m { background-image: url('/images/air25m.png'); }
.intro-section-50m { background-image: url('/images/air50m.png'); }

.intro-content {
  max-width: 1100px; margin: 0 auto;
  background: rgba(0, 0, 0, 0.6);
  padding: 32px; border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  text-align: center; color: #ddd;
}
.intro-content h1 { font-size: 2.2rem; margin-bottom: 1rem; }
.intro-content p, .intro-content a { font-size:1.05rem; line-height:1.7; margin-bottom:1rem; color:white; }
/* ===== Page wrapper (scoped) ===== */
.admin-login-container {
  min-height: 60vh;
  display: grid;
  place-items: center;
  padding: 24px 12px;
  background: linear-gradient(180deg, #fafbff, #fff);
  color: #111;
}
/* Contained box-sizing so inputs never overflow the card */
.admin-login-container, .admin-login-container * { box-sizing: border-box; }

/* ===== Card ===== */
.admin-login-box {
  width: min(100%, 480px);
  max-width: 100%;
  background: #fff;
  border: 1px solid #e8e9f1;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
  padding: 16px 16px 14px;
  overflow: hidden; /* clip any inner overflow */
  text-align: center;
}

/* ===== Title ===== */
.admin-login-box h2 {
  margin: 0 0 10px;
  color: #111827;
  font-size: 1.25rem;
  line-height: 1.25;
}

/* ===== Inputs ===== */
.admin-login-box input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 42px;
  padding: 10px 12px;
  margin: 0 0 12px;
  font-size: 1rem; /* >=16px avoids iOS zoom */
  line-height: 1.2;
  color: #111;
  background: #fff;
  border: 1px solid #d5d9e2;
  border-radius: 10px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.admin-login-box input::placeholder { color: #9aa3af; }
.admin-login-box input:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.35);
}

/* ===== Button (primary) ===== */
.admin-login-box button {
  width: 100%;
  height: 42px;
  padding: 10px 14px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background-color: #1d4ed8;   /* same blue as members */
  border: 1px solid #1d4ed8;
  border-radius: 10px;
  cursor: pointer;
  transition: filter .15s ease, transform .02s ease;
}
.admin-login-box button:hover { filter: brightness(0.98); }
.admin-login-box button:active { transform: translateY(0.5px); }
.admin-login-box button:disabled {
  background: #9db7ff;
  border-color: #9db7ff;
  cursor: not-allowed;
}

/* ===== Messages ===== */
.code-sent-msg {
  margin: 6px 0 10px;
  color: #1f2937;   /* neutral text */
  font-size: 0.95rem;
  word-break: break-word;
}
.login-message {
  margin-top: 10px;
  font-weight: 700;
  color: #b00020;   /* error red */
  word-break: break-word;
}

/* ===== Small screens ===== */
@media (max-width: 420px) {
  .admin-login-box { padding: 14px; }
  .admin-login-box h2 { font-size: 1.2rem; }
}
/* -------------------------------
   Admin UI – Global & Defaults
-------------------------------- */
@media (min-width: 1600px) {
  .oa-table { font-size: 15px; }
  .oa-table thead th, .oa-table tbody td { padding: 10px 12px; }
}

/* Theme tokens */
:root {
  --primary: #0b6bf2;
  --line: #e2e6ee;
  --text: #1d2433;
  --muted: #5f6472;
  --danger: #c62828;
  --ok: #1b7c33;

  /* Right column width: min 560px, fluid on mids, max 780px */
  --da-form-col: clamp(560px, 36vw, 780px);
}

/* in admin.css (or a small file you import here) */
.kpi { background:#f7f9fe; border:1px solid #e2e8f7; border-radius:10px; padding:8px 12px; }
.kpi-h { font-size:12px; color:#616c82; }
.kpi-v { font-size:18px; font-weight:700; }


/* Utility */
.muted { color: var(--muted); }

/* Cards & sections (shared) */
.section { margin: 0 auto; }
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(20, 30, 55, 0.05);
}

/* Buttons (shared) */
.btn {
  appearance: none;
  border: 1px solid #d0d0d0;
  background: #fff;
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(11,107,242,.12); }
.btn--danger { border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { box-shadow: 0 2px 10px rgba(198,40,40,.15); }
.btn--ghost { background: transparent; }

/* Inputs (shared) */
input[type="text"], input[type="number"], input[type="search"], input[type="url"], textarea, select {
  width: 100%;
  border: 1px solid #cfd6e4;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.95rem;
  background: #fff;
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(11,107,242,.12);
}
textarea { resize: vertical; }

/* Alerts (shared) */
.alert { margin-top: 0.75rem; padding: 0.65rem 0.75rem; border-radius: 8px; font-size: 0.95rem; }
.alert.info { background:#eef4ff; color:#1b3a77; border:1px solid #cfe0ff; }
.alert.success { background:#effaf3; color:#1f6b3b; border:1px solid #cdebd8; }
.alert.error { background:#fff1f2; color:#811d2e; border:1px solid #f7c2c7; }

.visually-hidden { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* -------------------------------
   Legacy/General Admin Layout (.admin-*)
-------------------------------- */
.admin-container {
  max-width: 960px;
  margin: 2rem auto;
  background: #fff;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.admin-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 1rem; }
.admin-header h2 { margin: 0; }

.admin-actions { display:flex; gap:1rem; margin: 1rem 0; }

.admin-table { width:100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: .75rem; border: 1px solid #ddd; text-align:left; }
.admin-table th { background: #f5f5f5; }

.admin-form { display:flex; flex-direction:column; gap:1rem; margin-top: 1.25rem; }
.admin-form input, .admin-form textarea, .admin-form button {
  padding: .75rem; font-size: 1rem; border-radius: 8px; border: 1px solid #cfd6e4;
}
.admin-form button { background: var(--primary); color:#fff; border-color: var(--primary); cursor:pointer; }
.admin-form button:hover { filter: brightness(0.95); }

.admin-header-row { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom: 1rem; }
.admin-help { font-size:.95rem; color: var(--muted); max-width: 560px; text-align:right; }

/* Card */
.admin-card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:1.25rem; box-shadow: 0 2px 10px rgba(20,30,55,.05); }

/* Grid form */
.form-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 1rem 1.25rem; align-items:start; }
.form-field { grid-column: span 6; }
.file-field { grid-column: span 12; }
.form-label { display:block; font-weight:600; margin-bottom: .35rem; color: var(--text); }
.form-input, .form-select, textarea.form-input { width:100%; padding:.6rem .7rem; border:1px solid #cfd6e4; border-radius:8px; font-size:.95rem; }
.form-input:focus, .form-select:focus, textarea.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(45,108,223,.12); }
.hint { margin-top:.35rem; font-size:.9rem; color:#6b7280; }

/* Dropzone */
.dropzone { border:2px dashed #cfd6e4; border-radius:10px; padding:1.25rem; text-align:center; cursor:pointer; transition: .15s; background:#fafbff; }
.dropzone:hover { border-color:#9db2e1; }
.dropzone.drag-active { border-color: var(--primary); background:#eef4ff; }
.dropzone-title { font-weight:600; color: var(--text); }
.dropzone-sub { color:#6b7280; font-size:.9rem; margin-top:.25rem; }
.dropzone-picked .file-name { font-weight:600; color: var(--text); }
.dropzone-picked .file-meta { color:#6b7280; font-size:.85rem; }

/* Actions row */
.form-actions { grid-column: span 12; display:flex; gap:.75rem; margin-top:.25rem; }

/* Filters */
.filters-bar { display:flex; align-items:center; gap:1rem; margin:1rem 0; }
.filter-input { flex:1; padding:.5rem .75rem; font-size:.95rem; border:1px solid #cfd6e4; border-radius:6px; outline:none; }
.filter-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(11,107,242,.15); }
.export-btn {
  background: var(--primary); color:#fff; font-size:.95rem; padding:.5rem 1rem; border:none; border-radius:6px; cursor:pointer;
}
.export-btn:hover { filter: brightness(0.95); }

/* -------------------------------
   Discounts Admin (.da-*)
-------------------------------- */
.da-wrap { max-width: 1400px; margin: 0 auto; }
.da-title { margin: 0; }
.da-toolbar { margin-bottom: 12px; padding: 12px; }
.da-toolbar-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.da-actions { display:flex; gap:8px; }

.da-filters {
  display:grid;
  grid-template-columns: 1fr auto auto auto;
  gap:10px; align-items:center; margin-top:10px;
}
.da-search {
  width:100%; border:1px solid var(--line); border-radius:8px; padding:10px 12px;
}
.da-check { display:inline-flex; align-items:center; gap:8px; color: var(--text); }
.da-sort select { border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff; }
.da-msg { margin:8px 0 0; color: var(--primary); font-weight: 600; }

/* Two-column layout: wide list + wider form */
.da-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) var(--da-form-col);
  gap: 14px;
}
@media (max-width: 1100px) { .da-grid { grid-template-columns: 1fr; } }

.da-list { padding: 12px; }
.da-items { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.da-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  display: grid; gap: 6px;
  background:#fff;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.da-item:hover { border-color: var(--primary); box-shadow: 0 6px 18px rgba(11,107,242,.08); }
.da-item-head { display:flex; align-items:start; justify-content:space-between; gap:10px; }
.da-name { font-weight:700; line-height:1.2; }
.da-badges { display:flex; gap:6px; flex-wrap:wrap; }
.badge { background:#eef3ff; color: var(--primary); border:1px solid rgba(11,107,242,.25); border-radius:999px; font-size:.75rem; padding:2px 8px; }
.badge--warn { background:#fff5e8; color:#b05a00; border-color:rgba(176,90,0,.25); }
.badge--ok { background:#ecf8ee; color: var(--ok); border-color: rgba(27,124,51,.25); }
.da-sub { font-size:.9rem; }
.da-summary { font-weight:500; }
.da-details { color:#444; }

.da-actions-row { display:flex; align-items:center; gap:8px; }
.da-spacer { flex: 1; }

/* Right-hand form column (fluid & wider) */
.da-form {
  padding: 14px;
  display: grid; gap: 10px;
  align-self: start;
  position: sticky; top: 10px;
  max-width: var(--da-form-col);
}
@media (max-width: 1100px) {
  .da-form { position: static; max-width: 100%; }
}
.da-form-head { display:flex; align-items:center; justify-content:space-between; }
.da-row { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 540px) { .da-row { grid-template-columns: 1fr; } }
.da-field input, .da-field textarea {
  width:100%; border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:#fff;
}
.da-field textarea { min-height: 160px; }

/* Links inside list */
.da-sub a { color: var(--primary); text-decoration: none; }
.da-sub a:hover { text-decoration: underline; }

/* -------------------------------
   Discounts Admin – Field width caps
   (prevents over-wide inputs while keeping a wide column)
-------------------------------- */
.da-form { justify-items: start; }

/* Default cap for single-column fields */
.da-field > input,
.da-field > textarea,
.da-field > select {
  max-width: 560px;  /* adjust: 480–600px as you prefer */
}

/* Two-column row fields a bit narrower */
.da-row .da-field > input,
.da-row .da-field > select {
  max-width: 360px;
}

/* Make numeric “Display order” compact */
.da-row input[type="number"] {
  max-width: 160px;
}

/* On small screens, let fields use full width */
@media (max-width: 1100px) {
  .da-field > input,
  .da-field > textarea,
  .da-field > select,
  .da-row .da-field > input,
  .da-row .da-field > select,
  .da-row input[type="number"] {
    max-width: 100%;
  }
}

/* ===== Dashboard layout ===== */
.dash-wrap { max-width: 1300px; padding: 10px; margin: 0 auto; }
.dash-header { display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 10px; }
.dash-title { margin: 0; }
.dash-subtitle { margin: 0; font-size: 1rem; }

.dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px;
  margin-bottom: 12px;
}
@media (max-width: 980px) { .dash-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dash-kpis { grid-template-columns: 1fr; } }

.kpi { border:1px solid var(--line); border-radius: 10px; padding: 10px; display:grid; gap: 4px; }
.kpi-label { color: var(--muted); font-weight: 600; font-size: .9rem; }
.kpi-value { font-size: 1.4rem; font-weight: 800; color: var(--text); }

/* Quick actions */
.dash-quick { padding: 12px; margin-bottom: 12px; }
.dash-actions { display:flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* Panels */
.dash-panels {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 1200px) { .dash-panels { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px)  { .dash-panels { grid-template-columns: 1fr; } }

.panel { padding: 12px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 8px; }

/* Tables */
.dash-table { width:100%; border-collapse: collapse; font-size: 14px; }
.dash-table th, .dash-table td { padding: 8px 8px; border-bottom: 1px solid #eceff6; text-align: left; vertical-align: top; }
.dash-table thead th { background: #f7f9fe; font-weight: 700; }

/* Capacity bar */
.cap { display: grid; gap: 4px; }
.cap-bar { height: 8px; background: #f0f3fa; border-radius: 999px; overflow: hidden; }
.cap-fill { height: 100%; background: var(--primary); border-radius: 999px; }
.cap-meta { font-size: .9rem; }

/* Low stock list */
.low-list { list-style: none; padding: 0; margin: 6px 0 0; display:grid; gap: 6px; }
.low-title { font-weight: 600; }
.low-stock { color: var(--muted); margin-left: 6px; }
/*!
 * Quill Editor v2.0.2
 * https://quilljs.com
 * Copyright (c) 2017-2024, Slab
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor > *{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li > .ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked] > .ql-ui,.ql-editor li[data-list=unchecked] > .ql-ui{color:#777}.ql-editor li[data-list=bullet] > .ql-ui:before{content:'\2022'}.ql-editor li[data-list=checked] > .ql-ui:before{content:'\2611'}.ql-editor li[data-list=unchecked] > .ql-ui:before{content:'\2610'}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered] > .ql-ui:before{content:counter(list-0, decimal) '. '}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before{content:counter(list-1, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before{content:counter(list-2, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before{content:counter(list-3, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before{content:counter(list-4, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before{content:counter(list-5, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before{content:counter(list-6, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before{content:counter(list-7, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before{content:counter(list-8, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before{content:counter(list-9, decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl > .ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank::before{color:rgba(0,0,0,0.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:'';display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow{box-sizing:border-box}.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:'';display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label::before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Heading 1'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Heading 2'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Heading 3'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:'Heading 4'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{content:'Heading 5'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{content:'Heading 6'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before{content:'Sans Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{content:'Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{content:'Monospace'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{content:'Small'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{content:'Large'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{content:'Huge'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:rgba(0,0,0,0.2) 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow + .ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove::before{content:'Remove';margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right:0;content:'Save';padding-right:0}.ql-snow .ql-tooltip[data-mode=link]::before{content:"Enter link:"}.ql-snow .ql-tooltip[data-mode=formula]::before{content:"Enter formula:"}.ql-snow .ql-tooltip[data-mode=video]::before{content:"Enter video:"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}

/*# sourceMappingURL=quill.snow.css.map*//* ===== Container & header ===== */
.ea-wrap { max-width: 1200px; margin: 0 auto; }
.ea-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ea-title { margin: 0; }

/* ===== Card ===== */
.card {
  background: #ffffff;
  border: 1px solid #e6e8ef;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 2px 10px rgba(20, 30, 55, 0.05);
  margin-bottom: 14px;
}

/* ===== Buttons ===== */
.btn { border: 1px solid var(--line, #d0d0d0); background: #fff; border-radius: 8px; padding: 8px 12px; cursor: pointer; font-weight: 600; }
.btn:hover { border-color: var(--primary, #0b6bf2); box-shadow: 0 2px 10px rgba(11,107,242,.12); }
.btn.primary { background: #2d6cdf; color: #fff; border-color: #2d6cdf; }
.btn.primary:hover { filter: brightness(0.98); }
.btn--danger { border-color: #c62828; color: #c62828; }
.btn--danger:hover { box-shadow: 0 2px 10px rgba(198,40,40,.15); }
.btn--ghost { background: transparent; }

.btn.btn-secondary {
  background: #e8f0fe;
  border: 1px solid #c6dafc;
  color: #1a73e8;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.btn.btn-secondary:hover { filter: brightness(0.98); }

/* ===== Events list & filters ===== */
.ea-list { display: grid; gap: 10px; }
.ea-filters { display: grid; grid-template-columns: 1fr 160px 140px; gap: 8px; }
@media (max-width: 560px) { .ea-filters { grid-template-columns: 1fr; } }
.ea-search {
  border: 1px solid var(--line, #e2e6ee); border-radius: 8px; padding: 8px 10px; background: #fff;
}

/* ===== Tables ===== */
.ea-table-wrap { width: 100%; overflow-x: auto; }
.ea-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: auto; }
.ea-table th, .ea-table td { padding: 10px 10px; border-bottom: 1px solid #eceff6; text-align: left; vertical-align: top; }
.ea-table thead th { background: #f7f9fe; font-weight: 700; position: sticky; top: 0; z-index: 1; }
.ea-table tr:hover td { background: #fafcff; }

.ea-row-actions { display: flex; gap: 8px; align-items: center; }

/* Badges & subtext */
.ea-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .8rem; border: 1px solid rgba(0,0,0,.08);
}
.ea-badge--pending { background: #fff9e5; color: #7a5a00; border-color: rgba(122,90,0,.25); }
.ea-badge--open    { background: #ecf8ee; color: #166534; border-color: rgba(22,101,52,.25); }
.ea-badge--full    { background: #fff2f2; color: #9b1c1c; border-color: rgba(155,28,28,.25); }
.ea-badge--closed  { background: #eef4ff; color: #1b3a77; border-color: rgba(27,58,119,.25); }

.ea-loc { font-weight: 600; }
.ea-sub { font-size: .9rem; color: #6b7280; }

/* ===== FORM (full-width card) ===== */
.ea-form * { box-sizing: border-box; }
.ea-form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ea-form-title { margin: 0; }

/* grid: minmax(0,1fr) prevents overflow in grid cells */
.ea-form .ea-form-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 10px 12px;
  align-items: start;
}
@media (max-width: 980px) { .ea-form .ea-form-grid { grid-template-columns: 1fr; } }

.ea-field { display: grid; gap: 6px; min-width: 0; }
.ea-field > span,
.ea-label { font-weight: 600; color: #1d2433; }

/* Inputs/selects fill the cell, never overflow */
.ea-field input[type="text"],
.ea-field input[type="date"],
.ea-field input[type="number"],
.ea-field input[type="time"],
.ea-field select {
  width: 100%;
  max-width: 100%;
  border: 1px solid #cfd6e4; border-radius: 8px; padding: 8px 10px; background: #fff;
}
.ea-field input:focus,
.ea-field select:focus { border-color: #2d6cdf; box-shadow: 0 0 0 3px rgba(45,108,223,.12); }

/* Long single-line values won't push layout */
.ea-field input[type="text"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2-col span */
.ea-col-2 { grid-column: 1 / -1; }

/* ===== Quill editor containment ===== */
.ea-quill { width: 100%; max-width: 100%; }
.ea-quill .ql-toolbar { border-radius: 8px 8px 0 0; }
.ea-quill .ql-container {
  border-radius: 0 0 8px 8px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.ea-quill .ql-editor {
  min-height: 160px;
  max-height: 360px;
  overflow: auto;
}

/* Actions row always below editor */
.ea-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; position: relative; z-index: 2; }

/* ===== Registrations (separate card) ===== */
.ea-regs { display: grid; gap: 10px; }
.ea-regs-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ea-regs-title { margin: 0; }
.ea-spacer { flex: 1; }
.ea-check { display: inline-flex; align-items: center; gap: 6px; }
.ea-kpis { font-weight: 600; color: #1d2433; }

.ea-regs-filters {
  display: grid;
  grid-template-columns: 1fr 140px 160px auto;
  gap: 8px; align-items: center;
}
@media (max-width: 760px) { .ea-regs-filters { grid-template-columns: 1fr 1fr; } }

.is-cancelled { opacity: .6; }

/* ===== Utilities ===== */
.muted { color: #6b7280; }
.error { color: #b00020; }

/* Inline add-registration form */
.ea-addreg {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #e6e8ef;
  border-radius: 10px;
  background: #fafcff;
  align-items: start;             /* prevent overlap on tall fields */
}
.ea-addreg .ea-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;                   /* allow shrinking in narrow screens */
}
.ea-addreg .ea-field > input,
.ea-addreg .ea-field > select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.ea-addreg .ea-actions {
  grid-column: 1 / -1;            /* buttons row spans full width */
  display: flex;
  gap: 8px;
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .ea-addreg { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
@media (max-width: 560px) {
  .ea-addreg { grid-template-columns: 1fr; }
}

/* ===== Silverthorne pairs ===== */
.ea-pairs{
  border: 1px solid #e6e8ef;
  border-radius: 12px;
  padding: 12px;
  background: #ffffff;
}

.ea-pairs-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ea-pairs-title{
  font-weight: 800;
  color: #1d2433;
}

.ea-pairs-sub{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  max-width: 820px;
}

.ea-pairs-actions{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.ea-pairs-body{
  margin-top: 10px;
  display: grid;
  gap: 12px;
}

.ea-pairs-msg{
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(198,40,40,.08);
  border: 1px solid rgba(198,40,40,.22);
  color: #b00020;
  font-weight: 600;
}

.ea-pairs-grid{
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
@media (max-width: 900px) {
  .ea-pairs-grid{ grid-template-columns: 1fr; }
}

.ea-pairs-cta{
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .ea-pairs-cta{ justify-content: flex-start; }
}

.ea-pairs-list{
  border-top: 1px solid #eceff6;
  padding-top: 12px;
  display: grid;
  gap: 8px;
}

.ea-pairs-list-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ea-pairs-list-title{
  font-weight: 800;
  color: #1d2433;
}

.ea-pairs-table th,
.ea-pairs-table td{
  vertical-align: middle;
}

/* ===== Squadding modal ===== */
.ea-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 40, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}

.ea-modal{
  width: 520px;
  max-width: 100%;
  background: #ffffff;
  border: 1px solid #e6e8ef;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(20, 30, 55, 0.35);
  overflow: hidden;
}

.ea-modal-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-bottom: 1px solid #eceff6;
  background: #f7f9fe;
}

.ea-modal-title{
  font-weight: 800;
  color: #1d2433;
}

.ea-modal-body{
  padding: 12px;
  display: grid;
  gap: 10px;
}

.ea-modal-actions{
  padding: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #eceff6;
  background: #ffffff;
}

.ea-modal-error{
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(198,40,40,.08);
  border: 1px solid rgba(198,40,40,.22);
  color: #b00020;
  font-weight: 600;
}
/* Scoped two-column layout for ShopAdmin form */
.sa-form {
  --sa-label-width: 140px; /* tweak this if you want even narrower labels */
  --sa-gap: 8px;
}

.sa-form .form-group {
  display: grid;
  grid-template-columns: var(--sa-label-width) minmax(0, 1fr); /* label | field */
  align-items: start;                /* keep multi-line labels from overlapping inputs */
  gap: var(--sa-gap);
  margin-bottom: 12px;
}

/* Make labels wrap instead of forcing a single line */
.sa-form .form-group > label {
  font-weight: 600;
  text-align: right;
  padding-right: 6px;
  white-space: normal;               /* <-- was nowrap */
  word-break: break-word;
  line-height: 1.2;
  font-size: 0.95rem;                /* slightly smaller so they don't dominate */
}

/* Let fields shrink inside the grid cell instead of overflowing */
.sa-form .form-group > * {
  min-width: 0;
}

.sa-form input[type="text"],
.sa-form input[type="number"],
.sa-form input[type="file"],
.sa-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Full-width rows (e.g., image preview) */
.sa-form .form-group.form-group--full {
  grid-template-columns: var(--sa-label-width) minmax(0, 1fr);
  align-items: start;
}

/* Align action buttons under the field column */
.sa-actions {
  margin-left: calc(var(--sa-label-width) + var(--sa-gap));
  display: flex;
  gap: 8px;
}

/* Responsive: narrow the label column sooner, stack on small screens */
@media (max-width: 900px) {
  .sa-form { --sa-label-width: 120px; }
}

@media (max-width: 720px) {
  .sa-form .form-group {
    grid-template-columns: 1fr;
  }
  .sa-form .form-group > label {
    text-align: left;
    padding-right: 0;
  }
  .sa-actions {
    margin-left: 0;
  }
}

/* Charity page — Benchrest GB */
.charity {
  --brand-primary: #009B3E;
  --brand-dark: #007C32;
  --hero-text: #EEF3EE;
  --badge-bg: #FFFFFF;
  --badge-text: #007C32;
  --btn-brand-text: #009B3E;
  --outline-color: #FFFFFF;
  --outline-hover-bg: rgba(255,255,255,.12);
  display: grid;
  gap: 12px;
}

.charity-tabs.card {
  padding: 14px;
}

.tabs-title {
  margin: 0 0 8px;
  font-size: 1rem;
}

.tabs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tab-btn {
  border: 1px solid #d3d8df;
  background: #fff;
  color: #233041;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.tab-btn:hover {
  border-color: var(--brand-primary);
}

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

/* ========= HERO ========= */
.charity-hero {
  border-radius: 14px;
  padding: 22px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-dark) 70%);
  color: #fff;
  box-shadow: 0 6px 22px rgba(0,0,0,.12);
}

.charity-hero-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1.2fr .8fr;
}

.charity-logo { display:block; margin-bottom: 10px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.18)); }
.badge {
  width: fit-content;
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-weight: 800;
  letter-spacing: .06em;
}

.charity h1 { margin: 6px 0 8px; font-size: 1.8rem; }
.charity .lead { margin: 0 0 12px; color: var(--hero-text); }

.cta-row { display:flex; gap:10px; flex-wrap: wrap; margin-top: 8px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 10px; padding: 10px 14px; font-weight: 600;
  text-decoration: none; transition: transform .06s ease, opacity .2s ease;
  border: 2px solid transparent;
}
.btn:active { transform: translateY(1px); }

.btn-brand { background: #fff; color: var(--btn-brand-text); }
.btn-brand:hover { opacity: .9; }

.btn-outline { background: transparent; color: var(--outline-color); border-color: var(--outline-color); }
.btn-outline:hover { background: var(--outline-hover-bg); }

/* right card in hero */
.hero-right.card { background:#fff; color:#223; }
.kpi { margin: 0 0 4px; }
.kpi dt { font-size: .85rem; color:#556; }
.kpi dd { margin:0; font-size: 2rem; font-weight: 800; color:#111; }
.kpi-note { margin: 4px 0 8px; color:#334; }

.bullet { margin: 0; padding-left: 18px; color:#334; }
.bullet li { margin: 4px 0; }

/* general */
.smallprint { color:#667; margin: 6px 0 0; }
@media (max-width: 860px) {
  .charity-hero-grid { grid-template-columns: 1fr; }
  .charity-logo { width: 180px; height: auto; }
}
/* EXISTING RULES (unchanged) */
.register-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

.event-details, .register-form-container {
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.register-form .form-group {
  margin-bottom: 1.2rem;
  display: flex;
  flex-direction: column;
}

.register-form label {
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.register-form input,
.register-form select {
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
}

.fee {
  font-size: 1rem;
  margin: 1rem 0;
}

.btn-primary {
  padding: 0.8rem 1.5rem;
  background: #0077cc;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-primary:hover {
  background: #005fa3;
}

.error {
  color: #d9534f;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}

.message {
  margin-top: 1rem;
  font-weight: 500;
}

@media (max-width: 768px) {
  .register-page {
    grid-template-columns: 1fr;
  }
}

/* NEW: PayPal wrapper to keep buttons tidy in your card */
.paypal-area {
  margin-top: 0.5rem;
}

/* Radio group for LR/HR/Both */
.radio-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
}
/* ===== Orders Admin (scoped) ===== */

/* Container */
.orders-admin .oa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.orders-admin .oa-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.orders-admin .oa-kpi {
  background: #f7f9fc;
  border: 1px solid #e6ebf2;
  border-radius: 8px;
  padding: 8px 10px;
}

.orders-admin .kpi-label {
  font-size: 12px;
  color: #555;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.orders-admin .kpi-value {
  font-weight: 700;
  font-size: 15px;
}

/* Toolbar */
.orders-admin .oa-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}

.orders-admin .oa-toolbar input[type="text"],
.orders-admin .oa-toolbar select {
  height: 34px;
  padding: 6px 10px;
  border: 1px solid #d9dde5;
  border-radius: 6px;
  box-sizing: border-box;
}

.orders-admin .oa-toolbar button {
  height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid #d9dde5;
  background: #fff;
  cursor: pointer;
}

.orders-admin .linklike {
  background: none;
  border: none;
  padding: 0;
  color: #0b6bf2;
  cursor: pointer;
  text-decoration: underline;
}

/* Table */
.orders-admin .oa-table-wrap { overflow-x: auto; }
.orders-admin .oa-table-wrap-sm { overflow-x: auto; }

.orders-admin .oa-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px; /* soft row gaps */
}

.orders-admin .oa-table.compact {
  border-spacing: 0 2px;
  font-size: 14px;
}

.orders-admin .oa-table th,
.orders-admin .oa-table td {
  padding: 8px 10px;
  vertical-align: top;
  background: #fff;
}

.orders-admin .oa-table thead th {
  position: sticky;
  top: 0;
  background: #f4f6fa;
  z-index: 1;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid #e6ebf2;
}

/* Column sizing (prevents overlap) */
.orders-admin .oa-col-date     { width: 160px; white-space: nowrap; }
.orders-admin .oa-col-id       { width: 90px;  white-space: nowrap; }
.orders-admin .oa-col-email    { min-width: 240px; }
.orders-admin .oa-col-status   { min-width: 230px; }
.orders-admin .oa-col-courier  { min-width: 230px; }
.orders-admin .oa-col-tracking { min-width: 230px; }
.orders-admin .oa-col-money    { width: 110px; text-align: right; white-space: nowrap; }
.orders-admin .oa-col-actions  { min-width: 280px; }

/* Cells */
.orders-admin .oa-cell-date { white-space: nowrap; }
.orders-admin .oa-cell-id   { white-space: nowrap; }

.orders-admin .oa-cell-email {
  max-width: 380px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status cell: stack pill + select to avoid collision */
.orders-admin .oa-cell-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.orders-admin .oa-cell-status select {
  width: 100%;
  max-width: 240px;
  height: 34px;
  padding: 6px 10px;
  border: 1px solid #d9dde5;
  border-radius: 6px;
  box-sizing: border-box;
  background: #fff;
}

/* Courier / Tracking inputs */
.orders-admin .oa-cell-courier input,
.orders-admin .oa-cell-tracking input {
  width: 100%;
  max-width: 260px;
  height: 34px;
  padding: 6px 10px;
  border: 1px solid #d9dde5;
  border-radius: 6px;
  box-sizing: border-box;
}

/* Money cells */
.orders-admin .oa-cell-money {
  text-align: right;
  white-space: nowrap;
}

/* Actions */
.orders-admin .oa-cell-actions { white-space: nowrap; }
.orders-admin .oa-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.orders-admin .oa-row-actions button {
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid #d9dde5;
  background: #fff;
  cursor: pointer;
}

/* Status pills */
.orders-admin .status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
  background: #eee;
  color: #111;
}

.orders-admin .status-received   { background: #e9f0ff; color: #0b3a99; }
.orders-admin .status-processing { background: #fff4c7; color: #8a6d00; }
.orders-admin .status-shipped    { background: #e8f8e8; color: #166534; }
_orders-admin .status-cancelled  { background: #ffe9e9; color: #9f1239; }
.orders-admin .status-refunded   { background: #f5e9ff; color: #6b21a8; }

/* Empty state */
.orders-admin .oa-empty {
  text-align: center;
  color: #666;
  background: #fff;
}

/* Detail view */
.orders-admin .oa-detail-grid {
  margin: 10px 0 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 16px;
}

.orders-admin .oa-address {
  white-space: pre-wrap;
}

/* Totals */
.orders-admin .oa-totals {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

/* Modal */
.orders-admin .oa-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 16px;
}

.orders-admin .oa-modal-card {
  width: min(720px, 96vw);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
  padding: 14px 16px 16px;
}

.orders-admin .oa-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.orders-admin .oa-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.orders-admin .oa-modal-actions button {
  height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid #d9dde5;
  background: #fff;
  cursor: pointer;
}

/* Form rows inside modal */
.orders-admin .oa-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 16px;
  margin: 10px 0;
}

.orders-admin .oa-field label {
  display: block;
  font-size: 12px;
  color: #555;
  margin-bottom: 4px;
}

.orders-admin .oa-field input,
.orders-admin .oa-field select {
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  border: 1px solid #d9dde5;
  border-radius: 6px;
  box-sizing: border-box;
  background: #fff;
}

/* Errors */
.orders-admin .error {
  color: #a02222;
  background: #fff3f3;
  border: 1px solid #ffd6d6;
  padding: 8px 10px;
  border-radius: 6px;
}

/* Small text utility */
.orders-admin .sm { font-size: 12px; color: #666; }

/* Responsive tightening */
@media (max-width: 1200px) {
  .orders-admin .oa-col-date     { width: 140px; }
  .orders-admin .oa-col-status   { min-width: 210px; }
  .orders-admin .oa-col-courier,
  .orders-admin .oa-col-tracking { min-width: 210px; }
  .orders-admin .oa-col-actions  { min-width: 240px; }
}

@media (max-width: 860px) {
  .orders-admin .oa-table { font-size: 14px; }
  .orders-admin .oa-col-money { width: 90px; }
  .orders-admin .oa-cell-courier input,
  .orders-admin .oa-cell-tracking input { max-width: 200px; }
}

/* Grow helper (if used in toolbar) */
.orders-admin .oa-grow { flex: 1 1 auto; }
/* ===== Page wrapper (scoped) ===== */
.member-login {
  min-height: 60vh;
  display: grid;
  place-items: center;
  padding: 24px 12px;
  background: linear-gradient(180deg, #fafbff, #fff);
  color: #111;
}
.member-login, .member-login * { box-sizing: border-box; } /* contained reset */

/* ===== Card ===== */
.ml-card {
  width: min(100%, 480px);
  background: #fff;
  border: 1px solid #e8e9f1;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
  padding: 16px 16px 14px;
  overflow: hidden;
}

/* ===== Header ===== */
.ml-header { text-align: center; margin-bottom: 12px; }
.ml-header picture img {
  width: clamp(40px, 12vw, 56px);
  height: clamp(40px, 12vw, 56px);
  object-fit: contain;
  display: inline-block;
  margin-bottom: 6px;
}
.ml-header h2 {
  margin: 0 0 4px;
  font-size: 1.25rem;
  line-height: 1.25;
}
.ml-sub {
  margin: 0;
  color: #667085;
  font-size: 0.95rem;
  line-height: 1.35;
  word-break: break-word;
}

/* ===== Stepper (compact) ===== */
.ml-steps {
  display: flex; flex-wrap: wrap;
  gap: 8px; justify-content: center;
  margin: 10px 0 4px;
}
.ml-step {
  display: inline-flex; align-items: center; gap: 6px;
  color: #6b7280; font-weight: 600; font-size: 0.9rem;
  padding: 6px 10px; border-radius: 999px;
  border: 1px dashed #e5e7eb; background: #fafafa;
}
.ml-step.active { color: #111827; border-color: #c7d2fe; background: #eef2ff; }
.ml-step-num {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #1d4ed8; color: #fff; font-size: 0.75rem; font-weight: 800;
}

/* ===== Alert ===== */
.ml-alert {
  background: #fff5f5; color: #b42318; border: 1px solid #fecdca;
  border-radius: 10px; padding: 8px 10px; margin: 8px 0 0;
  word-break: break-word;
}

/* ===== Form ===== */
.ml-form {
  display: grid; gap: 12px; margin-top: 12px;
  min-width: 0;
}
.ml-field { display: grid; gap: 6px; min-width: 0; }
.ml-label { font-size: 0.9rem; color: #374151; font-weight: 600; }

.ml-form input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 42px;
  border: 1px solid #d5d9e2;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 1rem; /* >=16px avoids iOS zoom */
  line-height: 1.2;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ml-form input:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.35);
}
.ml-form input::placeholder { color: #9aa3af; }

/* OTP style (if used) */
.ml-otp {
  letter-spacing: 0.25em;
  text-align: center;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ===== Buttons ===== */
.ml-btns { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

.ml-primary {
  appearance: none; background: #1d4ed8; color: #fff; border: 1px solid #1d4ed8;
  border-radius: 10px; padding: 10px 14px; font-weight: 700; cursor: pointer; height: 42px;
}
.ml-primary:hover { background: #1b46c4; border-color: #1b46c4; }
.ml-primary:disabled { background: #9db7ff; border-color: #9db7ff; cursor: not-allowed; }

.ml-secondary {
  appearance: none; background: #f3f4f6; color: #111; border: 1px solid #e5e7eb;
  border-radius: 10px; padding: 10px 14px; font-weight: 700; cursor: pointer; height: 42px;
}
.ml-secondary:hover { background: #eef0f3; }

.ml-link {
  appearance: none; background: transparent; color: #1d4ed8; border: none;
  padding: 10px 6px; font-weight: 700; cursor: pointer; height: 42px;
}
.ml-link:disabled { color: #9db7ff; cursor: not-allowed; }

/* Footnote */
.ml-footnote { margin: 4px 0 0; color: #6b7280; font-size: 0.95rem; }
.ml-footnote a { color: #1d4ed8; font-weight: 700; text-decoration: none; }
.ml-footnote a:hover { text-decoration: underline; }

/* ===== Small screens ===== */
@media (max-width: 420px) {
  .ml-card { width: 100%; padding: 14px; }
  .ml-header picture img { width: 44px; height: 44px; }
  .ml-primary, .ml-secondary, .ml-link { width: 100%; justify-content: center; }
}
/* Container + text */
.members-apply h2 { margin-bottom: 4px; }
.members-apply .muted { color: #666; }
.members-apply .muted.small { font-size: 12px; }

/* Form shell */
.members-form {
  display: grid;
  gap: 16px;
}

/* Card-like sections for visual grouping */
.members-form section {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 14px;
}

.members-form h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
}

/* Grids */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Fields */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;            /* prevent overflow into neighbors */
}

.field > span {
  font-size: 12px;
  color: #666;
  line-height: 1.2;
}

.field input,
.field select,
.field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  background: #fff;
}

.field textarea {
  min-height: 90px;
  resize: vertical;
}

.readonly {
  background: #f8f8f8;
  color: #333;
  cursor: default;
}

/* Spanning helper */
.span-2 { grid-column: span 2; }

/* Consent block */
.consent label {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  align-items: start;
}
.error { color: #c0392b; }

/* Responsive: collapse to single column on narrow screens */
@media (max-width: 880px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
}
/* =========================
   Members Dashboard (scoped)
   ========================= */
.members-dashboard {
  --md-accent: #2349ff;
  --md-accent-weak: #eef2ff;
  --md-border: #e9e9ef;
  --md-text: #222;
  --md-muted: #666;
}

/* Headings */
.members-dashboard h2 { margin: 0 0 8px; }
.members-dashboard h3 { margin: 0 0 10px; font-size: 1.05rem; }

/* Utilities */
.members-dashboard .muted { color: var(--md-muted); }
.members-dashboard .error { color: #c0392b; }
.members-dashboard .linklike {
  background: none; border: 0; padding: 0;
  color: var(--md-accent); text-decoration: underline; cursor: pointer;
}

/* Tabs */
.members-dashboard [role="tablist"] {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end;
  border-bottom: 1px solid var(--md-border);
  margin: 8px 0 16px; padding-bottom: 2px;
}
.members-dashboard [role="tab"] {
  appearance: none; border: 0; background: transparent;
  color: var(--md-accent); padding: 8px 12px; border-radius: 10px 10px 0 0;
  font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.members-dashboard [role="tab"][aria-selected="true"] { background: var(--md-accent-weak); color: var(--md-text); }
.members-dashboard [role="tab"]:hover { background: #f7f8ff; }
.members-dashboard [role="tab"]:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 2px; border-radius: 12px; }
.members-dashboard .tab-actions { margin-left: auto; }

/* Panels / Cards */
.members-dashboard .card,
.members-dashboard [role="tabpanel"] {
  background: #fff; border: 1px solid var(--md-border);
  border-radius: 10px; padding: 12px;
}

/* Buttons */
.members-dashboard button {
  appearance: none; background: #f3f4f8; color: #111;
  border: 1px solid var(--md-border); border-radius: 8px;
  padding: 8px 12px; cursor: pointer; font-weight: 600;
}
.members-dashboard button:hover { background: #eef0f7; }
.members-dashboard button:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 2px; }

/* Tables */
.members-dashboard .table-wrap { overflow-x: auto; border-radius: 10px; }
.members-dashboard table { width: 100%; border-collapse: collapse; }
.members-dashboard th, .members-dashboard td {
  padding: 8px 10px; border-bottom: 1px solid var(--md-border); text-align: left; white-space: nowrap;
}
.members-dashboard thead th {
  font-weight: 700; color: var(--md-muted); background: #fafafe; position: sticky; top: 0; z-index: 1;
}
.members-dashboard tbody tr:hover td { background: #fcfcff; }

/* Responsive tweaks */
@media (max-width: 720px) {
  .members-dashboard [role="tab"] { padding: 6px 10px; }
  .members-dashboard th, .members-dashboard td { padding: 6px 8px; }
}

/* =================
   Membership Card
   ================= */
.members-dashboard .membership-card {
  aspect-ratio: 85.6 / 54; max-width: 560px; min-width: 320px; position: relative;
  background: #fff; border: 1px solid var(--md-border); border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  display: grid; grid-template-columns: 33% 67%; overflow: hidden;
}
.members-dashboard .membership-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0) 40%);
}
.members-dashboard .mc-left {
  background: #f7f9ff; border-right: 1px solid var(--md-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px;
}
.members-dashboard .mc-brand { width: 60%; height: auto; object-fit: contain; filter: drop-shadow(0 1px 0 rgba(0,0,0,.05)); }
.members-dashboard .mc-wrabf { width: 44%; height: auto; object-fit: contain; margin-top: -4px; }
.members-dashboard .mc-right { padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.members-dashboard .mc-title { font-weight: 800; letter-spacing: .04em; color: #444; text-align: right; font-size: .98rem; margin-bottom: 2px; }
.members-dashboard .mc-block { display: grid; grid-template-columns: 1fr; gap: 3px; }
.members-dashboard .mc-label { font-size: .72rem; color: #666; letter-spacing: .06em; font-weight: 700; }
.members-dashboard .mc-value {
  background: #fafafa; border: 1px solid var(--md-border); border-radius: 8px; padding: 8px 10px;
  font-weight: 700; color: #111;
}
.members-dashboard .mc-number, .members-dashboard .mc-name, .members-dashboard .mc-exp { font-size: 1.02rem; }
.members-dashboard .mc-meta { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; max-width: 560px; }
@media (max-width: 560px) {
  .members-dashboard .membership-card { grid-template-columns: 36% 64%; max-width: 100%; min-width: 0; }
}

/* ==============
   Discounts
   ============== */
.members-dashboard .discounts { padding: 16px; }
.members-dashboard .discounts-toolbar {
  display: grid; grid-template-columns: 1fr min(320px, 50%); gap: 12px; align-items: center; margin-bottom: 12px;
}
.members-dashboard .discounts-title { margin: 0; font-size: 1.15rem; }
.members-dashboard .discounts-search {
  width: 100%; border: 1px solid var(--md-border); border-radius: 8px; padding: 10px 12px; font-size: .95rem; outline: none;
}
.members-dashboard .discounts-search:focus { border-color: var(--md-accent); box-shadow: 0 0 0 3px rgba(35,73,255,.12); }
.members-dashboard .discounts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.members-dashboard .discount-card {
  border: 1px solid var(--md-border); border-radius: 12px; padding: 12px; background: #fff; display: grid; gap: 8px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.members-dashboard .discount-card:hover { border-color: var(--md-accent); box-shadow: 0 6px 18px rgba(11,107,242,.08); }
.members-dashboard .discount-header { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.members-dashboard .discount-heading { display: grid; gap: 2px; }
.members-dashboard .discount-name { font-weight: 600; line-height: 1.2; }
.members-dashboard .discount-link { font-size: .9rem; color: var(--md-accent); text-decoration: none; }
.members-dashboard .discount-link:hover { text-decoration: underline; }
.members-dashboard .discount-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.members-dashboard .badge {
  background: #eef3ff; color: #0b6bf2; font-size: .75rem; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(11,107,242,.25);
}
.members-dashboard .badge--warn { background: #fff5e8; color: #b05a00; border-color: rgba(176,90,0,.25); }
.members-dashboard .discount-body { display: grid; gap: 4px; }
.members-dashboard .discount-summary { margin: 0; font-weight: 500; }
.members-dashboard .discount-details { margin: 0; color: #444; }
.members-dashboard .discount-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.members-dashboard .code-button {
  border: 1px dashed var(--md-accent); background: #f7faff; color: var(--md-accent);
  border-radius: 10px; padding: 8px 10px; font-weight: 600; cursor: pointer;
}
.members-dashboard .code-button:hover { background: #eef6ff; }
.members-dashboard .code-pill {
  display: inline-block; border: 1px solid #28a745; background: #effaf2; color: #206b28;
  border-radius: 10px; padding: 8px 10px; font-weight: 700; letter-spacing: .02em; cursor: pointer;
}

/* =========================
   Second-hand: Toolbar & Grid
   ========================= */
.members-dashboard .sh-toolbar {
  display: grid; grid-template-columns: 1fr 180px auto auto; gap: 8px; align-items: center; margin: 8px 0 12px;
}
@media (max-width: 720px) { .members-dashboard .sh-toolbar { grid-template-columns: 1fr 1fr; } }
.members-dashboard .sh-input {
  height: 34px; padding: 6px 10px; border: 1px solid var(--md-border); border-radius: 8px; box-sizing: border-box;
}
.members-dashboard .sh-check { display: inline-flex; align-items: center; gap: 6px; }

/* Grid fits the container and gives images space */
.members-dashboard .sh-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px; align-items: stretch;
}

/* =========================
   Second-hand: Cards
   ========================= */
.members-dashboard .sh-card {
  border: 1px solid var(--md-border); border-radius: 12px; background: #fff; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr; transition: box-shadow .15s ease, border-color .15s ease;
}
.members-dashboard .sh-card:hover { border-color: #cfd7ff; box-shadow: 0 8px 22px rgba(18,38,63,.08); }
.members-dashboard .sh-card, .members-dashboard .sh-body, .members-dashboard .sh-title { min-width: 0; }

.members-dashboard .sh-img {
  position: relative; aspect-ratio: 3/2; background: #f7f8fb; cursor: zoom-in; display: grid; place-items: center;
}
.members-dashboard .sh-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.members-dashboard .sh-img--ph { color: #9aa3b2; font-size: .9rem; }
.members-dashboard .sh-photo-count {
  position: absolute; bottom: 8px; right: 8px; background: rgba(17,17,17,.85); color: #fff;
  font-size: .75rem; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}
.members-dashboard .sh-sold {
  position: absolute; top: 8px; left: 8px; background: #1f2937; color: #fff;
  font-weight: 700; font-size: .75rem; padding: 4px 8px; border-radius: 8px; opacity: .9;
}
.members-dashboard .sh-card.is-sold { opacity: .9; }

.members-dashboard .sh-body { padding: 12px; display: grid; gap: 8px; }
.members-dashboard .sh-head { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; }
.members-dashboard .sh-title { margin: 0; font-size: 1rem; line-height: 1.2; font-weight: 700; }
.members-dashboard .sh-price { font-weight: 800; white-space: nowrap; }

.members-dashboard .sh-meta { color: #556070; font-size: .9rem; display: flex; align-items: center; gap: 6px; }
.members-dashboard .sh-badge {
  background: #eef3ff; color: #0b6bf2; border: 1px solid rgba(11,107,242,.25);
  padding: 2px 8px; border-radius: 999px; font-size: .75rem; text-transform: capitalize;
}
.members-dashboard .sh-loc { color: #374151; }

.members-dashboard .sh-desc-wrap { display: grid; gap: 4px; }
.members-dashboard .sh-desc { margin: 0; color: #2c2f36; }
.members-dashboard .sh-more { align-self: start; }
.members-dashboard .sh-desc, .members-dashboard .sh-contact a { word-break: break-word; }

.members-dashboard .sh-contact { margin: 2px 0 0; display: grid; gap: 4px; font-size: .92rem; }
.members-dashboard .sh-contact dt { color: #6b7280; font-weight: 600; display: inline; margin-right: 6px; }
.members-dashboard .sh-contact dd { display: inline; margin: 0; }

.members-dashboard .sh-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.members-dashboard .sh-actions button { height: 30px; padding: 0 10px; border: 1px solid #d9dde5; border-radius: 6px; background: #fff; cursor: pointer; }

/* =========================
   Second-hand: Form (modal)
   ========================= */
.sh-form .oa-modal-card { padding: 16px; }
.sh-form-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
@media (max-width: 900px) { .sh-form-grid { grid-template-columns: 1fr; } }
.sh-form-col .oa-field + .oa-field { margin-top: 10px; }

.members-dashboard .sh-form .oa-field label { display: block; margin-bottom: 6px; font-weight: 600; }
.members-dashboard .oa-field.has-error input,
.members-dashboard .oa-field.has-error select,
.members-dashboard .oa-field.has-error textarea { border-color: #d94848; }
.members-dashboard .field-err { margin-top: 4px; color: #a02222; font-size: 12px; }

/* Controls — left-aligned + consistent sizing */
.members-dashboard .sh-form .oa-field input,
.members-dashboard .sh-form .oa-field select,
.members-dashboard .sh-form .oa-field textarea {
  width: 100%; box-sizing: border-box; text-align: left;
  height: 36px; padding: 8px 12px; border: 1px solid var(--md-border); border-radius: 8px; font-size: 14.5px;
}
.members-dashboard .sh-form .oa-field textarea { min-height: 120px; height: auto; line-height: 1.45; resize: vertical; }

/* Icon inputs */
.members-dashboard .input-with-icon { position: relative; }
.members-dashboard .input-with-icon .icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; opacity: .55; pointer-events: none;
}
.members-dashboard .input-with-icon input,
.members-dashboard .input-with-icon select,
.members-dashboard .input-with-icon textarea { padding-left: 38px !important; text-align: left !important; }
.members-dashboard .input-with-icon.input-lg input { padding-left: 44px !important; height: 42px; font-size: 15px; }

/* Category pills */
.members-dashboard .sh-cat-row { display: flex; flex-wrap: wrap; gap: 6px; }
.members-dashboard .sh-pill {
  border: 1px solid var(--md-border); background: #fff; border-radius: 999px;
  padding: 6px 10px; cursor: pointer; text-transform: capitalize;
}
.members-dashboard .sh-pill.is-active { background: #eef3ff; border-color: #b9cdfc; color: #0b6bf2; }

/* Price */
.members-dashboard .sh-price-wrap {
  display: grid; grid-template-columns: 24px 1fr; align-items: center;
  border: 1px solid var(--md-border); border-radius: 8px; overflow: hidden;
}
.members-dashboard .sh-price-wrap > span {
  display: inline-grid; place-items: center; background: #f7f7fb; border-right: 1px solid var(--md-border);
  height: 36px;
}
.members-dashboard .sh-price-wrap input {
  border: none; outline: none; height: 36px; padding: 0 12px; text-align: left !important;
}

/* Help text */
.members-dashboard .sh-help { margin-top: 4px; font-size: 12px; color: #666; }
.members-dashboard .sh-help .over { color: #a02222; }

/* Dropzone + previews */
.members-dashboard .sh-drop {
  border: 2px dashed #cfd7ff; border-radius: 12px; min-height: 140px;
  display: grid; place-items: center; background: #fbfdff; position: relative; padding: 10px;
}
.members-dashboard .sh-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.members-dashboard .sh-drop-cta { text-align: center; color: #555; }
.members-dashboard .sh-drop-cta .linklike { cursor: pointer; color: #0b6bf2; }
.members-dashboard .sh-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.members-dashboard .sh-thumb {
  margin: 0; position: relative; overflow: hidden; border-radius: 10px;
  border: 1px solid var(--md-border); background: #fafbff; aspect-ratio: 4/3; display: grid; place-items: center;
}
.members-dashboard .sh-thumb img { width: 100%; height: 100%; object-fit: cover; }
.members-dashboard .sh-thumb-tools {
  position: absolute; inset: auto 0 0 0; display: flex; gap: 6px; justify-content: center;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05)); padding: 6px;
}
.members-dashboard .sh-thumb-tools button {
  height: 28px; padding: 0 10px; border: 1px solid rgba(255,255,255,.6);
  border-radius: 6px; background: rgba(255,255,255,.85); cursor: pointer; font-weight: 600;
}

/* Contact & Location section */
.members-dashboard .sh-section {
  border: 1px solid var(--md-border); background: #fcfdff; border-radius: 12px; padding: 12px; margin-top: 10px;
}
.members-dashboard .sh-section-title { font-weight: 700; margin-bottom: 10px; }
.members-dashboard .sh-contact-grid {
  display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 12px 16px;
}
@media (max-width: 900px) { .members-dashboard .sh-contact-grid { grid-template-columns: 1fr; } }

/* Disclaimer */
.members-dashboard .sh-disclaimer { margin: 10px 0 0; font-size: 12px; color: #666; }

/* =========================
   Lightbox
   ========================= */
.members-dashboard .sh-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.8);
  display: grid; place-items: center; z-index: 3000; padding: 16px;
}
.members-dashboard .sh-lightbox-inner {
  width: min(1100px, 96vw); max-height: 92vh; background: #0b0b0b;
  border-radius: 12px; overflow: hidden; color: #fff; position: relative;
}
.members-dashboard .sh-lb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: rgba(255,255,255,.06);
}
.members-dashboard .sh-lb-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.members-dashboard .sh-lb-close {
  background: transparent; border: 1px solid rgba(255,255,255,.4);
  color: #fff; padding: 4px 8px; border-radius: 8px; cursor: pointer;
}
.members-dashboard .sh-lb-main { position: relative; display: grid; place-items: center; height: min(74vh, 70dvh); }
.members-dashboard .sh-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.members-dashboard .sh-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px;
  background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.35);
  cursor: pointer; display: grid; place-items: center; font-size: 28px; line-height: 1;
}
.members-dashboard .sh-lb-nav:hover { background: rgba(255,255,255,.25); }
.members-dashboard .sh-lb-nav.prev { left: 10px; }
.members-dashboard .sh-lb-nav.next { right: 10px; }
.members-dashboard .sh-lb-thumbs { display: flex; gap: 8px; padding: 8px 10px; overflow-x: auto; background: rgba(255,255,255,.06); }
.members-dashboard .sh-lb-thumb {
  flex: 0 0 auto; width: 74px; height: 54px; border-radius: 8px; overflow: hidden; padding: 0; border: 2px solid transparent;
  background: none; cursor: pointer;
}
.members-dashboard .sh-lb-thumb.is-active { border-color: #93c5fd; }
.members-dashboard .sh-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.members-dashboard .sh-lb-counter {
  position: absolute; bottom: 12px; right: 16px; background: rgba(0,0,0,.5); padding: 4px 8px; border-radius: 8px; font-size: 12px;
}

/* --- Compact cards for large lists --- */
.members-dashboard .sh-grid.sh-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.members-dashboard .sh-card--compact {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  padding-bottom: 8px;
}
.members-dashboard .sh-card--compact .sh-img { aspect-ratio: 4/3; }
.members-dashboard .sh-card--compact .sh-body { padding: 8px; gap: 4px; }
.members-dashboard .sh-card--compact .sh-title {
  font-size: .95rem; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.members-dashboard .sh-card--compact .sh-row { display: flex; align-items: center; gap: 6px; font-size: .88rem; color: #4b5563; }
.members-dashboard .sh-card--compact .sh-price { font-weight: 800; }
.members-dashboard .sh-card--compact .sh-badge { font-size: .7rem; padding: 2px 6px; }
.members-dashboard .sh-card--compact .sh-desc--2 {
  margin: 0; color: #2c2f36;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.members-dashboard .sh-actions--inline {
  display: flex; gap: 6px; padding: 0 8px;
}

/* full-card click layer */
.members-dashboard .sh-card-hit {
  position: absolute; inset: 0; z-index: 1; background: none; border: 0; padding: 0; cursor: pointer;
}
.members-dashboard .sh-actions--inline button { position: relative; z-index: 2; }

/* photo count badge (tiny) */
.members-dashboard .sh-photo-count {
  bottom: 6px; right: 6px; padding: 2px 6px; font-size: .68rem;
}

/* --- Details modal (compact but rich) --- */
.members-dashboard .sh-detail { width: min(920px, 96vw); padding: 12px; }
.members-dashboard .sh-detail-head {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: start; margin-bottom: 8px;
}
.members-dashboard .sh-detail-title { margin: 0; font-size: 1.05rem; font-weight: 800; }
.members-dashboard .sh-detail-meta { color: #4b5563; display: flex; align-items: center; gap: 6px; }
.members-dashboard .sh-detail-head > button {
  height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--md-border); background: #fff; cursor: pointer;
}

/* gallery */
.members-dashboard .sh-detail-gallery {
  position: relative; display: grid; place-items: center; background: #0b0b0b; border-radius: 10px; overflow: hidden;
  height: min(55vh, 56dvh);
}
.members-dashboard .sh-detail-gallery .hero {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
}
.members-dashboard .sh-detail-gallery .hero.ph { color: #9aa3b2; display: grid; place-items: center; width: 100%; height: 100%; }
.members-dashboard .sh-detail-gallery .nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.35);
  cursor: pointer; display: grid; place-items: center; font-size: 26px;
}
.members-dashboard .sh-detail-gallery .nav.prev { left: 10px; }
.members-dashboard .sh-detail-gallery .nav.next { right: 10px; }

/* thumbs */
.members-dashboard .sh-detail-thumbs {
  display: flex; gap: 8px; padding: 8px 2px; overflow-x: auto; margin: 6px 0 2px;
}
.members-dashboard .sh-detail-thumbs .thumb {
  flex: 0 0 auto; width: 80px; height: 60px; border-radius: 8px; overflow: hidden; padding: 0; border: 2px solid transparent; background: none; cursor: pointer;
}
.members-dashboard .sh-detail-thumbs .thumb.is-active { border-color: #93c5fd; }
.members-dashboard .sh-detail-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* body */
.members-dashboard .sh-detail-body {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; margin-top: 8px;
}
@media (max-width: 860px) { .members-dashboard .sh-detail-body { grid-template-columns: 1fr; } }
.members-dashboard .sh-detail-col h5 { margin: 0 0 6px; font-size: .95rem; }
.members-dashboard .sh-detail-text { margin: 0; white-space: pre-wrap; color: #2c2f36; }


/* Prevent background scroll while lightbox is open */
body.no-scroll { overflow: hidden; }


/* --- Event Results: Chart + Table cards --- */
.members-dashboard .md-panel { display: grid; gap: 12px; }
.members-dashboard .md-chart-card,
.members-dashboard .md-table-card {
  background: #fff; border: 1px solid var(--md-border); border-radius: 10px; padding: 12px;
}
.members-dashboard .md-chart-head {
  display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.members-dashboard .md-chart-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.members-dashboard .md-chart-control {
  display: inline-flex; align-items: center; gap: 6px; background: #f7f8fc;
  border: 1px solid var(--md-border); padding: 6px 8px; border-radius: 8px;
}
.members-dashboard .md-chart-control select { border: 1px solid var(--md-border); border-radius: 6px; padding: 4px 6px; }
.members-dashboard .md-chart-body { display: grid; gap: 6px; }
.members-dashboard .md-chart-foot { font-size: 12px; }

/* secondhand.css */

/* ------------------------------
   Design tokens
------------------------------ */
:root {
  --sh-bg: #ffffff;
  --sh-muted: #6b7280;
  --sh-border: #e5e7eb;
  --sh-border-strong: #d1d5db;
  --sh-surface: #f8fafc;
  --sh-brand: #1f3a93;
  --sh-accent: #0ea5e9;
  --sh-danger: #dc2626;

  --sh-radius: 10px;
  --sh-radius-sm: 8px;
  --sh-gap: 12px;
  --sh-gap-lg: 16px;
  --sh-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(16,24,40,.06);
}

/* ------------------------------
   Grid / layout
------------------------------ */
.sh-wrap {
  display: grid;
  gap: var(--sh-gap-lg);
}

.sh-grid {
  display: grid;
  gap: var(--sh-gap);
}

/* Fixed min card size; auto-fill columns */
.sh-grid.sh-grid--fixedCols {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ------------------------------
   Cards
------------------------------ */
.sh-card {
  background: var(--sh-bg);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius);
  box-shadow: var(--sh-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Image box with consistent shape across the grid */
.sh-card .sh-img {
  position: relative;
  aspect-ratio: 4 / 3;           /* uniform look for all cards */
  background: #f6f8fa;
  overflow: hidden;
}

.sh-card .sh-img > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;             /* fill the box; crop if needed */
  object-position: center;
}

/* Placeholder if no image */
.sh-img--ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--sh-muted);
  font-size: 0.9rem;
}

/* Content */
.sh-card .sh-body {
  padding: 10px 12px 12px;
  display: grid;
  gap: 8px;
}

.sh-title {
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.25;
  color: #111827;
  margin: 0;
}

.sh-desc {
  color: #374151;
  font-size: 0.92rem;
  line-height: 1.35;
  margin: 0;
}

/* Clamp description on cards */
.sh-desc--2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta row: price + small facts */
.sh-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--sh-muted);
  font-size: 0.86rem;
}

.sh-price {
  color: #111827;
  font-weight: 700;
  margin-right: auto;
}

.sh-chip {
  border: 1px solid var(--sh-border);
  background: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.78rem;
}

/* Actions (e.g., View / Contact) */
.sh-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.sh-actions .btn {
  appearance: none;
  border: 1px solid var(--sh-border-strong);
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.9rem;
  cursor: pointer;
}

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

/* ------------------------------
   Detail modal / drawer
------------------------------ */
.sh-modal {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.5);
  display: grid;
  place-items: center;
  z-index: 1000;
}

.sh-modal-card {
  width: min(980px, 94vw);
  max-height: 94vh;
  background: var(--sh-bg);
  border: 1px solid var(--sh-border);
  border-radius: 14px;
  box-shadow: var(--sh-shadow);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* header */
.sh-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--sh-border);
}

.sh-modal-head h3 {
  font-size: 1.1rem;
  margin: 0;
}

.sh-modal-head .close {
  appearance: none;
  background: #fff;
  border: 1px solid var(--sh-border-strong);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  font-size: 18px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}

/* two columns: media | details */
.sh-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); /* allow growth */
  gap: 14px;
  padding: 12px;
}

/* Make sure grid items can shrink/expand (prevents tiny hero) */
.sh-modal-body > * {
  min-width: 0;
  min-height: 0;
}

@media (max-width: 900px) {
  .sh-modal-body {
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    overflow: auto;
  }
}

/* ------------------------------
   Gallery (detail view) — BIG hero that fills space
------------------------------ */
.sh-detail-gallery {
  width: 100%;
  min-width: 0;                                    /* essential inside grids */
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px; /* prev | HERO | next */
  grid-template-rows: minmax(380px, 78vh);         /* tall row to fill viewport */
  grid-template-areas: "prev hero next";
  align-items: stretch;                             /* hero fills row height */
  gap: 8px;
}

/* Place items into named areas (works even if DOM order changes) */
.sh-detail-gallery .nav.prev { grid-area: prev; }
.sh-detail-gallery .nav.next { grid-area: next; }
.sh-detail-gallery .hero     { grid-area: hero; }

/* Fallback if .prev/.next classes aren't present */
.sh-detail-gallery > .nav:first-child { grid-area: prev; }
.sh-detail-gallery > .nav:last-child  { grid-area: next; }
.sh-detail-gallery > img.hero         { grid-area: hero; }

/* Make the hero fully occupy that big box and scale nicely
   — black background for any letterboxing */
.sh-detail-gallery .hero {
  width: 100%;
  height: 100%;
  object-fit: contain;                              /* show entire image */
  background: #000;                                 /* <-- black, not white */
  border-radius: var(--sh-radius-sm);
  display: block;
}

@media (max-width: 900px) {
  .sh-detail-gallery {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    grid-template-rows: minmax(320px, 72vh);
  }
}

/* arrows */
.sh-detail-gallery .nav {
  appearance: none;
  border: 1px solid var(--sh-border-strong);
  background: #fff;
  width: 44px; height: 44px;
  border-radius: 999px;
  font-size: 20px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
}

.sh-detail-gallery .nav:disabled {
  opacity: .4;
  cursor: default;
}

/* Thumbnail strip */
.sh-detail-thumbs {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.sh-detail-thumbs .thumb {
  width: 72px; height: 72px;
  border: 1px solid #333;                           /* darker border */
  background: #000;                                 /* match black background */
  border-radius: 6px;
  overflow: hidden;
  flex: 0 0 auto;
  cursor: pointer;
}

.sh-detail-thumbs .thumb.active {
  outline: 2px solid var(--sh-accent);
  outline-offset: -2px;
}

.sh-detail-thumbs .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;               /* crop small previews nicely */
  display: block;
}

/* ------------------------------
   Detail info panel
------------------------------ */
.sh-detail-info {
  display: grid;
  gap: 10px;
  align-content: start;
}

.sh-detail-info .price {
  font-size: 1.2rem;
  font-weight: 800;
}

.sh-detail-info .muted {
  color: var(--sh-muted);
}

.sh-detail-info .meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sh-detail-info .meta .chip {
  border: 1px solid var(--sh-border);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.8rem;
  background: #fff;
}

/* Contact / actions */
.sh-detail-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.sh-detail-actions .btn {
  appearance: none;
  border: 1px solid var(--sh-border-strong);
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
}

.sh-detail-actions .btn.primary {
  background: var(--sh-brand);
  border-color: var(--sh-brand);
  color: #fff;
}

/* ------------------------------
   Form (new listing) – optional polish
------------------------------ */
.sh-form {
  display: grid;
  gap: 10px;
}

.sh-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 640px) {
  .sh-form .row { grid-template-columns: 1fr; }
}

.sh-form label {
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
}

.sh-form input[type="text"],
.sh-form input[type="number"],
.sh-form textarea {
  border: 1px solid var(--sh-border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: #fff;
}

.sh-form textarea {
  min-height: 90px;
  resize: vertical;
}

.sh-form .help {
  color: var(--sh-muted);
  font-size: 0.82rem;
}

.sh-form .actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.sh-form .btn {
  appearance: none;
  border: 1px solid var(--sh-border-strong);
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
}

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

/* ------------------------------
   Utilities
------------------------------ */
.muted { color: var(--sh-muted); }
.text-danger { color: var(--sh-danger); }

/* Prevent body scroll when modal is open (toggle class in JS) */
body.no-scroll { overflow: hidden; }

/* Better scrolling on iOS for the modal content */
.sh-modal-card { -webkit-overflow-scrolling: touch; }
.cookie-banner {
  position: fixed;
  inset-inline: 12px;
  bottom: 12px;
  z-index: 1000;
  background: #111827;          /* neutral-900 */
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  max-width: 920px;
  margin: 0 auto;
}

.cookie-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
}

.cookie-text p {
  margin: 6px 0 0;
  color: #e5e7eb;               /* neutral-200 */
  line-height: 1.45;
}

.cookie-text a {
  color: #93c5fd;               /* blue-300 */
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cookie-actions button {
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .05s ease, filter .15s ease;
}

.cookie-actions .accept {
  background: #2563eb;          /* blue-600 */
  color: #fff;
}

.cookie-actions .accept:hover { filter: brightness(1.05); }
.cookie-actions .accept:active { transform: translateY(1px); }

.cookie-actions .reject {
  background: #374151;          /* neutral-700 */
  color: #fff;
}

.cookie-actions .reject:hover { filter: brightness(1.05); }
.cookie-actions .reject:active { transform: translateY(1px); }

/* Stack on small screens */
@media (max-width: 640px) {
  .cookie-inner {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .cookie-actions { justify-content: flex-start; }
}
.sponsors { max-width: 1100px; margin: 0 auto; }
.s-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.s-search { border: 1px solid var(--line, #e2e6ee); border-radius: 10px; padding: 10px 12px; width: min(340px, 60%); }

.s-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.s-card { padding: 12px; display: grid; gap: 8px; }
.s-row { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.s-logo img, .s-logo-fallback { width: 64px; height: 64px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid #e6e8ef; display: grid; place-items: center; font-weight: 800; color: #334; }
.s-name { margin: 0; font-size: 1.05rem; }
.s-name a { text-decoration: none; }
.s-meta { font-size: .9rem; color: #556; }
.s-desc { margin: 0; color: #444; }
/* KPI grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.kpi { background:#f7f9fe; border:1px solid #e2e8f7; border-radius:10px; padding:8px 12px; }
.kpi-h { font-size:12px; color:#616c82; }
.kpi-v { font-size:18px; font-weight:700; }
.kpi-inline { display:flex; gap:8px; flex-wrap:wrap; }

/* Tabs */
.tabs { display:flex; gap:6px; border-bottom:1px solid #e2e8f7; margin-bottom:8px; flex-wrap:wrap; }
.tab {
  padding:6px 10px;
  border:1px solid #ccd6f6;
  border-bottom:none;
  border-radius:8px 8px 0 0;
  background:#eef2ff;
  font-size:13px;
  cursor:pointer;
  color:#21325b;
}
.tab.active {
  background:#ffffff;
  color:#111827;
  font-weight:700;
  position:relative;
  top:1px; /* lift over the border line */
  border-color:#93a5ff;
  z-index:1;
}

/* Table chips/badges */
.statuschip {
  font-size:12px; padding:2px 6px; border-radius:6px;
  background:#eef2ff; border:1px solid #dfe6ff;
}
.scopechip {
  font-size:11px; margin-left:6px; padding:1px 6px; border-radius:999px;
  background:#f1f5f9; border:1px solid #d7dee7; color:#334155;
}
.badges { display:flex; gap:4px; flex-wrap:wrap; }
.badge { font-size:12px; padding:2px 6px; border-radius:999px; border:1px solid; line-height:16px; }
.badge.low  { background:#f6fff7; border-color:#b6e3bd; }
.badge.med  { background:#fffaf0; border-color:#f1c27d; }
.badge.high { background:#fff5f5; border-color:#f1998e; }

/* Suspicious row highlight (very subtle) */
.row-suspicious { background: #fff8f8; }

/* General */
.muted { color:#6b7280; }
.ea-table-wrap { overflow:auto; }