/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Alert badge pulse — draws attention to new alerts in the sidebar */
@keyframes alert-pulse {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.4); }
  50% { transform: scale(1); }
  75% { transform: scale(1.4); }
}
.animate-alert-pulse {
  animation: alert-pulse 0.8s ease-in-out;
}

/* Flash alert banner — pulses background for urgency */
@keyframes flash-alert {
  0%, 100% { background-color: #fef2f2; }
  25% { background-color: #fecaca; }
  50% { background-color: #fef2f2; }
  75% { background-color: #fecaca; }
}
.animate-flash-alert {
  animation: flash-alert 1.2s ease-in-out;
}

/* Theme-aligned booking CTA. Each website theme layout sets the --theme-cta*
   variables; where they're absent (embed, account area) buttons keep the
   original blue. `background` shorthand so gradient themes (dawn) work. */
.theme-cta {
  background: var(--theme-cta, #2563eb);
  color: var(--theme-cta-text, #ffffff);
}
.theme-cta:hover {
  background: var(--theme-cta-hover, var(--theme-cta, #3b82f6));
}

/* Theme-aligned system-page header band (class/course/camp detail).
   Layouts set --theme-header-* vars; the fallback is the original slate
   gradient with white type. Dawn keeps its bespoke gradient branch in the
   views, but its pill/photo fall through to these same defaults. */
.theme-header {
  background: var(--theme-header-bg, linear-gradient(to right, #1f2937, #4b5563));
  border-bottom: 1px solid var(--theme-header-border, transparent);
}
.theme-header-title { color: var(--theme-header-text, #ffffff); }
.theme-header-meta { color: var(--theme-header-muted, rgba(255, 255, 255, 0.9)); }
.theme-header-pill {
  background: var(--theme-header-pill-bg, rgba(255, 255, 255, 0.2));
  color: var(--theme-header-pill-text, #ffffff);
}
/* The slant only makes sense when the hero photo sits beside the text (md+);
   below that the hero stacks and the photo keeps a straight edge. */
@media (min-width: 768px) {
  .theme-header-photo { clip-path: var(--theme-header-photo-clip, polygon(0 0, 85% 0, 100% 100%, 0% 100%)); }
}

/* Theme-aligned active tab on system pages. Layouts set the var; the
   fallback is the original blue tab, so themes that don't set it are
   unchanged. */
.theme-tab-active {
  border-color: var(--theme-accent, #2563eb);
  color: var(--theme-accent, #2563eb);
}

/* Personal targeted-discount notice on public listing/event pages. Tinted
   from the theme accent (same var/fallback contract as .theme-tab-active);
   color-mix over transparent keeps it legible on any theme surface. */
.discount-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem 1.125rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--theme-accent, #2563eb) 30%, transparent);
  background: color-mix(in srgb, var(--theme-accent, #2563eb) 8%, transparent);
}
.discount-banner svg {
  color: var(--theme-accent, #2563eb);
  margin-top: 0.125rem;
}
.discount-banner a {
  color: var(--theme-accent, #2563eb);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.discount-accent { color: var(--theme-accent, #2563eb); }

/* Live Edit mode */
.edit-mode-offset {
  padding-top: 3.5rem;
}

.edit-mode .live-edit-field {
  position: relative;
  outline: 2px dashed transparent;
  outline-offset: 4px;
  transition: outline-color 0.15s ease;
  cursor: pointer;
}

.edit-mode .live-edit-field:hover {
  outline-color: #3b82f6;
}

.live-edit-pencil {
  display: none;
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  background: #3b82f6;
  color: white;
  border-radius: 9999px;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  z-index: 10;
  text-decoration: none;
}

.edit-mode .live-edit-field:hover .live-edit-pencil {
  display: flex;
}

.edit-mode .live-edit-image-wrapper {
  position: relative;
  cursor: pointer;
}

.live-edit-camera-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  z-index: 10;
}

.edit-mode .live-edit-image-wrapper:hover .live-edit-camera-overlay {
  display: flex;
}

.edit-mode .gallery-image-wrapper {
  position: relative;
}

.gallery-delete-btn {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  background: rgba(239, 68, 68, 0.9);
  color: white;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
  cursor: pointer;
  border: none;
}

.edit-mode .gallery-image-wrapper:hover .gallery-delete-btn {
  opacity: 1;
}

.loading {
  opacity: 0.5;
  pointer-events: none;
}

/* Finished-listing lock (admin course/event/camp forms): native inputs are
   disabled by the wrapping <fieldset disabled>, but trix-editor is not a
   form control, so lock it visually and to the pointer here. The server
   enforces the lock regardless (params sliced to is_template). */
fieldset:disabled trix-toolbar {
  display: none;
}
fieldset:disabled trix-editor {
  pointer-events: none;
  background-color: #f9fafb;
  color: #6b7280;
}
fieldset:disabled input,
fieldset:disabled select,
fieldset:disabled textarea {
  background-color: #f9fafb;
  color: #6b7280;
}

/* Google Places autocomplete. The widget is a closed-shadow web component:
   its internals are unreachable and the documented --gmp-mat-* custom
   properties are not honoured by the version we load (a garish test surface
   applied to the host changed nothing). So the wrapper the Stimulus
   controller unhides carries the input chrome instead, matching the plain
   text fields beside it. One rule rather than classes repeated across the
   four templates that render the field. Do not add overflow clipping — the
   suggestion list renders inside the element. */
[data-places-autocomplete-target="widget"] {
  border: 1px solid var(--color-gray-300, #d1d5db);
  border-radius: var(--radius-md, 0.375rem);
  background: var(--color-white, #fff);
}
/* The host element itself is reachable even though its shadow is not, and
   document rules outrank the component's own :host styles, so no !important
   is needed. 40px + the wrapper's two 1px borders = the 42px of a sibling
   text input; the component would otherwise stand 48px tall in Google Sans. */
[data-places-autocomplete-target="widget"] gmp-place-autocomplete {
  height: 40px;
  font-family: inherit;
  font-size: 1rem;
}