/* Offer Displays */
/* Comment in to hide card */
/* Add one for each card */

/* #hsd-sh-MAKElower-MODELlower {display: none !important;} */

/* Inner Card Displays (add one for each model)*/
/* Comment out to show offer */
/* Show one at a time */

/* |==---------------==| */
/* Nissan MODEL */
/* Lease Offer */
/* #hsd-sh-MAKElower-MODELlower .hsd-sh-lease,
#hsd-sh-MAKElower-MODELlower .hsd-sh-lease-heading {
  display: none !important;
} */
/* Finance Offer */
#hsd-sh-MAKElower-MODELlower .hsd-sh-finance,
#hsd-sh-MAKElower-MODELlower .hsd-sh-finance-heading {
  display: none !important;
}
/* Miscelaneous Offer */
#hsd-sh-MAKElower-MODELlower .hsd-sh-miscellaneous,
#hsd-sh-MAKElower-MODELlower .hsd-sh-miscellaneous-heading {
  display: none !important;
}

/* Font Imports */
@font-face {
  font-family: "Proxima Nova";
  src: url("https://firebasestorage.googleapis.com/v0/b/hseo-cdn.appspot.com/o/OEM-Fonts%2FJeep%2FProxima%20Nova%20Rg-normal-400-100.ttf?alt=media&token=d21c3d70-6736-415a-86f9-ae78ae43df24");
}

@font-face {
  font-family: "Roboto";
  src: url("https://firebasestorage.googleapis.com/v0/b/hseo-cdn.appspot.com/o/OEM-Fonts%2FJeep%2FROBOTO-REGULAR.TTF?alt=media&token=75333743-9982-414f-8ab2-f84de57da6e6");
}

@font-face {
  font-family: "Roboto Bold";
  src: url("https://firebasestorage.googleapis.com/v0/b/hseo-cdn.appspot.com/o/OEM-Fonts%2FJeep%2FROBOTO-BOLD.TTF?alt=media&token=c3ad2eeb-1500-477f-a00a-e7c8d1084f41");
}

@font-face {
  font-family: "Roboto Light";
  src: url("https://firebasestorage.googleapis.com/v0/b/hseo-cdn.appspot.com/o/OEM-Fonts%2FJeep%2FROBOTO-LIGHT.TTF?alt=media&token=3dfae021-ecc4-4c4c-a5c5-ab9b5ef15fbf");
}

/* Variables */
:root {
  /* SH = Specials Hub */

  --hsd-sh-custom-title-font-size: 32px;
  --hsd-sh-page-bkg-color: transparent;
  /* Section Title */
  --hsd-sh-section-title-font-color: #000;
  --hsd-sh-section-title-font-family: "Proxima Nova";
  --hsd-sh-section-title-font-size: 32px;

  /*|==------==|*/
  /* Card Container */
  --hsd-sh-card-background-color: #fff;
  --hsd-sh-card-border-radius: 0;
  --hsd-sh-card-border: 1px solid #e0e0e0;

  /* Top Half of Card */
  --hsd-sh-card-top-background-color: transparent;

  /*|==------==|*/
  /* Card Title */
  /* Year + Make Heading */
  --hsd-sh-card-title-ym-font-color: #221f1f;
  --hsd-sh-card-title-ym-font-family: "Roboto Bold";
  --hsd-sh-card-title-ym-font-size: 12px;
  /* Model Heading */
  --hsd-sh-card-title-m-font-color: #221f1f;
  --hsd-sh-card-title-m-font-family: "Roboto Light";
  --hsd-sh-card-title-m-font-size: 40px;
  /* Trim Heading */
  --hsd-sh-card-title-t-font-color: #221f1f;
  --hsd-sh-card-title-t-font-family: "Roboto Light";
  --hsd-sh-card-title-t-font-size: 16px;

  /* Bottom Half of Card */
  --hsd-sh-card-bottom-background-color: transparent;

  /*|==------==|*/
  /* Card Offer */
  --hsd-card-offer-cont-border: 2px solid #d20f06;
  /* Card Offer Heading */
  --hsd-sh-card-offer-heading-font-color: #000;
  --hsd-sh-card-offer-heading-font-family: "Roboto";
  --hsd-sh-card-offer-heading-font-size: 14px;

  /* Key */
  --hsd-sh-card-key-font-size: 12px;
  --hsd-sh-card-key-font-family: "Roboto";
  --hsd-sh-card-key-font-color: #666;
  /* Value */
  --hsd-sh-card-value-font-size: 32px;
  --hsd-sh-card-value-font-family: "Proxima Nova";
  --hsd-sh-card-value-font-color: #333;

  /* Signing */
  --hsd-sh-card-signing-font-size: 10px;

  /*|==------==|*/
  /* Card BTNs */
  --hsd-sh-card-btn-font-family: "Proxima Nova";
  --hsd-sh-card-btn-border-radius: 2px;
  --hsd-sh-card-btn-font-size: 16px;
  --hsd-sh-card-btn-width: 100%;
  --hsd-sh-card-btn-height: 56px;

  /* Card BTN Pri */
  --hsd-sh-card-btn-pri-background: #d20f06;
  --hsd-sh-card-btn-pri-font-color: #fff;
  --hsd-sh-card-btn-pri-border: 2px solid #d20f06;
  /* Card BTN Pri Hover */
  --hsd-sh-card-btn-pri-background-hover: #000;
  --hsd-sh-card-btn-pri-font-color-hover: #fff;
  --hsd-sh-card-btn-pri-border-hover: 2px solid #000;

  /* Card BTN Sec */
  --hsd-sh-card-btn-sec-background: #333;
  --hsd-sh-card-btn-sec-font-color: #fff;
  --hsd-sh-card-btn-sec-border: 2px solid #333;
  /* Card BTN Sec Hover */
  --hsd-sh-card-btn-sec-background-hover: #000;
  --hsd-sh-card-btn-sec-font-color-hover: #fff;
  --hsd-sh-card-btn-sec-border-hover: 2px solid #000;

  /*|==---------==|*/
  /* Modal Trigger */
  --hsd-disclaimer-font-family: "Roboto";
  --hsd-disclaimer-font-size: 12px;
  --hsd-disclaimer-font-color: #666;
  --hsd-disclaimer-border: ;

  /*|==-==|*/
  /* Modal */
  --hsd-modal-bkg-color: #fefefe;
  --hsd-modal-close-color: #aaaaaa;
  --hsd-modal-close-size: 28px;
  --hsd-modal-font-color: #000;
  --hsd-modal-font-size: 14px;
}
@media screen and (max-width: 460px) {
  :root {
    --hsd-sh-card-value-font-size: 26px;
  }
}

