/* Ring Try-On: visitors' page and try-on window. Mobile-first; logical properties for RTL. */
#rto-tryon, .rto-modal {
  --rto-gold: #a67c3d;
  --rto-gold-dark: #7e5a26;
  --rto-ink: #1f1d1a;
  --rto-muted: #6c665e;
  --rto-line: #e8e2d8;
  --rto-soft: #f7f3ec;
  --rto-err: #b42318;
  --rto-radius: 16px;
  color: var(--rto-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Sans", sans-serif;
  line-height: 1.5;
}
#rto-tryon[dir="rtl"], .rto-modal[dir="rtl"] { font-family: "Segoe UI", Tahoma, "Noto Kufi Arabic", "Noto Sans Arabic", system-ui, sans-serif; }
#rto-tryon *, .rto-modal *, .rto-modal *::before, .rto-modal *::after { box-sizing: border-box; }
#rto-tryon img, .rto-modal img { max-width: 100%; display: block; }
html.rto-lock, html.rto-lock body { overflow: hidden; }

/* Page */
.rto-page { max-width: 1120px; margin-inline: auto; display: flex; flex-direction: column; gap: 22px; }
.rto-page-head { text-align: center; max-width: 620px; margin-inline: auto; }
.rto-page-title { margin: 0 0 6px; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 700; letter-spacing: -0.01em; }
.rto-page-intro { margin: 0; color: var(--rto-muted); }
.rto-empty { text-align: center; color: var(--rto-muted); padding: 40px 0; }

