/* Locafire external components global and shadow styles */

:host, :root {
  --system-font: 'Poppins', sans-serif;

  /* Brand colors */
  --color-primary: #4caf50;
  --color-primary-soft: #f1fff3;
  --color-primary-background: #f4fff6;
  --color-warning: #facf11;

  /* Backward-compatible aliases */
  --primary-color: var(--color-primary);
  --secondary-color: var(--color-primary-soft);
  --warning: var(--color-warning);

  /* Base palette */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: transparent;
  --color-surface: #ffffff;
  --color-surface-soft: #f7fbf7;
  --color-surface-muted: #f8f8f8;
  --color-field-background: #fbfffb;
  --color-image-background: #f6f6f6;

  /* Text palette */
  --color-text-plain: #111111;
  --color-text-950: #0f2415;
  --color-text: #102116;
  --color-text-850: #15251a;
  --color-text-heading: #162216;
  --color-text-body: #172017;
  --color-text-action: #1f2a1f;
  --color-text-dark: #222222;
  --color-text-label: #263326;
  --color-text-info: #333333;
  --color-text-description: #364636;
  --color-text-field-label: #36483b;
  --color-text-neutral: #555555;
  --color-text-hero-muted: #5c6e61;
  --color-text-muted: #617061;
  --color-text-subtle: #666666;
  --color-text-card-muted: #69796d;
  --color-text-action-muted: #6b786e;
  --color-text-meta: #6f7d72;
  --color-text-secondary: #777777;
  --color-text-placeholder-strong: #888888;
  --color-placeholder: #a0ada4;
  --color-heading-muted: #aaaaaa;

  /* Borders */
  --color-border: #dfe8df;
  --color-border-soft: #edf2ed;
  --color-border-light: #eeeeee;
  --color-border-card: #e0e0e0;
  --color-border-section: #e5e5e5;
  --color-border-neutral: #d3d3d3;
  --color-border-input: #d5d5d5;
  --color-border-disabled: #d8d8d8;
  --color-border-hover: #dddddd;

  /* UI state colors */
  --color-success-text: #166534;
  --color-success-text-strong: #1f6f32;
  --color-success-action: #2f7d3b;
  --color-success-background: #ecfdf3;
  --color-danger: #c0392b;
  --color-danger-dark: #b00020;
  --color-danger-border: #d9363e;
  --color-danger-border-soft: #e3a4a4;
  --color-danger-background-strong: #ff4d4f;
  --color-error-text: #a70000;
  --color-error-background: #ffecec;
  --color-error-background-soft: #fff1f1;
  --color-error-background-light: #fff2f2;
  --color-form-error-background: #fff5f4;
  --color-warning-text: #854d0e;
  --color-warning-text-strong: #936400;
  --color-warning-background: #fff8df;
  --color-warning-background-soft: #fffbeb;

  /* Component accents */
  --color-breadcrumb-bg: #d1f6e5;
  --color-breadcrumb-active: #839b79;
  --color-breadcrumb-future: #a9a9a9;
  --color-calendar-disabled: #bbbbbb;
  --color-calendar-disabled-background: #f5f5f5;
  --color-control-disabled: #b6c0b6;
  --color-validation-border: #b7c1b7;
  --color-validation-background: #f2f4f2;
  --color-best-border: #f2cd2f;
  --color-best-background: #ffe45f;
  --color-badge-text: #3f3100;
  --color-checkbox-border: #00c853;
  --color-checkbox-mark: #00b84a;
  --color-checkbox-background: #eafff2;
  --color-snackbar-success: #2ecc71;
  --color-snackbar-error: #e74c3c;

  /* Alpha colors and shadows */
  --color-primary-alpha-10: rgba(76, 175, 80, 0.10);
  --color-primary-alpha-12: rgba(76, 175, 80, 0.12);
  --color-primary-alpha-14: rgba(76, 175, 80, 0.14);
  --color-primary-alpha-15: rgba(76, 175, 80, 0.15);
  --color-primary-alpha-16: rgba(76, 175, 80, 0.16);
  --color-primary-alpha-18: rgba(76, 175, 80, 0.18);
  --color-primary-alpha-22: rgba(76, 175, 80, 0.22);
  --color-primary-alpha-24: rgba(76, 175, 80, 0.24);
  --color-primary-alpha-28: rgba(76, 175, 80, 0.28);
  --color-primary-alpha-32: rgba(76, 175, 80, 0.32);
  --color-primary-alpha-45: rgba(76, 175, 80, 0.45);
  --color-primary-alpha-55: rgba(76, 175, 80, 0.55);
  --color-primary-alpha-72: rgba(76, 175, 80, 0.72);
  --color-blue-alpha-30: rgba(31, 60, 136, 0.3);
  --color-blue-alpha-85: rgba(31, 60, 136, 0.85);
  --color-white-30: rgba(255,255,255,0.3);
  --color-white-60: rgba(255,255,255,0.6);
  --color-white-80: rgba(255,255,255,0.8);
  --color-white-90: rgba(255, 255, 255, 0.9);
  --color-white-92: rgba(255, 255, 255, 0.92);
  --color-white-94: rgba(255, 255, 255, 0.94);
  --color-white-96: rgba(255,255,255,0.96);
  --color-primary-gradient-96: rgba(248, 255, 249, 0.96);
  --color-primary-gradient-98: rgba(246, 255, 247, 0.98);
  --color-dot-background: rgba(22, 34, 22, 0.35);

  --border-text-13: rgba(16, 33, 22, 0.13);
  --border-danger-18: rgba(192, 57, 43, 0.18);
  --shadow-black-06: rgba(0, 0, 0, 0.06);
  --shadow-black-16: rgba(0, 0, 0, 0.16);
  --shadow-black-20: rgba(0,0,0,0.2);
  --shadow-black-25: rgba(0,0,0,0.25);
  --shadow-black-30: rgba(0, 0, 0, 0.30);
  --shadow-green-08: rgba(20, 50, 28, 0.08);
  --shadow-green-10: rgba(20, 50, 28, 0.10);
  --shadow-card: 0 18px 45px var(--shadow-green-10);
  --shadow-hero-green-10: rgba(19, 79, 32, 0.10);
  --shadow-text-06: rgba(16, 33, 22, 0.06);
  --shadow-text-08: rgba(16, 33, 22, 0.08);
  --shadow-text-10: rgba(16, 33, 22, 0.10);
  --shadow-text-12: rgba(16, 33, 22, 0.12);
  --shadow-text-16: rgba(16, 33, 22, 0.16);
  --shadow-text-18: rgba(16, 33, 22, 0.18);
  --shadow-checkbox-focus: rgba(0, 200, 83, 0.12);

  /* Generic component aliases */
  --lf-radius: 999px;
  --lf-text: var(--color-text);
}

