:root {
  
  /* ============================================================
     BUTTON COLORS
     ============================================================ */
  --color-primary: #c0392b;
  --color-primary-hover: #cf3f31;
  --color-primary-active: #b73729;

  --color-secondary: #354252;
  --color-secondary-hover: #3f4d5e;
  --color-secondary-active: #2c3744;

  --color-third: #2F6B3A;
  --color-third-hover: #387C44;
  --color-third-active: #275A31;

  /* ============================================================
     CHIP COLORS
     ============================================================ */
  --chip-bg: #e8f0fe;
  --chip-bg-hover: #d9e6ff;
  --chip-text: #1a3d7c;
  --chip-border: #c5d3f5;

  --chip-selected-bg: #1a3d7c;
  --chip-selected-text: #ffffff;
  --chip-selected-border: #1a3d7c;  
}


/* ============================================================
   VIEW SCROLL THEME
   ============================================================ */

.view-scroll-header {
    background-color: var(--color-secondary);
}

.view-scroll-footer {
  display: block;
    /* If you want a footer background later */
    /* background-color: var(--color-secondary); */
}


/* ============================================================
   BUTTON THEME
   ============================================================ */

.component-button {
  background-color: var(--color-primary);
  color: #fff;

  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.02857em;
  text-transform: uppercase;

  transition:
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1);

  box-shadow:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

/* Hover */
.component-button:hover {
  background-color: var(--color-primary-hover);
  box-shadow:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

/* Active */
.component-button:active {
  background-color: var(--color-primary-active);
  transform: scale(0.98);
}

/* Focus */
.component-button:focus-visible {
  outline: 3px solid rgba(231, 76, 60, 0.3);
  outline-offset: 2px;
}

/* Variants */
.component-button.blue {
  background-color: var(--color-secondary);
}

.component-button.blue:hover {
  background-color: var(--color-secondary-hover);
}

.component-button.blue:active {
  background-color: var(--color-secondary-active);
}

.component-button.green {
  background-color: var(--color-third);
}

.component-button.green:hover {
  background-color: var(--color-third-hover);
}

.component-button.green:active {
  background-color: var(--color-third-active);
}

/* GOOGLE BUTTON */
.component-button.google {
    background-color: #4285F4;
    color: #fff;
}
.component-button.google:hover { background-color: #3a78db; }
.component-button.google:active { background-color: #336ac2; }


/* Ensure the icon stays white */
.component-button.google .component-button__icon svg path {
    fill: #fff;
}


/* FACEBOOK BUTTON */
.component-button.facebook {
    background-color: #0F5BD8;
    color: #fff;
}
.component-button.facebook:hover {
    background-color: #0d52c0;
}
.component-button.facebook:active {
    background-color: #0b47a8;
}


/* Ensure the icon stays white */
.component-button.facebook .component-button__icon svg path {
    fill: #fff;
}

/* APPLE BUTTON */
.component-button.apple {
    background-color: #000;
    color: #fff;
}

.component-button.apple:hover {
    background-color: #111;
}

.component-button.apple:active {
    background-color: #000; /* Apple keeps it flat */
}

/* Ensure the icon stays white */
.component-button.apple .component-button__icon svg path {
    fill: #fff;
}




/* ============================================================
   CHIP THEME
   ============================================================ */

.chip {
  background-color: var(--chip-bg);
  color: var(--chip-text);
  font-size: 0.85rem;
  font-weight: 500;
  border-color: var(--chip-border);
  transition: 0.15s ease;
}

/* Hover */
.chip:hover {
  background-color: var(--chip-bg-hover);
}

/* Selected */
.chip.selected {
  background-color: var(--chip-selected-bg);
  color: var(--chip-selected-text);
  border-color: var(--chip-selected-border);
}

/* ============================================================
     CLICKABLE TEXT THEME
   ============================================================ */
.msui-clickable-text {
    cursor: pointer;
    color: var(--msui-link-color, #0077ff);
    text-decoration: underline;
}