#hsd-specials-hub {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background: var(--hsd-sh-page-bkg-color);
}

/* Page Title */
.hsd-custom-title {
  /* display: none; */
  margin: 0 auto;
  text-align: center;
  padding: 32px 8px;
  font-size: var(--hsd-sh-custom-title-font-size) !important;
  text-align: center;
}

/* Specials Hub Hero */
.hsd-specials-hub-hero {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
}

/*  */
.hsd-sh-content-cont {
  max-width: 1440px;
  padding: 2rem;
  margin: 0 auto;
}

/* Specials Hub Grid */
.hsd-sh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1440px;
  width: fit-content;
  padding: 2rem;
}

/* |==---  --------------------  ---==| */
/* |==---  Specials Card Styles  ---==| */

.hsd-sh-card {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  position: relative;
  width: 412px;
  min-height: 628px;
  height: 100%;
  /* height: 616px; */
  background-color: var(--hsd-sh-card-background-color);
  border-radius: var(--hsd-sh-card-border-radius);
  border: var(--hsd-sh-card-border);
}

/* |==---  ----------=----------------  ---==| */
/* |==---  Specials Top Section Styles  ---==| */
.hsd-sh-card-top {
  background: var(--hsd-sh-card-top-background-color);
}

/* Specials Card Title */
.hsd-sh-card-title-cont {
  padding: 32px 24px 16px;
}
.hsd-sh-card-title {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding-top: 2px;
}
.hsd-sh-card-title-year-make {
  color: var(--hsd-sh-card-title-ym-font-color);
  font-family: var(--hsd-sh-card-title-ym-font-family);
  font-size: var(--hsd-sh-card-title-ym-font-size) !important;
  width: fit-content;

  /* Figma Font Styles */
  text-align: center;
  font-style: normal;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.hsd-sh-card-title-model {
  color: var(--hsd-sh-card-title-m-font-color);
  font-family: var(--hsd-sh-card-title-m-font-family);
  font-size: var(--hsd-sh-card-title-m-font-size) !important;
  width: fit-content;

  /* Figma Font Styles */
  text-align: center;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}
.hsd-sh-card-title-trim {
  color: var(--hsd-sh-card-title-t-font-color);
  font-family: var(--hsd-sh-card-title-t-font-family);
  font-size: var(--hsd-sh-card-title-t-font-size) !important;
  width: fit-content;

  /* Figma Font Styles */
  text-align: center;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 0.8px;
}

/* |==---  -------------------  ---==| */
/* |==---  Specials Img Styles  ---==| */
.hsd-sh-card-image {
  width: 100%;
}

/* |==---  ------------------------------  ---==| */
/* |==---  Specials Bottom Section Styles  ---==| */

.hsd-sh-card-bottom {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  height: 100%;
  background: var(--hsd-sh-card-bottom-background-color);
}

/* |==---  ---------------------  ---==| */
/* |==---  Specials Offer Styles  ---==| */

.hsd-sh-offer {
  display: flex;
  flex-flow: column;
  justify-content: center;
  gap: 16px;
  padding: 24px;
}

/* Lease Offer */
.hsd-sh-lease-heading,
.hsd-sh-finance-heading,
.hsd-sh-miscellaneous-heading {
  color: var(--hsd-sh-card-offer-heading-font-color);
  font-family: var(--hsd-sh-card-offer-heading-font-family);
  font-size: var(--hsd-sh-card-offer-heading-font-size) !important;
  margin: 0;

  /* Figma Font Styles */
  text-align: center;
  font-style: normal;
  font-weight: 400;
  line-height: 13px;
  text-transform: uppercase;
}
.hsd-sh-lease {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* margin: 10px 0 42px; */
}

.hsd-sh-offer-cont {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 4px;
  border-right: var(--hsd-card-offer-cont-border);
  padding: 0 10px;
  /* padding: 24px 0; */
}

.hsd-sh-offer-value {
  color: var(--hsd-sh-card-value-font-color);
  font-family: var(--hsd-sh-card-value-font-family);
  font-size: var(--hsd-sh-card-value-font-size) !important;
  width: fit-content;

  /* Figma Font Styles */
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}
.hsd-sh-offer-key {
  color: var(--hsd-sh-card-key-font-color);
  font-family: var(--hsd-sh-card-key-font-family);
  font-size: var(--hsd-sh-card-key-font-size) !important;

  /* Figma Font Styles */
  text-align: center;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}

.hsd-signing-key {
  font-size: var(--hsd-sh-card-signing-font-size) !important;
}

/* Finance Offer */

.hsd-sh-finance {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* margin: 10px 0 42px; */
}

/* Miscellaneous Offer */
.hsd-sh-miscellaneous {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 63.5px; */
}

.hsd-sh-last-detail {
  border-right: 0;
}

/* |==---  -----------------------------  ---==| */
/* |==---  Specials BTN Disc Cont Styles  ---==| */
.hsd-sh-btn-disc-cont {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  /* gap: 8px; */
}

/* |==---  --------------------  ---==| */
/* |==---  Specials BTNs Styles  ---==| */

.hsd-sh-btn-cont {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 16px 24px;
  gap: 8px;
  width: 100%;
}

/* Card BTNs */
.hsd-sh-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-family: var(--hsd-sh-card-btn-font-family);
  font-size: var(--hsd-sh-card-btn-font-size) !important;
  width: var(--hsd-sh-card-btn-width);
  height: var(--hsd-sh-card-btn-height);
  border-radius: var(--hsd-sh-card-btn-border-radius);
  text-decoration: none !important;
  transition: all 0.25s;

  /* Figma Font Styles */
  text-align: center;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Card BTN Pri */
.hsd-sh-btn-pri {
  background: var(--hsd-sh-card-btn-pri-background);
  color: var(--hsd-sh-card-btn-pri-font-color) !important;
  border: var(--hsd-sh-card-btn-pri-border);
}
.hsd-sh-btn-pri:hover {
  background: var(--hsd-sh-card-btn-pri-background-hover);
  color: var(--hsd-sh-card-btn-pri-font-color-hover) !important;
  border: var(--hsd-sh-card-btn-pri-border-hover);
}

/* Card BTN Sec */
.hsd-sh-btn-sec {
  background: var(--hsd-sh-card-btn-sec-background);
  color: var(--hsd-sh-card-btn-sec-font-color) !important;
  border: var(--hsd-sh-card-btn-sec-border);
}
.hsd-sh-btn-sec:hover {
  background: var(--hsd-sh-card-btn-sec-background-hover);
  color: var(--hsd-sh-card-btn-sec-font-color-hover) !important;
  border: var(--hsd-sh-card-btn-sec-border-hover);
}

/* |==---  --------------------  ---==| */
/* |==---  Specials BTNs Styles  ---==| */
.hsd-sh-disc-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  border-bottom: var(--hsd-disclaimer-border);
  color: var(--hsd-disclaimer-font-color);
  font-family: var(--hsd-disclaimer-font-family);
  font-size: var(--hsd-disclaimer-font-size) !important;
  cursor: pointer;
  margin: 0 auto 14px;
  padding: 0 0 2px;

  /* Figma Font Styles */
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}

/*|==-==|*/
/* Modal */

@media screen and (max-width: 1325px) {
  .hsd-sh-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 890px) {
  .hsd-sh-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 460px) {
  .hsd-sh-card {
    width: 100%;
  }
}

/* Modal */

.hsd-sh-modal {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 90;
  background-color: var(--hsd-modal-bkg-color);
  color: var(--hsd-modal-font-color) !important;
  padding: 20px;
  overflow-y: scroll;
}

.hsd-sh-modal-head {
  position: sticky;
  top: -20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
  /* padding: 20px 0; */
  background-color: var(--hsd-modal-bkg-color);
}

.hsd-sh-modal-close {
  text-align: right;
  cursor: pointer;
  color: var(--hsd-modal-close-color);
  font-size: var(--hsd-modal-close-size) !important;
}
.hsd-sh-modal-content {
  font-size: var(--hsd-modal-font-size) !important;
  color: var(--hsd-modal-font-color) !important;
}