.cart-link {
  border: none;
  background: var(--color-black);
  color: var(--color-white);
  padding: 14px 22px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.cart-link:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px var(--shadow-black-16);
}

.cart-link:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
}

:host, body {
  font-family: var(--system-font);
}

/* BREADCRUMB */
.breadcrumb {
  display: flex;
  list-style: none;
  justify-content: center;
  padding: 25px;
  width: 95%;
  background-color: var(--color-breadcrumb-bg);
  border-radius: 15px;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: -25px;
  margin-bottom: -25px;
  padding: 10px 20px;
  font-size: 1.5em;
  width: 40%;
  text-align: center;
}

.breadcrumb li span {
  text-align: left !important;
}

.breadcrumb li:last-child::after {
  content: '';
}

.breadcrumb .past,
.breadcrumb .current {
  color: var(--color-breadcrumb-active);
}

.breadcrumb .past {
  font-weight: lighter;
  cursor: pointer;
}

.breadcrumb .current {
  font-weight: bold;
}

.breadcrumb .active {
  color: var(--color-breadcrumb-active) !important;
  cursor: pointer;
}

.breadcrumb .current span {
  animation: glow 1s infinite alternate;
}

.breadcrumb .future {
  color: var(--color-breadcrumb-future);
  font-weight: lighter;
}

/* MEDIA BREADCRUMB */
@media (min-width: 800px) and (max-width: 1200px) {
  .breadcrumb {
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin: 0 !important;
    height: 50px !important;
    padding: 0 !important;
  }

  .breadcrumb li {
    display: block;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }
}

@media (max-width: 800px) {
  .breadcrumb {
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    top: -100px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    font-size: 0.7em !important;
  }

  .breadcrumb li {
    display: block;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }
}

/* ANIMATION */
@keyframes glow {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

/* BUTTON GROUP */
.button-group {
  display: inline-flex;
  border: 2px solid var(--primary-color);
  border-radius: 10px;
  overflow: hidden;
}

.button-group .left-button {
  border: 0;
  width: 50%;
  cursor: pointer;
  background-color: var(--secondary-color);
  padding-left: 15px;
  border-right: 1px solid var(--color-breadcrumb-active);
}

.button-group .right-button {
  border: 0;
  width: 50%;
  cursor: pointer;
  padding-left: 10px;
  background-color: var(--secondary-color);
}

.button-group button {
  cursor: pointer;
  padding: 8px 16px;
  box-shadow: none;
}

/* LOADER */
.lds-roller,
.lds-roller div,
.lds-roller div:after {
  box-sizing: border-box;
}

.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}

.lds-roller div:after {
  content: "";
  position: absolute;
  width: 7.2px;
  height: 7.2px;
  border-radius: 50%;
  background: currentColor;
  margin: -3.6px 0 0 -3.6px;
}

