/* === Paradise Coast Mahjong — SimpleTix branding === */

/* Fonts (Google Fonts) */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600&display=swap");

/* Design tokens */
:root {
  --pcm-primary: #2F7F7A;
  --pcm-primary-hover: #276B67;
  --pcm-secondary: #5FA8C6;
  --pcm-accent: #4F8F5B;
  --pcm-soft: #A7D8E8;
  --pcm-bg: #F7F5F2;
  --pcm-surface: #FFFFFF;
  --pcm-surface-alt: #E8DFC9;
  --pcm-text: #333333;
  --pcm-text-muted: #6B6B6B;
  --pcm-border: #D9D9D9;
  --pcm-radius-sm: 12px;
  --pcm-radius-lg: 20px;
  --pcm-radius-pill: 999px;
  --pcm-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  --pcm-focus: 0 0 0 3px rgba(47, 127, 122, 0.18);
  --pcm-font-head: "Cormorant Garamond", Georgia, serif;
  --pcm-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Page chrome */
body,
.simpletix,
.simpletix-widget,
.event-page,
.checkout-page {
  background: var(--pcm-bg) !important;
  color: var(--pcm-text);
  font-family: var(--pcm-font-body);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4,
.event-title, .event-name,
.modal-title, .panel-title {
  font-family: var(--pcm-font-head);
  color: var(--pcm-text);
  font-weight: 600;
  letter-spacing: 0.2px;
}

a, a:visited { color: var(--pcm-primary); }
a:hover, a:focus-visible { color: var(--pcm-primary-hover); }

/* Buttons (Buy Tickets, Continue, Checkout) */
.btn,
.btn-primary,
.btn-success,
.simpletix-button,
button[type="submit"],
input[type="submit"] {
  background: var(--pcm-primary) !important;
  border: 1.5px solid var(--pcm-primary) !important;
  color: #fff !important;
  border-radius: var(--pcm-radius-pill) !important;
  padding: 14px 24px !important;
  font-family: var(--pcm-font-body);
  font-weight: 600;
  font-size: 0.975rem;
  letter-spacing: 0.2px;
  box-shadow: none;
  text-transform: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.btn:hover,
.btn-primary:hover,
.btn-success:hover,
.simpletix-button:hover,
button[type="submit"]:hover {
  background: var(--pcm-primary-hover) !important;
  border-color: var(--pcm-primary-hover) !important;
}

.btn-secondary,
.btn-default {
  background: transparent !important;
  border: 1.5px solid var(--pcm-primary) !important;
  color: var(--pcm-primary) !important;
}
.btn-secondary:hover,
.btn-default:hover {
  background: #EAF4F3 !important;
}

/* Cards / panels (event list, ticket types, summary) */
.event-card,
.event-list-item,
.event-row,
.ticket-row,
.panel,
.panel-default,
.modal-content,
.card {
  background: var(--pcm-surface);
  border: 1px solid #ECE7DF;
  border-radius: var(--pcm-radius-lg);
  box-shadow: var(--pcm-shadow);
  color: var(--pcm-text);
}

.event-meta,
.event-date,
.event-time,
.ticket-price,
.help-block,
.muted, .text-muted {
  color: var(--pcm-text-muted) !important;
  font-size: 0.9rem;
}

/* Tags / badges (e.g. "Beginner-friendly") */
.label, .badge, .tag {
  background: transparent;
  color: var(--pcm-accent);
  font-weight: 600;
  border: 1px solid var(--pcm-accent);
  border-radius: var(--pcm-radius-pill);
  padding: 2px 10px;
}

/* Form inputs — visual only, no layout overrides */
.checkout-page input[type="text"],
.checkout-page input[type="email"],
.checkout-page input[type="tel"],
.checkout-page input[type="password"],
.checkout-page textarea,
input.form-control,
textarea.form-control {
  border: 1px solid var(--pcm-border) !important;
  background: #fff !important;
  border-radius: var(--pcm-radius-sm) !important;
  color: var(--pcm-text);
  box-shadow: none;
}

/* Don't restyle <select> at all — let SimpleTix own quantity dropdowns.
   Only tweak the focus ring so it matches the brand. */
.checkout-page input:focus,
.checkout-page textarea:focus,
.checkout-page select:focus,
.checkout-page .form-control:focus {
  outline: none;
  border-color: var(--pcm-primary) !important;
  box-shadow: var(--pcm-focus) !important;
}

/* Modal / popup checkout */
.modal-content {
  border: none;
  border-radius: var(--pcm-radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}
.modal-header {
  border-bottom: 1px solid #ECE7DF;
}
.modal-footer {
  border-top: 1px solid #ECE7DF;
}

/* Pinboard / Calendar widget tweaks */
.simpletix-widget .event-title {
  font-size: 1.25rem;
}
.simpletix-widget .event-card,
.simpletix-widget .event-list-item {
  padding: 24px;
}

/* Quantity selector */
.ticket-quantity input,
input[type="number"].ticket-qty {
  text-align: center;
}

/* Calendar widget (if used) */
.calendar-widget .day.has-event {
  background: color-mix(in srgb, var(--pcm-soft) 28%, white);
  border-radius: 8px;
}
.calendar-widget .event-dot {
  background: var(--pcm-primary);
}

/* Footer / "Powered by" — tone down */
.simpletix-footer,
.powered-by {
  color: var(--pcm-text-muted);
  font-size: 12px;
}

/* Accessibility: visible focus everywhere */
:where(a, button, [tabindex], input, select, textarea):focus-visible {
  outline: 2px solid var(--pcm-primary);
  outline-offset: 2px;
}

/* Reduce motion respects OS preference */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}