@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,700;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&display=swap');


:root {
  /*Colors*/
  --primary: var(--p-primary-500);
  --primary-hover: var(--p-primary-700);
  --accent: var(--secondary);
  --accent-hover: var(--p-secondary-600);

  --p-primary-50:  #F0F9FA;
  --p-primary-100: #B5E0E7;
  --p-primary-200: #85D4E1;
  --p-primary-300: #39CBE1;
  --p-primary-400: #14BCD6;
  --p-primary-500: #06879B;
  --p-primary-600: #077A8C;
  --p-primary-700: #075F6D;
  --p-primary-800: #075F6D;
  --p-primary-900: #08383F;
  --p-primary-950: #08383F;

  --secondary: var(--p-secondary-500);
  --p-secondary-50: #FFF3F1;
  --p-secondary-100: #FEDBD2;
  --p-secondary-200: #FECABD;
  --p-secondary-300: #FEB19F;
  --p-secondary-400: #FDA28C;
  --p-secondary-500: #FD8B6F;
  --p-secondary-600: #E67E65;
  --p-secondary-700: #B4634F;
  --p-secondary-800: #8B4C3D;
  --p-secondary-900: #6A3A2F;
  --p-secondary-950: #190500;

  --tertiary: var(--p-tertiary-500);
  --p-tertiary-50: #FAF7EF;
  --p-tertiary-100: #F5EEDD;
  --p-tertiary-200: #F5E9CE;
  --p-tertiary-300: #F7E4B5;
  --p-tertiary-400: #FAE1A4;
  --p-tertiary-500: #FFDD89;
  --p-tertiary-600: #FDD265;
  --p-tertiary-700: #F9B818;
  --p-tertiary-800: #C58F0A;
  --p-tertiary-900: #8E690C;
  --p-tertiary-950: #110D03;

  --cta: var(--secondary);
  --cta-hover: var(--p-secondary-600);

  --body-bg: white;
  --body-text-color: var(--text-dark);
  --body-text-font: 'Figtree';
  --body-text-size: 16px;
  --body-text-weight: 400;

  --bg-dark: var(--primary);
  --bg-light: var(--p-primary-50);

  --border-light: #E2E8F0;

  --text-dark: #334155;
  --text-medium: #64748B;
  --text-primary: var(--primary);

  --text-header-font: 'Lora';
  --text-header-size: clamp(24px, 2vw + 1rem, 36px);
  --text-header-weight: 700;
  --text-header-color: var(--text-primary);

  --text-subheader-size: clamp(16px, 2vw, 20px);
  --text-subheader-weight: 600;
  --text-subheader-color: var(--body-text-color);
  --text-subheader-font: var(--body-text-font);

  --header-bg: white;
  --header-color: var(--text-dark);
  --header-logo-height: 32px;
  --header-logo-xl-height: 65px;
  --header-logo-lg-height: 48px;
  --header-main-nav-text-size: 20px;
  --header-font-weight: 400;
  --header-main-links-gap: 38px;
  --header-active-color: var(--text-dark);
  --header-main-nav-underline-color: var(--bg-dark);
  --header-mobile-nav-bg: white;
  --header-mobile-color: var(--text-dark);
  --header-mobile-hover-color: white;
  --header-mobile-hover-bg-color: var(--primary);
  --header-banner-bg: var(--cta);
  --header-banner-color: #000;
  --header-banner-font-weight: 600;

  --page-header-max-height: 400px;

  --footer-border-color: transparent;
  --footer-dso-logo-height: 56px;
  --footer-nav-text-color: var(--text-dark);
  --footer-text-hover: var(--primary);

  --terms-section-bg: var(--bg-light);

  --home-main-banner-img-max-width: 0%;
  --home-main-banner-img-md-max-width: 60%;
  --home-main-banner-img-lg-max-width: 60%;
  --home-main-banner-img-xl-max-width: 50%;
  --home-main-banner-img-position: left bottom;
  --home-main-banner-img-fit: contain;
  --home-main-banner-img-overlay-color: transparent;
  --home-main-banner-bg: var(--bg-dark);
  --home-main-banner-mobile-bg: var(--bg-dark);
  --home-main-banner-copy-lg-max-width: 50%;
  --home-main-banner-title-color: var(--text-inverse);
  --home-main-banner-title-size: clamp(40px, 4vw, 48px);
  --home-main-banner-subtitle-color: var(--text-inverse);
  --home-main-banner-subtitle-size: 20px;
  --home-main-banner-subtitle-weight: 400;
  --home-main-banner-form-bg: color-mix(in oklab, var(--tertiary) 90%, transparent);
  --home-main-banner-form-title-font: var(--body-text-font);
  --home-main-banner-form-title-color: var(--text-dark);
  --home-main-banner-form-title-size: 24px;
  --home-main-banner-form-title-weight: 400;

  --find-your-dentist-form-btn-bg: var(--cta);
  --find-your-dentist-form-btn-hover-bg: var(--cta-hover);
  --find-your-dentist-form-btn-hover-text-color: var(--text-inverse);
  --find-form-btns-wrapper-flex-direction: row-reverse;
  --find-form-search-btn-office-label-display: none;
  --find-your-dentist-form-btn-text-size: 16px;
  --find-your-dentist-form-btn-text-weight: 600;
  --find-your-dentist-form-text-size: 15px;
  --find-content-bg: var(--p-tertiary-50);
  --find-office-card-bg: var(--body-bg);
  --find-office-card-border-color: var(--primary);
  --find-office-details-title-font: var(--body-text-font);
  --find-office-details-content-size: 14px;
  --find-results-title-color: var(--text-dark);
  --find-results-title-font: var(--body-text-font);
  --find-map-border-width: 1px;

  --home-cta-bg: var(--body-bg);
  --home-cta-title-color: var(--text-header-color);
  --home-cta-item-title-font: var(--body-text-font);
  --home-cta-item-title-weight: 700;
  --home-cta-item-title-size: 24px;
  --home-cta-item-title-color: var(--text-header-color);

  --home-plans-bg: var(--bg-light);
  --home-plans-card-border-radius: 8px;

  --home-nearby-padding-top: 0;
  --home-nearby-list-title-weight: 600;
  --home-nearby-office-card-border: var(--bg-dark);
  --home-nearby-office-card-icon-color: var(--bg-dark);
  --home-nearby-office-details-color: var(--body-text-color);

  --home-savings-bg: var(--body-bg);
  --custom-table-header-bg: var(--accent);
  --custom-table-body-last-col-color: var(--primary);
  --custom-table-body-last-col-weight: 700;
  --custom-table-header-font: var(--body-text-font);
  --custom-table-footer-full-bg: var(--accent);
  --custom-table-footer-full-size: 24px;
  --custom-table-footer-full-font: var(--body-text-font);
  --home-savings-note-size: 16px;
  --home-savings-note-color: var(--text-light);

  --home-how-bg: var(--p-tertiary-50);
  --home-how-margin-bottom: 0;
  --home-how-step-bg: var(--body-bg);
  --home-how-padding-y: 80px;
  --home-how-step-border-color: var(--p-primary-300);
  --home-how-step-title-weight: 600;
  --home-how-icon-bg: var(--secondary);
  --home-how-icon-border: var(--secondary);
  --home-how-icon-color: var(--text-inverse);
  --home-how-step-title-color: var(--text-dark);
  --home-how-step-content-color: var(--text-dark);
  --home-how-step-content-size: 20px;
  --home-how-step-content-weight: 500;

  --custom-table-margin-top: 60px;

  --home-questions-img-accent: none;
  --home-questions-img-overlay-color: var(--secondary);
  --home-questions-bg: var(--secondary);

  --home-subtitle-size: 20px;
  --home-subtitle-weight: 600;

  --plan-card-top-bg: var(--bg-dark);
  --plan-card-border-color: var(--bg-dark);
  --plan-card-border-width: 1px;
  --plan-card-savings-bg: var(--accent);
  --plan-card-savings-weight: 600;
  --plan-card-savings-color: var(--text-header-color);
  --plan-card-details-section-title-color: var(--text-dark);
  --plan-card-list-item-color: var(--text-header-color);
  --plan-card-list-item-secondary-color: var(--body-text-color);

  --find-header-bg: var(--bg-dark);
  --find-form-border-color: var(--bg-dark);
  --find-steps-content-padding-bottom: 150px;

  --office-details-external-link-bg: white;
  --office-plans-title-color: var(--text-dark);

  --faq-entry-bg: var(--body-bg);
  --faq-entry-title-font: var(--body-text-font);
  --faq-entry-border-color: var(--p-primary-100);
  --faq-entry-title-opened-color: var(--primary);
  --faq-entry-opened-border-color: var(--primary);
  --faq-answer-size: 16px;
  --faq-close-icon-bg: var(--bg-dark);
  --faq-contact-radius: 0;
  --faq-image-bg: var(--cta);
  --faq-contact-info-title-color: white;
  --faq-contact-info-text-color: white;
  --faq-contact-bg: var(--secondary);
  --faq-contact-img-left-radius: 0;
  --faq-contact-img-wrapper-padding-left: 0;
  --faq-contact-img-overlay-color: var(--secondary);
  --faq-contact-max-height: 400px;

  --find-office-details-name-color: var(--text-dark);
  --find-office-border: 1px solid var(--border-light);
  --find-map-border: 1px solid var(--p-primary-200);

  --support-page-bg: var(--bg-light);
  --support-info-bg: var(--bg-dark);

  --checkout-summary-member-period-selected-color: var(--p-primary-800);

  --signup-summary-due-now-font: var(--body-text-font);
  --signup-summary-due-now-size: 16px;


  --button-height: 46px;
  --button-text-size: 16px;
  --button-border-radius: 8px;
  --button-padding-x: 24px;
  --button-sm-padding-x: 16px;
  --header-join-now-height: 36px;
  --header-join-now-min-width: 137px;
}

