/* ═══════════════════════════════════════════════════
   ROYA v6 — UI/UX Improvements
   Performance, polish, and multi-market enhancements
   ═══════════════════════════════════════════════════ */

/* ─── Performance: Content-visibility for below-fold sections ─── */
.section:nth-child(n+3) { content-visibility: auto; contain-intrinsic-size: auto 600px; }

/* ─── Smoother animations ─── */
@media (prefers-reduced-motion: no-preference) {
  .card { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; }
  .card:hover { transform: translateY(-8px); }
  .btn { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(0.98); }
}

/* ─── Better card design ─── */
.card { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.card-content h3 { font-size: clamp(1rem, 2vw, 1.25rem); letter-spacing: -0.01em; }
.card-image { position: relative; overflow: hidden; }
.card-image::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(transparent, rgba(10,25,41,0.5)); pointer-events: none; }

/* ─── Market badge on cards ─── */
.market-badge { position: absolute; top: 12px; right: 12px; background: rgba(10,25,41,0.85); backdrop-filter: blur(8px); color: #fff; padding: 5px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; z-index: 2; border: 1px solid rgba(255,255,255,0.08); }

/* ─── Price with currency conversion hint ─── */
.price-text { font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 1.15rem; }
.price-converted { display: inline-block; margin-left: 6px; font-size: 0.78rem; color: rgba(255,255,255,0.45); font-weight: 500; font-family: var(--font-body); }

/* ─── Section transitions ─── */
.section-header { opacity: 0; transform: translateY(20px); animation: fadeInSection 0.6s ease forwards; }
@keyframes fadeInSection { to { opacity: 1; transform: translateY(0); } }

/* ─── Better hero mobile ─── */
@media (max-width: 768px) {
  .hero { padding-top: 100px !important; min-height: 80vh !important; }
  .hero h1 { font-size: 2rem !important; line-height: 1.15 !important; }
  .hero p { font-size: 1rem !important; }
  .section { padding: 3.5rem 0 !important; }
  .section-header { margin-bottom: 2rem !important; }
  .grid-3, .grid-4 { gap: 1rem !important; }
}

/* ─── Better form inputs ─── */
input, select, textarea {
  font-size: 16px !important; /* Prevents iOS zoom */
}

/* ─── Scrollbar styling ─── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.5); }

/* ─── Loading skeleton ─── */
.skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ─── Better CTA contrast ─── */
.btn-primary { text-shadow: none; font-weight: 700; letter-spacing: 0.02em; }
.btn-outline:hover { box-shadow: 0 4px 20px rgba(212,175,55,0.25); }

/* ─── Focus accessibility ─── */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ─── Print styles ─── */
@media print {
  .header, .footer, .mobile-cta-bar, .back-to-top, .quick-actions, #siteHeader, #siteFooter { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding: 1rem 0; break-inside: avoid; }
}