/* =============================== */
/*      MENU PAGE RESPONSIVE CSS   */
/* =============================== */

/* Large screens - 1024px and below */
@media (max-width: 1024px) {
  #menuPage #elinesmile-intro .treatment-visual {
    flex-direction: column;
  }

  #menuPage #elinesmile-intro .visual-image-frame,
  #menuPage #elinesmile-intro .visual-description {
    flex: 1 1 100%;
  }

  #menuPage .before-after {
    flex-direction: column;
    align-items: stretch;
  }

  #menuPage .ba-gallery,
  #menuPage .plan-arrow,
  #menuPage .plan-button {
    margin-top: 1rem;
  }

  #menuPage .plan-header {
    flex-direction: column;
    align-items: flex-start;
  }

  #menuPage .plan-desc {
    margin-top: 0.5rem;
  }

  #menuPage #zirconia-intro .treatment-visual {
    flex-direction: column;
  }

  #menuPage #zirconia-intro .visual-image-frame,
  #menuPage #zirconia-intro .visual-description {
    flex: 1 1 100%;
  }
}

/* Medium screens - 768px and below */
@media (max-width: 768px) {
  #features .featuresGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small screens - 640px and below */
@media (max-width: 640px) {
  #features .featuresGrid {
    grid-template-columns: 1fr;
  }

  #menuPage .hero-section .hero-content {
    padding: 0.75rem 1rem;
    width: 90%;
  }
}

/* Tablet responsive - 64rem and below */
@media (max-width: 64rem) {
  #menuPage #pediatric-intro .pediatric-content {
    flex-direction: column;
  }

  #menuPage #pediatric-intro .pediatric-text {
    flex: none;
    width: 100%;
    padding: 2rem 1rem;
    writing-mode: horizontal-tb;
    text-align: center;
  }

  #menuPage #pediatric-intro .pediatric-image-frame {
    width: 100%;
    aspect-ratio: auto;
    min-height: 50vw;
  }

  #menuPage #pediatric-intro .pediatric-image-frame img {
    mix-blend-mode: normal;
  }

  #menuPage .ba-label-row {
    gap: 2rem;
    justify-content: center;
  }

  #menuPage .ba-image-row {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  #menuPage .before-after-divider {
    margin: 1.5rem 0;
  }

  #menuPage .label-arrow svg {
    width: 6rem;
  }

  #features .featuresGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile devices - 480px and below */
