/* Glass Traveler - Foxy Customer Portal Theme
   Designed to match the Glass Traveler black / gold website.
   Foxy Customer Portal uses Vaadin's Lumo theme.
*/

:root {
  /* Core Lumo palette */
  --lumo-base-color: #171512;
  --lumo-primary-color: #b98b47;
  --lumo-primary-color-50pct: rgba(185, 139, 71, 0.50);
  --lumo-primary-color-10pct: rgba(185, 139, 71, 0.12);
  --lumo-primary-text-color: #d6ad6a;

  --lumo-body-text-color: #f4efe6;
  --lumo-secondary-text-color: #c9bda9;
  --lumo-tertiary-text-color: #9f927e;
  --lumo-disabled-text-color: rgba(244, 239, 230, 0.42);

  --lumo-header-text-color: #f4efe6;

  --lumo-contrast: 95%;
  --lumo-contrast-90pct: rgba(244, 239, 230, 0.90);
  --lumo-contrast-80pct: rgba(244, 239, 230, 0.80);
  --lumo-contrast-70pct: rgba(244, 239, 230, 0.70);
  --lumo-contrast-60pct: rgba(244, 239, 230, 0.60);
  --lumo-contrast-50pct: rgba(244, 239, 230, 0.50);
  --lumo-contrast-40pct: rgba(244, 239, 230, 0.40);
  --lumo-contrast-30pct: rgba(244, 239, 230, 0.30);
  --lumo-contrast-20pct: rgba(244, 239, 230, 0.20);
  --lumo-contrast-10pct: rgba(244, 239, 230, 0.10);
  --lumo-contrast-5pct: rgba(244, 239, 230, 0.06);

  /* Error / success colors */
  --lumo-error-color: #c95c52;
  --lumo-error-text-color: #e78379;
  --lumo-error-color-10pct: rgba(201, 92, 82, 0.12);

  --lumo-success-color: #73956f;
  --lumo-success-text-color: #9abd94;
  --lumo-success-color-10pct: rgba(115, 149, 111, 0.12);

  /* Typography */
  --lumo-font-family: Inter, Arial, sans-serif;
  --lumo-font-size-xxxl: 2.6rem;
  --lumo-font-size-xxl: 2rem;
  --lumo-font-size-xl: 1.5rem;
  --lumo-font-size-l: 1.15rem;
  --lumo-font-size-m: 1rem;
  --lumo-font-size-s: 0.875rem;
  --lumo-font-size-xs: 0.78rem;

  /* Shapes / sizing */
  --lumo-border-radius-s: 0.25rem;
  --lumo-border-radius-m: 0.35rem;
  --lumo-border-radius-l: 0.8rem;

  --lumo-size-xl: 3.5rem;
  --lumo-size-l: 3rem;
  --lumo-size-m: 2.75rem;
  --lumo-size-s: 2.25rem;
  --lumo-size-xs: 1.75rem;

  /* Shadows */
  --lumo-box-shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.32);
  --lumo-box-shadow-s: 0 2px 8px rgba(0, 0, 0, 0.34);
  --lumo-box-shadow-m: 0 8px 24px rgba(0, 0, 0, 0.38);
  --lumo-box-shadow-l: 0 18px 50px rgba(0, 0, 0, 0.42);
}

/* Portal page wrapper */
.customer-portal-page {
  min-height: 65vh;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 7vw, 6rem);
}

.customer-portal-shell {
  width: min(1100px, 100%);
  margin: 0 auto;
}

.customer-portal-heading {
  margin-bottom: 2rem;
}

.customer-portal-heading .eyebrow {
  margin-bottom: 0.6rem;
}

.customer-portal-heading h1 {
  margin-bottom: 0.75rem;
  color: #f4efe6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(2.3rem, 5vw, 4rem);
}

.customer-portal-heading p {
  max-width: 760px;
  margin: 0;
  color: #c9bda9;
}

/* Foxy customer portal host */
foxy-customer-portal {
  display: block;
  width: 100%;
  color: #f4efe6;
  font-family: Inter, Arial, sans-serif;

  /* Re-declare the important Lumo tokens at the component host */
  --lumo-base-color: #171512;
  --lumo-primary-color: #b98b47;
  --lumo-primary-color-50pct: rgba(185, 139, 71, 0.50);
  --lumo-primary-color-10pct: rgba(185, 139, 71, 0.12);
  --lumo-primary-text-color: #d6ad6a;
  --lumo-body-text-color: #f4efe6;
  --lumo-secondary-text-color: #c9bda9;
  --lumo-tertiary-text-color: #9f927e;
  --lumo-header-text-color: #f4efe6;
  --lumo-contrast-90pct: rgba(244, 239, 230, 0.90);
  --lumo-contrast-80pct: rgba(244, 239, 230, 0.80);
  --lumo-contrast-70pct: rgba(244, 239, 230, 0.70);
  --lumo-contrast-60pct: rgba(244, 239, 230, 0.60);
  --lumo-contrast-50pct: rgba(244, 239, 230, 0.50);
  --lumo-contrast-40pct: rgba(244, 239, 230, 0.40);
  --lumo-contrast-30pct: rgba(244, 239, 230, 0.30);
  --lumo-contrast-20pct: rgba(244, 239, 230, 0.20);
  --lumo-contrast-10pct: rgba(244, 239, 230, 0.10);
  --lumo-contrast-5pct: rgba(244, 239, 230, 0.06);
  --lumo-font-family: Inter, Arial, sans-serif;
  --lumo-border-radius-m: 0.35rem;
  --lumo-border-radius-l: 0.8rem;
}

/* Gives the embedded portal a framed Glass Traveler panel.
   This styles the host itself; internal portal controls are themed by Lumo variables above. */
foxy-customer-portal {
  padding: clamp(1rem, 2.5vw, 2rem);
  background: rgba(23, 21, 18, 0.96);
/*
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 3px solid #b98b47;
  border-radius: 0.8rem;
*/
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

/* Links surrounding / exposed by the host */
foxy-customer-portal a {
  color: #d6ad6a;
}

foxy-customer-portal a:hover {
  color: #f0c983;
}

/* Page-level fallback form styling, useful if Foxy exposes any light-DOM fields */
.customer-portal-page input,
.customer-portal-page select,
.customer-portal-page textarea {
  background: #0e0d0b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.35rem;
  color: #f4efe6;
  font: inherit;
}

.customer-portal-page input:focus,
.customer-portal-page select:focus,
.customer-portal-page textarea:focus {
  border-color: #b98b47;
  outline: 2px solid rgba(185, 139, 71, 0.20);
  outline-offset: 1px;
}

.customer-portal-page button {
  border-radius: 0.35rem;
  font-family: Inter, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* Responsive */
@media (max-width: 700px) {
  .customer-portal-page {
    padding: 2rem 1rem 3rem;
  }

  foxy-customer-portal {
    padding: 1rem;
    border-radius: 0.6rem;
  }

  .customer-portal-heading h1 {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }
}