/* Columns follow the space the theme gives us, not the screen: 2 on phones, more when wider. */
/* Category tabs */
.rto-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rto-cat { border: 1px solid var(--rto-line); background: #fff; color: var(--rto-ink); border-radius: 999px; padding: 7px 20px; font: inherit; font-size: 0.92rem; cursor: pointer; }
.rto-cat.is-active { background: var(--rto-gold); border-color: var(--rto-gold); color: #fff; }
.rto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
@media (min-width: 700px) { .rto-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; } }

.rto-ring { background: #fff; border: 1px solid var(--rto-line); border-radius: var(--rto-radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.2s, transform 0.2s; }
.rto-ring:hover { box-shadow: 0 10px 30px rgba(60, 40, 10, 0.12); transform: translateY(-2px); }
.rto-ring-media { all: unset; cursor: pointer; aspect-ratio: 1 / 1; background: var(--rto-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rto-ring-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.rto-ring-media.is-cutout { background: radial-gradient(circle at 50% 45%, #fff 0%, var(--rto-soft) 75%); }
.rto-ring-media.is-cutout img { object-fit: contain; padding: 14%; filter: drop-shadow(0 6px 10px rgba(60, 40, 10, 0.18)); }
.rto-ring:hover .rto-ring-media img { transform: scale(1.04); }
.rto-ring-media:focus-visible { outline: 3px solid var(--rto-gold); outline-offset: -3px; }
.rto-ring-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.rto-ring-title { margin: 0; font-size: 0.98rem; font-weight: 650; }
.rto-ring-desc { margin: 0; color: var(--rto-muted); font-size: 0.85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rto-ring-btn { margin-top: auto; width: 100%; }

/* Buttons */
.rto-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 650; font-size: 0.95rem; cursor: pointer; text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.rto-btn:active { transform: scale(0.98); }
.rto-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rto-btn--primary { background: var(--rto-gold); color: #fff; }
.rto-btn--primary:hover { background: var(--rto-gold-dark); color: #fff; }
.rto-btn--ghost { background: #fff; color: var(--rto-gold-dark); border-color: var(--rto-gold); }
.rto-btn--wide { width: 100%; }
.rto-filebtn { position: relative; overflow: hidden; }
.rto-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

/* Modal: full screen on phones, centred sheet on larger screens */
.rto-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(20, 16, 10, 0.6); display: flex; align-items: stretch; justify-content: center; }
.rto-sheet { background: #fff; width: 100%; display: flex; flex-direction: column; overflow: hidden; animation: rto-up 0.25s ease-out; }
@media (min-width: 700px) {
  .rto-modal { align-items: center; padding: 24px; }
  .rto-sheet { max-width: 560px; max-height: calc(100vh - 48px); border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
}
@keyframes rto-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.rto-sheet-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rto-line); }
.rto-sheet-thumb { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.rto-sheet-title { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rto-close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--rto-soft); font-size: 1rem; cursor: pointer; color: var(--rto-ink); }
.rto-modal-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
/* Scroll the window instead of squeezing (and cropping) the photo on short screens. */
.rto-modal-body > * { flex-shrink: 0; }

.rto-privacy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 8px; margin: auto 0; }
.rto-privacy h3 { margin: 0; }
.rto-privacy p { margin: 0; color: var(--rto-muted); max-width: 380px; }
.rto-privacy-icon { font-size: 2.4rem; }
.rto-error-text { color: var(--rto-ink) !important; font-weight: 600; }

/* Camera */
.rto-cam { position: relative; border-radius: 16px; overflow: hidden; background: #111; aspect-ratio: 3 / 4; max-height: 62vh; margin-inline: auto; width: 100%; }
.rto-video { width: 100%; height: 100%; object-fit: cover; }
.rto-cam.is-mirrored .rto-video { transform: scaleX(-1); }
.rto-frame {
  position: absolute; inset: 10%; border-radius: 22px; pointer-events: none;
  border: 2px dashed rgba(255, 255, 255, 0.75); box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.18);
}
.rto-cam-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; }
.rto-tip { margin: 0; text-align: center; color: var(--rto-muted); font-size: 0.92rem; }
.rto-cam-actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.rto-cam-actions .rto-filebtn { justify-self: start; }
.rto-shutter {
  width: 72px; height: 72px; border-radius: 50%; border: 5px solid var(--rto-gold); background: #fff; cursor: pointer;
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 40px var(--rto-gold); transition: transform 0.1s;
}
.rto-shutter:active { transform: scale(0.93); }
.rto-shutter:disabled { opacity: 0.4; cursor: default; }

/* Review and result */
.rto-review, .rto-result { position: relative; border-radius: 16px; overflow: hidden; background: var(--rto-soft); }
.rto-review-img { width: 100%; max-height: 62vh; object-fit: contain; margin-inline: auto; }
.rto-review-img--none { font-size: 3rem; text-align: center; padding: 60px 0; }
.rto-result img { width: 100%; max-height: 62vh; object-fit: contain; margin-inline: auto; }
.rto-result .rto-busy { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.55); justify-content: center; display: none; }
.rto-result.is-busy .rto-busy { display: flex; }
.rto-row { display: flex; gap: 10px; justify-content: center; }
.rto-row > .rto-btn { flex: 1; max-width: 240px; white-space: nowrap; }
.rto-row--wrap { flex-wrap: wrap; }
/* Phones: the main action (save) gets its own full-width row. */
@media (max-width: 520px) { .rto-row--wrap > .rto-btn:first-child { flex-basis: 100%; max-width: none; } }

.rto-controls { display: flex; flex-direction: column; gap: 12px; }
.rto-control { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.rto-control-label { font-weight: 650; font-size: 0.9rem; }
.rto-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rto-chip { min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--rto-line); background: #fff; font: inherit; font-size: 0.88rem; cursor: pointer; color: var(--rto-ink); }
.rto-chip.is-active { background: var(--rto-gold); border-color: var(--rto-gold); color: #fff; font-weight: 650; }
.rto-chip:disabled { opacity: 0.6; }
.rto-stepper { display: flex; align-items: center; gap: 8px; }
.rto-step-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rto-line); background: #fff; font-size: 1.2rem; cursor: pointer; color: var(--rto-ink); }
.rto-step-btn:disabled { opacity: 0.35; cursor: default; }
.rto-size-value { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 650; }

/* Status */
.rto-busy { display: flex; align-items: center; gap: 10px; color: var(--rto-muted); padding: 40px 0; justify-content: center; }
.rto-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--rto-line); border-top-color: var(--rto-gold); animation: rto-spin 0.8s linear infinite; }
@keyframes rto-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .rto-sheet, .rto-ring, .rto-ring-media img, .rto-spin { animation: none; transition: none; }
}

/* Sharing the result */
.rto-share { display: flex; flex-direction: column; gap: 8px; }
.rto-share-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rto-share-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rto-line); background: #fff; color: var(--rto-ink); font: inherit; font-size: 0.9rem;
  text-decoration: none; line-height: 1.2;
}
.rto-share-btn:hover { border-color: var(--rto-gold); color: var(--rto-ink); }
.rto-share-btn[hidden] { display: none; }
.rto-share-btn svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.rto-share-btn--main { background: var(--rto-ink); border-color: var(--rto-ink); color: #fff; }
.rto-share-btn--main:hover { color: #fff; }
.rto-share-btn--whatsapp svg { fill: #25d366; }
.rto-share-btn--facebook svg { fill: #1877f2; }
.rto-share-note { margin: 0; text-align: center; color: var(--rto-muted); font-size: 0.8rem; }