@layer components {
  .btn {
    letter-spacing: 0.05em;
  }

  /** CTA **/
  .checkout-success-btn,
  .submit-reset-btn,
  .login-forgot-submit-btn,
  .login-btn,
  .start-btn,
  .find-form-search-btn,
  .find-select-office-btn,
  .support-send-btn,
  .home-nearby-office-link,
  .plan-card-view-details-btn,
  .header-join-now-btn,
  .join-today-btn,
  .office-view-plan-btn,
  .find-clear-filters-btn {
    color: var(--text-inverse);
    background-color: var(--cta);
    border-color: var(--cta);

    &:hover:not(:disabled) {
      background-color: var(--cta-hover);
      border-color: var(--cta-hover);
      color: var(--text-inverse);
    }
  }

  /** Primary **/
  .add-dependent-btn,
  .savings-summary-btn,
  .home-cta-btn,
  .home-nearby-find-btn,
  .home-nearby-show-all-btn,
  .home-how-join-btn,
  .home-savings-btn,
  .continue-to-checkout-btn,
  .find-form-locate-btn {
    color: var(--text-inverse);
    background-color: var(--primary);
    border-color: var(--body-bg);

    &:hover:not(:disabled) {
      background-color: var(--primary-hover);
    }
  }

  /** White / Secondary **/
  .login-go-back-btn,
  .home-questions-faq-btn,
  .find-form-clear-btn {
    background-color: var(--body-bg);
    border-color: var(--secondary);
    color: var(--secondary);

    &:hover:not(:disabled) {
      background-color: var(--secondary);
      color: var(--text-inverse);
      border-color: var(--body-bg);
    }
  }

  .home-questions-faq-btn {
    border-width: 2px;
  }

  /** Style E **/
  .faq-contact-btn,
  .support-faq-link,
  .home-questions-contact-btn {
    background-color: transparent;
    border-color: white;
    color: white;
    border-width: 2px;

    &:hover:not(:disabled) {
      background-color: white;
      border-color: white;
      color: var(--secondary);
    }
  }

  .support-link {
    color: var(--text-dark);
    background-color: white;
    border-color: var(--border-light);
    font-size: 14px !important;

    &:hover {
      color: var(--primary);
      border-color: var(--primary);
    }
  }

  /*    Fixed Width*/
  .home-nearby-show-all-btn,
  .home-savings-btn,
  .home-how-join-btn {
    min-width: 248px;
  }

  .home-questions-contact-btn,
  .home-questions-faq-btn {
    min-width: 160px;
  }
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
}

.home {
  .main-banner .banner-title {
    & > span {
      color: var(--text-inverse);
    }

    br {
      display: none;
    }
  }

  .home-plans-join-btn {
    display: none;
  }
}

.home-how {
  .how-step {
    box-shadow: 0 8px 40px 0 rgba(57, 97, 117, 0.15);
    padding: 32px;
    border-radius: 24px;
  }
}

.join-now,
.find-a-dentist {
  .steps-wrapper {
    display: none !important;
  }
}