/* ===========================================
   Ratna Gems — Shipping & Delivery (scoped)
   Spectra-free; tokens scoped to .shipping-page
   =========================================== */

/* Scoped design tokens (no global :root) */
.shipping-page {
  --primary-color: #004E81;
  --secondary-color: #2E7D32;
  --accent-color: #D32F2F;

  --text-dark: #212529;
  --text-light: #495057;

  --bg-light: #F8F9FA;
  --bg-white: #FFFFFF;
  --border-color: #DEE2E6;

  --shadow-lg: 0 8px 40px rgba(0,0,0,.07);
  --shadow-sm: 0 4px 15px rgba(0,0,0,.10);
}

/* base */
.shipping-page *, .shipping-page *::before, .shipping-page *::after { box-sizing: border-box; }
.shipping-page { max-width: 1100px; margin: 2rem auto; background-color: var(--bg-white); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); }
.shipping-page h1, .shipping-page h2, .shipping-page h3 { line-height: 1.3; color: var(--primary-color); font-weight: 700; margin: 0 0 1rem 0; }
.shipping-page p { margin: 0 0 1rem 0; color: var(--text-light); max-width: 75ch; line-height: 1.7; }
.shipping-page a { color: var(--primary-color); font-weight: 600; text-decoration: underline; }
.shipping-page a:hover { text-decoration: none; }
.shipping-page a:focus-visible { outline: 2px solid var(--secondary-color); outline-offset: 2px; border-radius: 4px; }
.shipping-page img, .shipping-page svg { max-width: 100%; display: block; }

/* hero */
.shipping-page .page-hero { padding: 3rem 1.5rem; text-align: center; background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); }
.shipping-page .page-hero h1 { font-size: clamp(2rem, 5vw + 1rem, 3.2rem); }
.shipping-page .page-hero .intro-text { font-size: clamp(1rem, 1vw + .8rem, 1.1rem); margin-left: auto; margin-right: auto; }

/* main */
.shipping-page main { padding: 2.5rem 1.5rem; }
.shipping-page .policy-section { margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--border-color); }
.shipping-page .policy-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* headers */
.shipping-page .section-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.shipping-page .section-icon {
  flex-shrink: 0; width: 45px; height: 45px; background: #e6f0f7; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color);
}
.shipping-page .section-icon svg { width: 24px; height: 24px; fill: var(--primary-color); }
.shipping-page .section-header h2 { font-size: clamp(1.4rem, 3vw + 1rem, 1.8rem); }

/* grids/cards */
.shipping-page .card-grid { display: grid; gap: 1.5rem; margin-top: 1.5rem; grid-template-columns: 1fr; }
.shipping-page .info-card {
  background-color: var(--bg-light); border-radius: 12px; padding: 1.5rem;
  border: 1px solid var(--border-color); transition: transform .3s ease, box-shadow .3s ease;
}
.shipping-page .info-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.shipping-page .info-card h3 { color: var(--secondary-color); font-size: 1.25rem; }

/* methods */
.shipping-page .shipping-methods-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.shipping-page .method-item { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.5rem; }
.shipping-page .method-item .section-icon { width: 40px; height: 40px; }
.shipping-page .method-item h3 { font-size: 1.2rem; color: var(--text-dark); }

/* image wrapper to prevent CLS */
.shipping-page .shipping-image-wrapper { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); aspect-ratio: 4 / 3; }
.shipping-page .shipping-image-wrapper img { width: 100%; height: 100%; object-fit: cover; }

/* timelines note */
.shipping-page .timelines-note { margin-top: 1rem; font-size: .95rem; }

/* warning highlight */
.shipping-page .warning-card { background-color: #FFF8E1; border-left: 4px solid var(--accent-color); padding: 1.5rem; border-radius: 0 8px 8px 0; border: 1px solid #FFECB3; }
.shipping-page .warning-card .section-icon svg { fill: var(--accent-color); }
.shipping-page .warning-card .section-header h2 { color: var(--accent-color); }

/* contact (shared styling, scoped to this page) */
.shipping-page .contact-section { text-align: center; background-color: var(--bg-light); padding: 2.5rem 1.5rem; border-radius: 12px; }
.shipping-page .contact-buttons { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; align-items: center; }
.shipping-page .contact-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  padding: .75rem 1.5rem; border-radius: 50px; font-weight: 700; font-size: 1rem; min-width: 250px;
  border: 2px solid transparent; transition: transform .2s ease, box-shadow .2s ease; text-decoration: none; color: #fff;
}
.shipping-page .contact-button:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,.1); }
.shipping-page .contact-button.email { background-color: var(--primary-color); }
.shipping-page .contact-button.whatsapp { background-color: var(--secondary-color); }
.shipping-page .contact-button svg { width: 22px; height: 22px; fill: currentColor; }
.shipping-page .more-info { margin-top: 1.5rem; font-size: .95rem; }

/* reveal-on-scroll (no layout shift) */
.shipping-page .rg-aos { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.shipping-page .rg-aos.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .shipping-page .rg-aos { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* responsive */
@media (min-width: 768px) {
  .shipping-page main { padding: 3.5rem; }
  .shipping-page .page-hero { padding: 4rem 2rem; }
  .shipping-page .card-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .shipping-page .shipping-methods-layout { grid-template-columns: 1fr .6fr; }
  .shipping-page .contact-buttons { flex-direction: row; justify-content: center; }
}