/* Testimonial form — testimonial.glossyfashion.shop (views/store/testimonial.php).
   Phone first: one column, 16px+ inputs (no iOS zoom), 48px touch targets. Black, white and greys;
   red only for errors. Tokens come from style.css. */

.gt { background: var(--bg); color: var(--text); min-height: 100vh; min-height: 100dvh; }
.gt-wrap { width: 100%; max-width: 720px; margin-inline: auto; padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
.gt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Header ─────────────────────────────────────────────── */
.gt-top { background: #000; color: #f5f5f5; padding-top: env(safe-area-inset-top); }
.gt-top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px 6px; }
.gt-logo { display: block; width: 118px; aspect-ratio: 698 / 360; }
.gt-logo span { display: block; width: 100%; height: 100%; background: #fff;
  -webkit-mask: url("../img/logo.png") center / contain no-repeat; mask: url("../img/logo.png") center / contain no-repeat; }
.gt-langs { display: flex; gap: 4px; background: rgba(255, 255, 255, .1); border-radius: 980px; padding: 3px; }
.gt-langs a { font-size: 13px; font-weight: 500; color: #c7c7c7; text-decoration: none; padding: 7px 12px; border-radius: 980px; min-height: 32px; display: inline-flex; align-items: center; }
.gt-langs a[lang="fa-AF"], .gt-langs a[lang="ps"] { font-family: "Rokh", var(--font-text); }
.gt-langs a[aria-current] { background: #fff; color: #000; }
.gt-hero { padding-block: 26px 34px; }
.gt-hero h1 { font-family: var(--font-display); font-size: clamp(28px, 7.4vw, 40px); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; margin: 0; text-wrap: balance; }
[dir="rtl"] .gt-hero h1 { letter-spacing: 0; line-height: 1.35; }
.gt-hero p { margin: 12px 0 0; color: #a1a1a1; font-size: 16px; line-height: 1.5; max-width: 52ch; }

/* ── Form ───────────────────────────────────────────────── */
.gt-main { padding-block: 28px 32px; }
.gt-form { display: grid; gap: 26px; }
.gt-grid { display: grid; gap: 26px; }
.gt-stack { display: grid; gap: 20px; align-content: start; }
@media (min-width: 680px) {
  .gt-grid { grid-template-columns: 260px minmax(0, 1fr); gap: 28px; }
}
.gt-field { display: grid; gap: 8px; align-content: start; min-width: 0; border: 0; padding: 0; margin: 0; }
.gt-label { font-size: 15px; font-weight: 600; color: var(--text); padding: 0; }
.gt-input {
  width: 100%; min-height: 52px; padding: 13px 16px; font: 17px/1.35 var(--font-text); color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; appearance: none; -webkit-appearance: none;
  transition: border-color .18s var(--ease-out), background-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.gt-input:focus { outline: none; background: var(--bg); border-color: var(--text); box-shadow: 0 0 0 3px rgba(0, 0, 0, .08); }
.gt-rtl { font-family: "Rokh", var(--font-text); text-align: right; }
.gt-select {
  padding-inline-end: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%236e6e6e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
[dir="rtl"] .gt-select { background-position: left 16px center; }
.gt-textarea { min-height: 150px; resize: vertical; unicode-bidi: plaintext; }
.gt-optional { font-weight: 400; color: var(--muted); }
.gt-hint { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.45; }
.gt-err { margin: 0; font-size: 14px; color: var(--danger); line-height: 1.4; }
.gt-invalid .gt-input, .gt-invalid .gt-photo { border-color: var(--danger); }
.gt-alert { margin: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--danger); color: var(--danger); font-size: 15px; }
/* Honeypot: hidden in place (an off-screen offset would widen the page in right-to-left layouts) */
.gt-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gt-form { position: relative; }

/* ── Photo (1:1) ────────────────────────────────────────── */
.gt-photo-field { max-width: 360px; }
.gt-photo { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; background: var(--surface); border: 1.5px dashed #b5b5b5; overflow: hidden; }
.gt-photo.has { border-style: solid; border-color: var(--line); touch-action: none; cursor: grab; }
.gt-photo.has:active { cursor: grabbing; }
.gt-pick { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; padding: 20px; cursor: pointer; color: var(--muted); }
.gt-pick svg { width: 44px; height: 44px; fill: none; stroke: var(--text); stroke-width: 1.4; stroke-linecap: round; margin-bottom: 4px; }
.gt-pick-text { font-size: 17px; font-weight: 600; color: var(--text); }
.gt-pick-hint { font-size: 14px; }
.gt-photo.has .gt-pick { display: none; }
.gt-photo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The file input stays focusable and usable without JS, but is visually replaced by the tile */
.gt-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gt-file:focus-visible + .gt-photo-tools, .gt-photo:focus-within { outline: none; }
.js-off .gt-file { position: static; width: auto; height: auto; opacity: 1; pointer-events: auto; }
/* Phones: before a photo is chosen the picker is a compact full-width row like the other fields;
   once chosen it opens into a full-width square for cropping. */
@media (max-width: 679px) {
  .gt-photo-field { max-width: none; }
  .gt-photo:not(.has) { aspect-ratio: auto; border-radius: 14px; }
  .gt-photo:not(.has) .gt-pick {
    position: relative; inset: auto; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "i t" "i h";
    place-content: center start; justify-items: start; align-items: center; text-align: start; column-gap: 14px; row-gap: 2px; padding: 16px 18px;
  }
  .gt-photo:not(.has) .gt-pick svg { grid-area: i; width: 40px; height: 40px; margin: 0; }
  .gt-photo:not(.has) .gt-pick-text { grid-area: t; font-size: 16px; }
  .gt-photo:not(.has) .gt-pick-hint { grid-area: h; font-size: 14px; }
  .gt-photo.has { border-radius: 16px; }
}
.gt-photo-tools { display: flex; align-items: center; gap: 12px; }
.gt-photo-tools[hidden] { display: none; }
.gt-photo-tools svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; flex: none; }
.gt-photo-tools input[type=range] { flex: 1; min-width: 0; accent-color: #000; height: 32px; }

/* ── Stars ──────────────────────────────────────────────── */
.gt-stars { display: flex; gap: 4px; }
.gt-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gt-stars label { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gt-stars svg { width: 38px; height: 38px; fill: transparent; stroke: #9a9a9a; stroke-width: 1.3; stroke-linejoin: round; transition: fill .15s var(--ease-out), stroke .15s var(--ease-out), transform .15s var(--ease-out); }
.gt-stars label.on svg, .gt-stars input:checked + label svg { fill: #000; stroke: #000; }
.gt-stars label:active svg { transform: scale(.9); }
.gt-stars input:focus-visible + label { outline: 2px solid var(--text); outline-offset: 2px; }
/* The stars always run 1 → 5 left to right; the captions sit under star 1 and star 5 in every language */
.gt-stars { justify-self: left; }
.gt-rate-words { display: flex; justify-content: space-between; width: 276px; max-width: 100%; justify-self: left; font-size: 13px; }

/* ── Consent ────────────────────────────────────────────── */
.gt-consent { grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.gt-consent input { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; margin: 0; border: 1.5px solid var(--text); border-radius: 8px; background: var(--bg); display: grid; place-items: center; cursor: pointer; }
.gt-consent input:checked { background: #000; border-color: #000; }
.gt-consent input:checked::after { content: ""; width: 12px; height: 6px; border-inline-start: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-2px) rotate(-45deg); }
[dir="rtl"] .gt-consent input:checked::after { transform: translateY(-2px) rotate(45deg) scaleX(-1); }
.gt-consent input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.gt-consent label { font-size: 15px; line-height: 1.5; cursor: pointer; }
.gt-consent .gt-err { grid-column: 2; }
.gt-invalid.gt-consent input { border-color: var(--danger); }

/* ── Submit ─────────────────────────────────────────────── */
.gt-submit { display: grid; gap: 12px; padding-top: 4px; }
.gt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 16px 24px;
  font: 600 17px/1 var(--font-text); color: #fff; background: #000; border: 0; border-radius: 980px; cursor: pointer; text-decoration: none;
  transition: transform .12s var(--ease-out), opacity .18s var(--ease-out); -webkit-tap-highlight-color: transparent;
}
.gt-btn:active { transform: scale(.98); }
.gt-btn:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.gt-btn[aria-busy="true"] { opacity: .75; pointer-events: none; }
.gt-spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: gt-spin .8s linear infinite; }
.gt-btn[aria-busy="true"] .gt-spin { display: inline-block; }
@keyframes gt-spin { to { transform: rotate(360deg); } }
@media (min-width: 680px) { .gt-submit .gt-btn { width: auto; justify-self: start; min-width: 280px; } }
.gt-link { font-size: 15px; font-weight: 500; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px 0; }

/* ── Thank you ──────────────────────────────────────────── */
.gt-done { display: grid; justify-items: center; gap: 18px; padding-block: 20px 40px; text-align: center; }
.gt-done-mark { width: 72px; height: 72px; fill: none; stroke: #000; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gt-done .gt-btn { max-width: 320px; }

/* ── Footer ─────────────────────────────────────────────── */
.gt-foot { display: flex; gap: 10px; justify-content: center; padding-block: 8px max(28px, env(safe-area-inset-bottom)); font-size: 14px; color: var(--muted); }
.gt-foot a { color: var(--muted); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .gt *, .gt *::before, .gt *::after { transition: none !important; animation-duration: 1ms !important; }
}