/* (keeping your nth-child rules unchanged) */

/* ANIMATION */
@keyframes lds-roller {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* RESPONSIVE */
@media (min-width: 901px) {
  .only-mobile {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .only-desktop {
    display: none !important;
  }
}

.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-width: 170px;
  padding: 0.95rem 1.5rem;
  border: 0;
  border-radius: var(--lf-radius);
  color: var(--lf-text);
  font-family: Inter, Arial, sans-serif;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease;
  box-shadow:
    0 2px 4px var(--shadow-black-06),
    0 6px 12px var(--shadow-black-30);
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}

.btn:not(:disabled):active {
  transform: translateY(2px);
  box-shadow:
    0 1px 2px var(--shadow-black-20),
    inset 0 3px 6px var(--shadow-black-25);
}
/* reflet diagonal visible */
.btn::after {
  z-index: 2;
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;

  background: linear-gradient(
    75deg,
    var(--color-transparent) 0%,
    var(--color-white-80) 50%,
    var(--color-transparent) 100%
  );

  transition: left 0.7s ease;
}

/* animation à l’apparition */
@keyframes shine {
  0% {
    left: -120%;
  }
  100% {
    left: 120%;
  }
}

/* reflet */
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;

  background: linear-gradient(
    75deg,
    var(--color-transparent) 0%,
    var(--color-white-60),
    var(--color-transparent) 100%
  );

  z-index: 2;
  pointer-events: none;

  animation: shine 1s ease forwards; /* 👈 joue au chargement */
}

/* hover = rejoue l’animation */
.btn:hover::after {
  animation: shine 0.7s ease;
}

/* animation */
.btn:hover::after {
  left: 120%;
}

/* INFO */
.btn-info {
  background: var(--secondary-color);
  color: var(--primary-color);
}

.btn-validate {
  background: var(--primary-color);
  color: var(--color-white);
}

.btn-primary {
  background: var(--primary-color);
  color: white;
}


/* CONTACT */
.btn-contact {
  background: var(--color-white-30);
  border: 1px solid var(--color-blue-alpha-30);
  color: var(--primary-color);
}

/* MISE EN AVANT */
.btn-highlight {
  background: var(--color-blue-alpha-85);
  color: var(--color-white);
}

/* ACHETER */
.btn-buy {
  background: var(--color-black);
  color: var(--color-white);
}

.btn:disabled:active::after,
.btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  filter: grayscale(1) !important;
}

.btn:disabled:active::after,
.btn:disabled::after,
.btn:disabled:hover::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* FORMS */
.form-error {
  color: var(--color-danger);
  font-size: .8em;
}

.field {
  display: inline-block;
  vertical-align: top;
  padding: 15px;
  input {width: 100%; font-size:1.8em;padding: 5px;border-radius: 5px;}
}

.half {
  width: 46%;
  
  &.btn {
    left: 8px;
    width: 48.2%!important;
  }
}

.full {
  width: 97%;
}

.quarter {
  width: 24%;
}

.three-quarter {
  width: 70%;
}

.pull-right {
  float: right;
  clear: both;
}

.btn {
  padding: 15px;
  margin: 30px 8px;
  border-radius: 5px;
}

.form-footer {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px var(--color-border-neutral) solid;
}

h3 {
  display: block;
  color: var(--color-heading-muted);
  font-size: 1.6em;
  border-bottom: 1px var(--color-border-neutral) solid;
  margin-bottom: 0;
}

/* SHARED SHOP ACTIONS */
.ghost-action,
.cart-action {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

.ghost-action {
  background: var(--color-surface);
  color: var(--color-text-action);
}

.cart-action {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 10px 22px var(--color-primary-alpha-22);
}

.ghost-action:hover,
.cart-action:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.cart-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
}

.title-icon,
.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 16px;
  background: var(--color-primary-soft);
}

/* SHARED EVENT SELECTORS */
.event-card,
.cart-event-card {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-white);
  padding: 14px;
  color: var(--color-text-body);
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.event-card:hover,
.event-card.selected,
.cart-event-card:hover,
.cart-event-card.selected {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: 0 12px 24px var(--color-primary-alpha-16);
}

.event-card.selected,
.cart-event-card.selected {
  background: linear-gradient(135deg, var(--color-white) 0%, var(--color-primary-soft) 100%);
}

.event-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-white);
  background: var(--color-white);
  font-weight: 900;
}

.event-card.selected .event-check,
.cart-event-card.selected .event-check {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.event-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.event-content span,
.event-content small,
.state-message {
  color: var(--color-text-muted);
}

.state-message {
  border-radius: 16px;
  background: var(--color-white);
  padding: 14px;
  font-weight: 700;
}

.state-message.error {
  color: var(--color-danger-dark);
  background: var(--color-error-background-light);
}