/* ---------------------------------------------------
   PRICES PAGE SPECIFIC STYLES
--------------------------------------------------- */

/* The common container styles have been moved to layout.css */

.price-section h2 {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  margin: 0;
  font-size: 30px;
}

.contact-info {
  margin: 5px 0 10px;
}

.contact-row {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
}

.contact-details {
  display: flex;
  align-items: center;
  margin-left: 5px;
}

.contact-details a {
  margin: 0 5px;
}

.contact-info-item {
  font-family: var(--font-mono);
  font-weight: var(--weight-light);
  font-size: 24px;
}

.price-item {
  margin: 0;
}

/* Dotted line decorations after sections */
/* Using a consistent pattern for dotted line styles */
.price-section span::after {
  font-family: var(--font-scissors);
  line-height: 0.9;
  color: var(--odo-red);
}

/* Short dotted lines */
.price-section:nth-child(1) span::after,
.price-section:nth-child(2) span::after {
  content: '676767';
}

.price-section:nth-child(3) span::after {
  content: '67676';
}

.price-section:nth-child(8) span::after {
  content: '67676766';
}

.price-section:nth-child(9) span::after,
.price-section:nth-child(10) span::after {
  content: '676767676767';
}

/* Long dotted line (for section 11) */
.price-section:nth-child(11) span::after {
  content: '676767676767676';
}

/* Medium-short dotted line (for section 12) */
.price-section:nth-child(12) span::after {
  content: '6767676767';
}

/* =======================================================
   RESPONSIVE STYLES
======================================================= */

/* -----------------------------------------------------
   LARGE SCREENS (1201px+)
----------------------------------------------------- */
/* Base styles above apply to large screens */

/* -----------------------------------------------------
  TABLETS (769px-1180px)
----------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1180px) {
  /* Only include styles that are different from desktop */
  .price-section:nth-child(3) span::after {
    content: '6767676';
  }

  .price-section:nth-child(9) span::after {
    content: '6767676767676';
  }

  .price-section:nth-child(10) span::after {
    content: '67676767676767676';
  }

  /* Medium-short dotted line (for section 12) */
  .price-section:nth-child(12) span::after {
    content: '676767676';
  }

  .contact-info-item {
    font-size: 18px;
  }

  .price-section h2 {
    font-size: 22px;
  }
}

/* -----------------------------------------------------
  TABLETS PORTRAIT (769px-1380px and portrait)
----------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1380px) and (orientation: portrait) {
  /* Ensure section titles maintain consistent size in portrait mode */
  .price-section h2 {
    font-size: 30px !important;
  }
}
/* ---------------------------------------------------
   MOBILE STYLES
--------------------------------------------------- */
@media (max-width: 768px), (orientation: landscape) and (max-width: 1080px) {
  /* Mobile-specific styles for prices page */
  .prices-list {
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
  
  .price-section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .price-section h2 {
    font-size: 17.5px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .contact-info {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    margin-bottom: 0;
  }
  
  .contact-info-item {
    font-size: 14.5px;
    margin-bottom: 5px;
  }
  
  .contact-row {
    display: block;
    text-align: center;
  }

  .contact-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 0;
  }
  
  .contact-details a {
    margin: 2px 0;
  }
  
  .contact-info a {
    word-break: break-all;
    overflow-wrap: break-word;
    font-size: 14.5px;
  }

  /* Mobile-specific dotted line content */
  .price-section:nth-child(1) span::after,
  .price-section:nth-child(2) span::after,
  .price-section:nth-child(3) span::after {
    content: '67676';
  }

  .price-section:nth-child(9) span::after {
    content: '67676766';
  }

  .price-section:nth-child(10) span::after,
  .price-section:nth-child(11) span::after,
  .price-section:nth-child(12) span::after {
    content: '676767676';
  }
}