@media (max-width: 480px) {
  /* Header and footer rules */
  header, footer {
  }

  /* Plan header adjustments */
  #menuPage .plan-item .plan-header {
    flex-direction: row;
    align-items: center;
    padding-left: 2rem;
    padding-bottom: 0.8rem;
  }

  #menuPage .plan-header+.before-after::before {
    display: none;
  }

  #menuPage .plan-item .plan-title {
    margin: 0 1rem 0 0;
    font-size: 1.25rem;
    white-space: nowrap;
  }

  #menuPage .plan-item .plan-desc {
    margin-top: 0.25rem;
    margin-left: calc(2rem + 1rem);
    font-size: 0.875rem;
    line-height: 1.4;
  }

  /* Before/after layout adjustments */
  #menuPage .before-after {
    flex-direction: column;
    align-items: center;
  }

  #menuPage .plan-arrow {
    order: 2;
    width: 12rem;
    height: 7rem;
    margin: 1rem 0;
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
    background: #D6C17E;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #menuPage .plan-button {
    order: 3;
    margin-top: 0;
  }

  .plan-header {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
  }

  .plan-header .title-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .plan-header .plan-desc {
    flex: 1;
    margin: 0;
  }

  .plan-label {
    font-size: 0.875rem;
    color: #666;
  }

  .plan-title {
    font-size: 1.5rem;
    color: #3A2E1B;
    margin: 0;
  }

  #zirconia-intro>div.treatment-visual>div.visual-image-frame>img {
    height: 10rem;
    max-width: 70vw;
  }

  /* Whitening examples mobile adjustments */
  #whitening-examples .planHeader {
    width: 100vw !important;
    margin: 0 !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0 !important;
  }

  #whitening-examples .planContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 !important;
    align-content: center;
  }

  #whitening-examples .step {
    width: 90vw !important;
    margin: 1rem !important;
    padding: 1rem !important;
    border-radius: 0 !important;
  }

  #whitening-examples .step2 {
    margin: 0 auto 1rem !important;
  }

  #whitening-examples .exampleImgs {
    position: relative !important;
    transform: none !important;
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1rem 0 !important;
    width: 100vw;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  #whitening-examples .exampleImgs img {
    width: 80vw;
    max-width: 300px;
    height: auto;
  }

  #whitening-examples .exampleImgs .imgArrow {
    margin: 0 !important;
    font-size: 2rem;
  }

  #whitening-examples .step .badge {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: -2rem auto 1rem;
  }

  #whitening-content>div.pediatric-image-frame>img {
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 64.42%, #FFF 100%), url(<path-to-image>) lightgray -49.057px -0.044px / 113.005% 102.757% no-repeat !important;
    mix-blend-mode: multiply;
    margin-left: 15vw !important;
    margin-top: 1rem !important;
  }

  /* Hero Section adjustments */
  #menuPage .hero-section {
    max-height: 60vw;
    height: 57vw;
    min-height: 50vw;
    margin-bottom: -1rem;
  }

  #menuPage .hero-section .hero-image {
    max-height: 60vw;
  }

  #menuPage .hero-section .hero-content {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
    align-content: center;
  }

  #menuPage .hero-section .hero-title {
    font-size: 2rem;
  }

  #menuPage .hero-section::before {
    height: 57vw;
  }

  /* ELINESMILE Intro mobile adjustments */
  #menuPage #elinesmile-intro {
    margin-bottom: 0;
  }

  #menuPage #elinesmile-intro .badge {
    width: 25.5rem !important;
    left: 4vw;
    height: 8rem;
  }

  #menuPage #elinesmile-intro .badge-icon {
    width: 6rem;
    height: 3rem;
    margin-left: -1rem;
  }

  #menuPage #elinesmile-intro .badge-title {
    font-size: 1rem;
  }

  #menuPage #elinesmile-intro .badge-subtitle {
    font-size: 1.1rem;
  }

  #menuPage #elinesmile-intro .treatment-visual {
    display: flex;
    flex-direction: row;
    height: 50vw;
    overflow: visible;
    align-items: center;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 57.21%, #FFF 100%);
    mix-blend-mode: multiply;
  }

  #menuPage #elinesmile-intro .visual-image-frame {
    margin-right: 0;
    margin-left: 0;
    mix-blend-mode: multiply;
  }

  #menuPage #elinesmile-intro .visual-description {
    margin-right: 1vw;
    margin-top: 20rem;
    width: 80vw;
    margin-left: -9rem;
    flex: 1 1 80%;
  }

  #menuPage #elinesmile-intro .visual-description .section-heading {
    font-size: 1.1rem;
    width: 15rem;
    margin-left: -5rem;
  }

  #menuPage #elinesmile-intro .visual-description .section-text {
    font-size: 0.7rem;
    width: 26rem;
    margin-left: -10rem;
  }

  #menuPage .treatment-description-section {
    margin-top: 11rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 4rem 1rem;
  }

  /* GS Plan mobile adjustments */
  #menuPage #aligner-plans {
    padding: 0;
    margin-top: 2rem;
  }

  #menuPage .plan-item {
    margin-left: 5vw;
    margin-right: 5vw;
  }

  #menuPage .plan-item .plan-header {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
  }

  #menuPage .plan-item .plan-desc {
    font-size: 0.9rem;
    margin-left: 0.5rem;
    padding-right: 3vw;
  }

  #menuPage .ba-gallery {
    margin-left: 2vw;
    margin-right: 2vw;
  }

  #menuPage .ba-image {
    width: 8rem;
  }

  #menuPage .plan-arrow p {
    margin-top: -1.5rem;
    text-align: center;
  }

  /* Pediatric Orthodontics mobile adjustments */
  #menuPage #pediatric-intro {
    background: none;
  }

  #menuPage #pediatric-intro .pediatric-content {
    display: flex;
    flex-direction: column;
    background: none;
    margin-bottom: 3rem;
    margin-top: 4rem;
  }

  #pediatric-intro #whitening-content {
    display: flex !important;
    flex-direction: column-reverse !important;
    margin-bottom: 0rem !important;
  }

  #aligner-plans > article:nth-child(2) > p {
    margin: 0 2vw;
    margin-top: 3rem;
  }

  #menuPage #pediatric-intro .pediatric-text {
    padding-right: 3rem;
    margin-left: 0;
    background: linear-gradient(90deg, #FFF 0%, #C7BD9C 50%, #FFF 100%);
    margin-top: -3rem;
  }

  #menuPage #pediatric-intro .pediatric-text .section-heading {
    font-size: 1.4rem;
  }

  #menuPage #pediatric-intro .pediatric-text .section-text {
    font-size: 0.8rem;
    text-align: justify;
  }

  #menuPage #pediatric-intro .pediatric-image-frame {
    margin: auto;
    margin-bottom: 2rem !important;
    background: none;
    margin-bottom: 3rem;
  }

  #menuPage #pediatric-intro .pediatric-image-frame img {
    margin: auto;
    background: none;
  }

  #menuPage #pediatric-intro .pediatric-image-frame::before {
    background: none;
  }

  /* Zirconia Intro mobile adjustments */
  #menuPage #zirconia-intro {
    background: linear-gradient(281deg, #FFF 0%, #F1A1B1 100%);
    margin-bottom: 3rem;
    padding-bottom: 0;
  }

  #menuPage #zirconia-intro .badge {
    width: 25.5rem;
    left: 4vw;
    height: 8rem;
    margin-bottom: 2rem;
  }

  #menuPage #zirconia-intro .badge-icon {
    width: 4rem;
    height: 4rem;
  }

  #menuPage #zirconia-intro .badge-title {
    font-size: 1.2rem;
  }

  #menuPage #zirconia-intro .badge-subtitle {
    font-size: 1.4rem;
  }

  #menuPage #zirconia-intro .treatment-visual {
    display: flex;
    flex-direction: row;
    background: none;
    z-index: 1;
    margin-top: 0;
  }

  #menuPage #zirconia-intro .visual-image-frame {
    background: none;
    height: 12rem;
    max-width: 70vw;
    margin-left: 0;
  }

  #menuPage #zirconia-intro .visual-image-frame::after {
    background: none;
  }

  #menuPage #zirconia-intro .visual-description {
    background: none;
    margin-right: 1vw;
    margin-top: 2rem;
    padding: 0;
    z-index: 999;
    margin-top: 11rem;
    margin-right: 2rem;
  }

  #menuPage #zirconia-intro .visual-description .section-heading {
    font-size: 1.2rem;
    max-width: 30rem;
    width: auto;
    margin-left: 1rem;
  }

  #menuPage #zirconia-intro .visual-description .section-text {
    font-size: 0.8rem;
    padding: 0;
    margin: 0;
  }

  #menuPage #zirconia-intro .treatment-description-section {
    border-radius: 0;
  }

  #menuPage #zirconia-intro .treatment-description-section .section-heading {
    font-size: 1.4rem;
  }

  #menuPage #zirconia-intro .treatment-description-section .section-text {
    font-size: 0.8rem;
    text-align: justify;
    padding: 0 2rem;
  }

  #menuPage #elinesmile-intro .visual-image-frame img {
    height: 10rem;
    max-width: 70vw;
  }

  #menuPage>section.elinesmile>div>h2 {
    font-size: 1.1rem;
  }

  #menuPage>section.elinesmile>div>p {
    font-size: 0.8rem;
    line-height: 1.6;
  }

  #menuPage .label-arrow svg {
    width: 4rem;
  }

  #menuPage .ba-label-row {
    gap: 0.5rem;
  }

  #menuPage .ba-image-row {
    flex-direction: row;
  }

  /* Whitening content mobile adjustments */
  .whitening-text {
    background: linear-gradient(90deg, #FFF 0%, #C7BD9C 50%, #FFF 100%);
    padding: 2rem;
    margin-left: 0;
    margin-top: -3.5rem;
    z-index: 999;
  }

  .whitening-section {
    margin-bottom: -5rem;
  }

  .whitening-text .section-heading {
    font-size: 1.4rem;
    line-height: 1.5;
  }

  .whitening-text .section-text {
    font-size: 0.8rem;
  }

  #zirconia-plans .plan-item .plan-header::before {
    top: -1rem;
  }

  #whitening-info {
    margin-top: -43rem;
  }

  #hero .hero-content {
    margin-top: 1rem;
  }

  #hero .hero-content h1 {
    font-size: 2rem;
    margin-top: -4rem;
  }

  #hero {
    height: 57vw;
    min-height: 50vw;
    object-fit: cover;
  }

  /* Features mobile adjustments */
  #features .featuresGrid {
    grid-template-columns: repeat(2, 1fr);
    width: 95vw;
    margin-top: -3rem;
  }

  #features .featureTitle {
    font-size: 0.8rem;
  }

  #features .featuresDescription {
    max-width: 90vw;
  }

  /* Whitening examples mobile adjustments */
  #whitening-examples .planHeader {
    width: 100vw;
    margin-left: 0;
    font-size: 1.2rem;
  }

  #whitening-examples .planContent {
    margin: auto;
    width: 100vw;
  }

  #whitening-examples .step .badge {
    top: -2rem;
  }

  #whitening-examples .step1 {
    margin-top: 3rem !important;
  }

  #whitening-examples .exampleImgs {
    position: relative;
    top: 80vw;
    gap: 0.5vw;
    width: 90vw;
    margin-left: 2.2rem !important;
  }

  #whitening-examples .step2 {
    margin-top: 3rem !important;
    position: relative;
    top: -38vw;
  }

  #whitening-examples .planTitle {
    font-size: 0.8rem;
  }

  #whitening-examples .planPrice {
    font-size: 1rem;
    margin-top: -1rem;
  }

  #whitening-examples .planText {
    font-size: 0.8rem;
    margin-bottom: 1.8rem;
  }

  /* Reversed whitening example mobile adjustments */
  #whitening-examples .whiteningExample.reversed .planHeader {
    font-size: 1rem;
  }

  #whitening-examples .whiteningExample.reversed .planContent {
    width: 100vw;
  }

  #whitening-examples .whiteningExample.reversed .exampleImgs .before,
  #whitening-examples .whiteningExample.reversed .exampleImgs .after {
    width: 80vw;
    max-width: 300px;
    height: auto;
  }

  #whitening-examples .whiteningExample.reversed .exampleImgs .imgArrow {
    font-size: 2rem;
  }

  #whitening-examples .whiteningExample.reversed .planTitle {
    font-size: 0.9rem;
  }

  #whitening-examples .whiteningExample.reversed .planPrice {
    font-size: 1rem;
    margin-top: -1rem;
  }

  #whitening-examples .whiteningExample.reversed .planText {
    font-size: 0.9rem;
  }

  #whitening-examples>article.whiteningExample.reversed>div.planContent>div.step.step1 {
    width: 90vw !important;
  }

  #whitening-examples>article.whiteningExample.reversed>div.planContent>div.exampleImgs {
    position: relative;
    top: 0;
    gap: 0.5vw;
    width: 90vw;
    margin-left: -1.8rem !important;
  }

  /* Third whitening example mobile adjustments */
  #whitening-examples .whiteningExample:last-child .exampleHeader {
    width: 100vw;
    font-size: 1rem;
  }

  #whitening-examples .whiteningExample:last-child .exampleContainer {
    width: 90vw;
    padding: 2rem;
  }

  #whitening-examples .whiteningExample:last-child .planTitle {
    font-size: 0.9rem;
    border-bottom: 1px solid #61A8D3;
    padding-bottom: 1vw;
  }

  #whitening-examples .whiteningExample:last-child .planPrice {
    font-size: 0.9rem;
    margin-top: -1.4rem;
  }

  #whitening-examples .whiteningExample:last-child .planText {
    font-size: 0.8rem;
  }

  #menuPage #elinesmile-intro .treatment-visual::before {
    top: -1rem;
    width: 94vw;
    height: 25rem;
    z-index: 999;
  }

  #whitening-info .menu-row.single {
    display: flex;
    flex-direction: column;
  }

  /* Bubble cleaning mobile adjustments */
  #bubble-cleaning .bubbleImages {
    display: flex;
    flex-direction: column;
  }

  #bubble-cleaning .bubbleImages .cleaningImage {
    width: 80vw;
    border-radius: 0;
    gap: 1vw;
  }

  #bubble-cleaning .bubbleText {
    width: 80vw;
    font-size: 0.8rem;
  }

  /* Plaque removal mobile adjustments */
  #plaque-removal .sectionHeader {
    text-align: center;
    width: 100vw;
    margin-left: 0;
    margin-right: 0;
    padding: 1rem;
  }

  #plaque-removal .plaqueImages {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    align-items: center;
  }

  #plaque-removal .plaqueImages img {
    width: 60vw;
    display: flex;
  }

  #plaque-removal .plaqueText {
    font-size: 0.8rem;
    width: 80vw;
    margin-top: 2vw;
  }

  /* Cleaning plans mobile adjustments */
  #cleaningSection .cleaningPlan .planHeader {
    width: 100vw;
    text-align: center;
  }

  #cleaningSection .cleaningPlan .planList {
    width: 100vw;
    padding: 2rem 1rem;
  }

  #cleaningSection .cleaningPlan .planTitle {
    font-size: 0.9rem;
    text-decoration: none;
  }

  #cleaningSection .cleaningPlan .planDuration {
    font-size: 0.9rem;
  }

  #cleaningSection .cleaningPlan .planPrice {
    font-size: 0.9rem;
  }

  #menuPage #zirconia-intro .treatment-visual::before {
    width: 94vw;
    height: 21rem;
    z-index: 999;
  }

  #clinic #hero {
    min-height: fit-content;
    margin-bottom: 0;
    margin-top: 3rem;
    height: 57vw;
    margin-bottom: -2rem;
  }

  #aligner-plans > article:nth-child(2) > div.plan-header {
    margin-right: 5vw;
    margin-left: 5vw;
  }

  #menuPage #whitening-content {
    height: 70vw;
  }

  .badge-whitening {
    width: 75vw !important;
    margin-bottom: 4vw !important;
  }

  #menuPage #elinesmile-intro .treatment-visual::before {
    content: "";
    position: absolute;
    top: 4vw;
    left: 51%;
    transform: translateX(-50%);
    width: 95vw;
    height: 80vw;
    border: 2px solid #D6C17E;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 999;
  }
}