/* =====================================================================
   ShotGram v88 — birthday picker, phone + RTL fixes
   Load AFTER styles.css so these rules win.

   What was wrong on a real phone:
     1. `height:24px` on the <select> is below Apple's 44px minimum tap
        target, and iOS clips a native select at that height, so the text
        sat half-cut.
     2. `font:700 13px` — iOS Safari auto-zooms the whole page when you
        focus a form control smaller than 16px. That is the "it jumps and
        goes blurry" effect.
     3. `.72fr 1.38fr .9fr` in three columns leaves the month box around
        110px on a 390px screen, so "September" / "سبتمبر" truncated.
     4. `padding:0 20px 0 0` reserved room for a chevron while
        `appearance:auto` ALSO drew the system chevron — two arrows, and
        on RTL the reserved space was on the wrong side entirely.
     5. Nothing switched sides for Arabic.

   The fix: two rows instead of three columns on narrow screens, 46px
   controls, 16px text, one custom chevron via appearance:none, and
   logical properties throughout so RTL mirrors for free.
   ===================================================================== */

.birthday-picker {
  padding: 14px;
  border-radius: 18px;
}

.birthday-picker-head {
  margin-block-end: 11px;
}

.birthday-picker-label {
  font-size: 14px;
}

/* --- layout -------------------------------------------------------- */
/* Month gets a full row of its own: it holds the longest word in both
   English and Arabic, and it is the field people got stuck on. */
.birthday-selects {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.birthday-select.month {
  grid-column: 1 / -1;
  order: -1;            /* month first reads better than DD / Month / YYYY */
}

/* --- the controls -------------------------------------------------- */
.birthday-select {
  padding: 9px 12px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
}

.birthday-select > span {
  font-size: 10.5px;
  letter-spacing: .06em;
}

.birthday-select select {
  /* 46px clears Apple's 44pt minimum with room for the border. */
  height: 46px;
  /* 16px is the threshold below which iOS zooms the page on focus.
     Do not lower this number. */
  font: 700 16px/1.2 inherit;

  /* One chevron, ours, on the correct side in both directions. */
  appearance: none;
  -webkit-appearance: none;
  padding-inline: 0 26px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 10px center, right 5px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--text);
  text-overflow: ellipsis;
}

/* Arabic / RTL: flip the chevron to the left edge. */
[dir="rtl"] .birthday-select select,
html[lang^="ar"] .birthday-select select {
  padding-inline: 26px 0;
  background-position: left 10px center, left 5px center;
  background-image: linear-gradient(315deg, transparent 50%, currentColor 50%),
                    linear-gradient(225deg, currentColor 50%, transparent 50%);
  direction: rtl;
  text-align: right;
}

/* The dropdown list itself — iOS renders this as a native wheel, but
   Android and desktop use these colours. */
.birthday-select select option {
  background: #10121c;
  color: #f4f5ff;
  font-size: 16px;
}

/* Focus ring that is visible against the purple card. */
.birthday-select:focus-within {
  border-color: color-mix(in srgb, var(--violet, #8b5cff) 58%, var(--line));
  box-shadow: 0 0 0 3px rgba(var(--violet-rgb, 139, 92, 255), .14);
}

.birthday-hint {
  margin-block-start: 11px;
  font-size: 12.5px;
}

/* --- very narrow phones (SE, older Androids) ----------------------- */
@media (max-width: 390px) {
  .birthday-picker { padding: 12px; }
  .birthday-selects { grid-template-columns: 1fr 1fr; gap: 8px; }
  .birthday-select { padding-inline: 10px; }
  /* Still 16px — shrinking this is what caused the zoom bug. */
  .birthday-select select { font-size: 16px; height: 46px; }
}

/* --- large text / accessibility ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .birthday-picker { transition: none; }
}