/* AOPS Forms v2.8.0 — Premium */
*,*::before,*::after{box-sizing:border-box}

/* ── Wrapper ─────────────────────────────────────────────────────── */
.aops-form-wrap{
  max-width:760px;margin:0 auto;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:#111827;background:#f0f2f7;
  border-radius:16px;overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,.1);
}

/* ── Header ──────────────────────────────────────────────────────── */
.aops-form-header{
  padding:30px 36px 26px;
  background:linear-gradient(135deg,#1a1a6e 0%,#2d2d8e 55%,#1e3a8a 100%);
  position:relative;overflow:hidden;
}
.aops-form-header::before{
  content:'';position:absolute;top:-50px;right:-50px;
  width:180px;height:180px;border-radius:50%;
  background:rgba(255,255,255,.06);pointer-events:none;
}
.aops-form-header.ta-center .aops-form-title,
.aops-form-header.ta-center .aops-form-subtitle{text-align:center}
.aops-form-title{font-size:26px;font-weight:800;color:#fff;margin:0 0 5px;letter-spacing:-.3px}
.aops-form-subtitle{font-size:14px;color:rgba(255,255,255,.8);margin:0;line-height:1.6}

/* ── Trust bar ───────────────────────────────────────────────────── */
.aops-trust-bar{
  display:flex;background:#fff;border-bottom:1px solid #e9ecf3;
}
.aops-trust-item{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 8px;font-size:12px;font-weight:600;color:#4b5563;
  border-right:1px solid #e9ecf3;white-space:nowrap;
}
.aops-trust-item:last-child{border-right:none}
.aops-trust-item span:first-child{font-size:15px}

/* ── Form body ───────────────────────────────────────────────────── */
.aops-form{padding:16px;display:flex;flex-direction:column;gap:12px}

/* ── Sections — individual blocks ───────────────────────────────── */
.aops-section{
  background:#fff;
  border-radius:12px;
  padding:22px 24px;
  border:1px solid #e5e7eb;
}
.aops-section-title{
  font-size:15px;font-weight:700;color:#111827;
  margin:0 0 16px;
  display:flex;align-items:center;gap:10px;
}
.section-num{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#2d2d8e,#4444cc);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
}

/* Submit section */
.aops-submit-section{
  background:#f8f9ff;border-radius:12px;
  padding:20px 24px;border:1px solid #e5e7eb;
  text-align:center;
}

/* ── Fields ──────────────────────────────────────────────────────── */
.aops-field{margin-bottom:14px}
.aops-field:last-child{margin-bottom:0}
.aops-field label{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;
  font-size:13px;font-weight:600;color:#374151;margin-bottom:5px;
}
.field-hint{font-size:11px;font-weight:400;color:#9ca3af}
.req{color:#ef4444}

.aops-field input[type=text],
.aops-field input[type=email],
.aops-field input[type=tel],
.aops-field input[type=url],
.aops-field select,
.aops-field textarea{
  width:100%;padding:10px 13px;font-size:14px;
  border:1.5px solid #e5e7eb;border-radius:9px;
  color:#111827;background:#fff;
  transition:border-color .2s,box-shadow .2s;
  font-family:inherit;-webkit-appearance:none;appearance:none;
}
.aops-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;
}
.aops-field input:focus,.aops-field select:focus,.aops-field textarea:focus{
  outline:none;border-color:#2d2d8e;box-shadow:0 0 0 3px rgba(45,45,142,.1);
}
.aops-field input.error,.aops-field textarea.error{border-color:#ef4444}
.aops-field textarea{resize:vertical;min-height:110px;line-height:1.6}

/* ── Grid layouts ────────────────────────────────────────────────── */
.aops-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.aops-row1{display:grid;grid-template-columns:1fr;gap:14px}
@media(max-width:580px){.aops-row2{grid-template-columns:1fr}}
/* Single column mode */
.aops-form-wrap.single-col .aops-row2{grid-template-columns:1fr}
.aops-phone-row{display:flex;gap:8px}
.aops-phone-row select{width:130px;flex-shrink:0}
.aops-phone-row input{flex:1}

/* ── Locked service ──────────────────────────────────────────────── */
.aops-locked-service{
  padding:10px 14px;background:#f0f4ff;border-radius:8px;
  font-size:14px;font-weight:500;color:#1a3a8a;
}

/* ── Service grid ────────────────────────────────────────────────── */
.aops-services-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:8px;
}
.aops-choice{cursor:pointer;position:relative}
.aops-choice input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;width:100%;height:100%}
.aops-choice-label{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  border:1.5px solid #e5e7eb;border-radius:9px;
  font-size:13px;font-weight:500;color:#374151;
  transition:all .2s;background:#fafafa;user-select:none;
}
.svc-icon{font-size:17px;flex-shrink:0}
.aops-choice input:checked+.aops-choice-label{
  border-color:#2d2d8e;background:linear-gradient(135deg,#eff0fb,#e8eafa);
  color:#2d2d8e;font-weight:600;box-shadow:0 2px 8px rgba(45,45,142,.12);
}
.aops-choice:hover .aops-choice-label{border-color:#2d2d8e;background:#f5f5fb}

/* ── Delivery ────────────────────────────────────────────────────── */
.aops-delivery-grid{display:flex;flex-wrap:wrap;gap:8px}
.aops-delivery-opt{cursor:pointer;position:relative;display:block}
.aops-delivery-opt input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;width:100%;height:100%}
.aops-delivery-label{
  display:block;padding:9px 14px;text-align:center;
  border:1.5px solid #e5e7eb;border-radius:9px;transition:all .2s;background:#fafafa;white-space:nowrap;
}
.dopt-time{font-size:13px;font-weight:700;color:#111827;display:block}
.dopt-note{font-size:11px;color:#9ca3af;display:block;margin-top:1px}
.aops-delivery-opt.is-rush .aops-delivery-label{border-color:#fcd34d;background:#fffbeb}
.aops-delivery-opt.is-rush .dopt-note{color:#d97706;font-weight:600}
.aops-delivery-opt:hover .aops-delivery-label{border-color:#2d2d8e;background:#f5f5fb}

/* ── Selected state ───────────────────────────────────────────────
   The previous checked style was a pale tint that read as a hover, so people
   could not tell what they had picked. Make the choice unmistakable: solid
   purple fill, white text, and a checkmark. Also keep a focus ring, so keyboard
   users can see where they are. */
.aops-delivery-opt input:checked + .aops-delivery-label{
  border-color:#2d2d8e;
  background:linear-gradient(135deg,#2d2d8e,#4444cc);
  box-shadow:0 2px 8px rgba(45,45,142,.28);
  padding-right:34px;                 /* room for the tick */
  position:relative;
}
.aops-delivery-opt input:checked + .aops-delivery-label .dopt-time{color:#fff}
.aops-delivery-opt input:checked + .aops-delivery-label .dopt-note{color:rgba(255,255,255,.85)}
.aops-delivery-opt input:checked + .aops-delivery-label::after{
  content:'✓';
  position:absolute;top:50%;right:12px;transform:translateY(-50%);
  font-size:14px;font-weight:800;color:#fff;line-height:1;
}
/* A rush option that is selected must still look selected, not just "rush". */
.aops-delivery-opt.is-rush input:checked + .aops-delivery-label{
  border-color:#b45309;
  background:linear-gradient(135deg,#d97706,#f59e0b);
  box-shadow:0 2px 8px rgba(217,119,6,.3);
}
.aops-delivery-opt.is-rush input:checked + .aops-delivery-label .dopt-note{color:#fff7ed}

/* Keyboard focus — the real input is transparent and overlaid, so style via :focus-visible. */
.aops-delivery-opt input:focus-visible + .aops-delivery-label,
.aops-choice input:focus-visible + .aops-choice-label{
  outline:2px solid #2d2d8e;outline-offset:2px;
}

/* Same treatment for the service checkboxes, which had the same faint-tint problem. */
.aops-choice input:checked + .aops-choice-label{
  border-color:#2d2d8e;background:#eff0fb;font-weight:700;color:#2d2d8e;
}

/* ── Char counter ────────────────────────────────────────────────── */
.aops-char-hint{font-size:12px;color:#9ca3af;text-align:right;margin-top:3px}
.aops-char-hint.ok{color:#16a34a}.aops-char-hint.warn{color:#d97706}

/* ── Upload ──────────────────────────────────────────────────────── */
.aops-dropzone{
  border:2px dashed #d1d5db;border-radius:10px;padding:20px 16px 14px;
  text-align:center;cursor:pointer;background:#f9fafe;
  position:relative;transition:all .2s;
}
.aops-dropzone:hover,.aops-dropzone.dragover{border-color:#2d2d8e;background:#eff0fb}
.aops-dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;z-index:2}
.aops-dropzone .dz-text{position:relative;z-index:1}
.aops-dropzone .dz-icon{position:relative;z-index:1}
.aops-dropzone .dz-meta{position:relative;z-index:1}
.dz-icon{font-size:28px;margin-bottom:6px}
.dz-text{font-size:13px;color:#374151;font-weight:500}
.dz-browse{color:#2d2d8e;font-weight:700;cursor:pointer;text-decoration:underline;pointer-events:none}
.dz-meta{font-size:11px;color:#b0bec5;margin-top:6px;line-height:1.6}
.dz-meta a{color:#9ca3af;text-decoration:none}
.dz-meta a:hover{color:#2d2d8e}
.aops-file-list{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.aops-file-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:7px;font-size:13px}
.file-icon{font-size:16px;flex-shrink:0}
.file-info{flex:1;overflow:hidden}
.file-name{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-size{font-size:11px;color:#9ca3af}
.file-progress{height:3px;background:#e5e7eb;border-radius:99px;margin-top:4px;overflow:hidden}
.file-progress-bar{height:100%;background:linear-gradient(90deg,#2d2d8e,#4444cc);transition:width .3s;width:0}
.file-status{flex-shrink:0;font-size:12px}
.file-status.ok{color:#16a34a}.file-status.err{color:#ef4444}.file-status.uploading{color:#6b7280}

/* ── Submit ──────────────────────────────────────────────────────── */
.aops-submit-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 48px;font-size:17px;font-weight:700;
  background:linear-gradient(135deg,#2d2d8e,#4444cc);
  color:#fff;border:none;border-radius:10px;cursor:pointer;
  box-shadow:0 4px 16px rgba(45,45,142,.35);transition:all .2s;min-width:240px;
}
.aops-submit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(45,45,142,.45)}
.aops-submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-loading{display:none}
.btn-spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:aops-spin .7s linear infinite}
@keyframes aops-spin{to{transform:rotate(360deg)}}

/* ── Messages ────────────────────────────────────────────────────── */
.aops-form-msg{padding:12px 16px;border-radius:8px;font-size:14px;margin-bottom:14px;display:none}
.aops-form-msg.error{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.aops-form-msg.success{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}

/* ── Success ─────────────────────────────────────────────────────── */
#aops-success{display:none;border-radius:16px;overflow:hidden}
.aops-success-box{background:linear-gradient(135deg,#1a1a6e,#2d2d8e);padding:36px 32px;color:#fff;text-align:center}
.success-icon{font-size:48px;margin-bottom:12px}
.aops-success-box h3{font-size:22px;font-weight:800;margin:0 0 8px;color:#fff}
.aops-success-box p{font-size:15px;color:rgba(255,255,255,.85);margin:0;line-height:1.7}

/* ── Error card ──────────────────────────────────────────────────── */
.aops-error-card{padding:20px;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;color:#dc2626;text-align:center}

/* ── Workspace ───────────────────────────────────────────────────── */
.aops-workspace{max-width:600px;margin:0 auto;font-family:inherit}
.aops-workspace-header{background:linear-gradient(135deg,#1a1a6e,#2d2d8e);border-radius:12px;padding:22px 26px;color:#fff;margin-bottom:12px}
.aops-workspace-header h3{margin:0 0 4px;font-size:19px;font-weight:700}
.aops-workspace-header p{margin:0;opacity:.85;font-size:14px}
.aops-ws-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:16px 20px;margin-bottom:10px}
.aops-ws-card h4{margin:0 0 10px;font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.05em}
.aops-ws-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid #f3f4f6;font-size:14px}
.aops-ws-row:last-child{border-bottom:none}
.aops-ws-label{color:#6b7280;font-weight:500}.aops-ws-value{color:#111827;font-weight:600}
.aops-status-badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600}
.aops-status-new{background:#eff6ff;color:#1d4ed8}.aops-status-review{background:#fffbeb;color:#92400e}
.aops-status-quoted,.aops-status-done{background:#f0fdf4;color:#166534}
.aops-workspace-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;background:linear-gradient(135deg,#2d2d8e,#4444cc);color:#fff;border-radius:9px;text-decoration:none;font-weight:700;font-size:15px;transition:all .2s}
.aops-workspace-btn:hover{transform:translateY(-1px);color:#fff}


/* ── Placeholder color ───────────────────────────────────────────── */
.aops-field input::placeholder,
.aops-field textarea::placeholder { color:#9ca3af }
.aops-field select { color:#374151 }
.aops-field select option[value=""] { color:#9ca3af }
/* Unselected select shows placeholder color */
.aops-field select:not([value]):invalid,
.aops-field select option:first-child:checked { color:#9ca3af }
/* ── Responsive ──────────────────────────────────────────────────── */
@media(max-width:580px){
  .aops-form-header{padding:22px 18px 18px}
  .aops-form-title{font-size:21px}
  .aops-form{padding:10px}
  .aops-section{padding:16px 14px}
  .aops-services-grid{grid-template-columns:1fr 1fr}
  .aops-submit-btn{min-width:100%;padding:14px}
  .aops-trust-item{padding:8px 4px;font-size:11px}
  .aops-trust-item span:first-child{font-size:13px}
}

/* ── Placeholder-only mode (no labels) ──────────────────────────── */
.aops-form-wrap.no-labels .aops-field > label { display:none }
/* Keep delivery option labels and service choice labels visible in no-labels mode */
.aops-form-wrap.no-labels .aops-delivery-opt { display:block }
.aops-form-wrap.no-labels .aops-delivery-opt label,
.aops-form-wrap.no-labels .aops-choice label { display:flex }
.aops-form-wrap.no-labels .aops-field { margin-bottom:10px }
/* aops-field-label: permanent label (not hidden by no-labels mode) */
.aops-field-label{font-size:13px;font-weight:600;color:#374151;margin-bottom:8px;display:flex;align-items:center;gap:4px}

/* File upload error state */
#aops-drop-area.error {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
}
#aops-drop-area.error::after {
    content: 'File required';
    display: block;
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
    font-weight: 600;
}
.file-status.ok { color: #16a34a; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════
   Form variants — form_type="short" / form_type="multistep"
   ══════════════════════════════════════════════════════════════════ */

.aops-form-short{max-width:520px}
.aops-form-multistep{max-width:580px}

/* The old "variants always stack" rule lived here and flattened every 2-column row
   in the short and multistep forms. Removed — those variants now opt in to a grid
   deliberately, and the short form uses its own .aopsrf-row (below) which nothing
   else can flatten. */
.aops-form-multistep .aops-row2{grid-template-columns:1fr 1fr}

/* Delivery label (variants render it without a section heading) */
.aops-field-label{
  display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:8px;
}

/* ── Progress bar (multistep) ───────────────────────────────────── */
.aops-progress{padding:16px 16px 0}
.aops-progress-bar{
  height:6px;background:#e5e7eb;border-radius:99px;overflow:hidden;
}
.aops-progress-fill{
  display:block;height:100%;width:50%;border-radius:99px;
  background:linear-gradient(135deg,#2d2d8e,#4444cc);
  transition:width .35s cubic-bezier(.4,0,.2,1);
}
/* The "1. About you / 2. Your project" text labels were removed from the markup —
   the bar alone is the progress indicator now. Any stray .aops-progress-steps left
   in a cached page stays hidden rather than rendering as bare black text. */
.aops-progress-steps{display:none}

/* ── Step transitions ───────────────────────────────────────────── */
.aops-step{animation:aops-step-in .35s ease}
@keyframes aops-step-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

/* ── Step nav (Back / Submit) ───────────────────────────────────── */
.aops-step-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.aops-step-nav .aops-submit-btn{flex:1}
.aops-back-btn{
  padding:14px 24px;font-size:15px;font-weight:600;
  background:#fff;color:#374151;border:1.5px solid #d1d5db;
  border-radius:10px;cursor:pointer;transition:all .2s ease;
}
.aops-back-btn:hover{border-color:#2d2d8e;color:#2d2d8e;background:#f5f5fb}

/* Full-width Continue button on step 1 */
#aops-step-next{width:100%}

/* ── Trust badges under the short form ──────────────────────────── */
.aops-form-short .aops-trust-bar{
  border-top:1px solid #e5e7eb;border-radius:0 0 16px 16px;
}

@media(max-width:520px){
  .aops-step-nav{flex-direction:column-reverse}
  .aops-step-nav .aops-back-btn,
  .aops-step-nav .aops-submit-btn{width:100%}
}

/* ══════════════════════════════════════════════════════════════════
   Responsive — all variants
   Desktop widths: short 520, multistep 580, long 680.
   ══════════════════════════════════════════════════════════════════ */

.aops-form-long{max-width:680px}
.aops-form-contact{max-width:480px}
/* Contact form fills its column nicely — wider than the compact short form.
   Higher specificity so it wins over .aops-form-wrap.aopsrf{max-width:520px}. */
.aops-form-wrap.aopsrf.aops-form-contact{max-width:640px}

/* ══════════════════════════════════════════════════════════════════
   Premium polish — short form / contact / multistep step 2
   ══════════════════════════════════════════════════════════════════ */

/* Small uppercase field labels. */
.aops-mini-label{
  display:block;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#8b90a0;margin:0 0 5px;
}

/* Softer, tinted field backgrounds with a refined border. */
.aops-form-short .aops-form input[type=text],
.aops-form-short .aops-form input[type=email],
.aops-form-short .aops-form input[type=tel],
.aops-form-short .aops-form select,
.aops-form-short .aops-form textarea,
.aops-form-contact .aops-form input,
.aops-form-contact .aops-form select,
.aops-form-contact .aops-form textarea{
  background:#fafbff;border:1px solid #e6e8f2;border-radius:9px;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.aops-form-short .aops-form input:focus,
.aops-form-short .aops-form select:focus,
.aops-form-short .aops-form textarea:focus,
.aops-form-contact .aops-form input:focus,
.aops-form-contact .aops-form select:focus,
.aops-form-contact .aops-form textarea:focus{
  background:#fff;border-color:#2d2d8e;box-shadow:0 0 0 3px rgba(45,45,142,.10);outline:none;
}

/* ══════════════════════════════════════════════════════════════════
   SHORT FORM (.aopsrf-*) — self-contained, compact, premium.
   Its own namespace on purpose: the previous build reused .aops-row2 and the
   grid kept getting flattened to one column by an older rule and by theme CSS.
   Nothing else in this file (or any theme) styles .aopsrf-*, and the grid is
   !important so it cannot be flattened again.
   ══════════════════════════════════════════════════════════════════ */

.aops-form-wrap.aopsrf{
  max-width:520px;margin:0 auto;padding:20px;
  background:#fff;border:1px solid #eef0f6;border-radius:12px;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
  font-size:14px;line-height:1.4;box-sizing:border-box;
}
.aops-form-wrap.aopsrf *{box-sizing:border-box}

/* Centered header (title + subtitle). */
.aopsrf-head{margin:0 0 14px;text-align:center}
.aopsrf .aopsrf-title{
  margin:0;font-size:16px;font-weight:700;color:#0f172a;line-height:1.3;
  padding:0;border:0;letter-spacing:-.01em;
}
.aopsrf .aopsrf-subtitle{
  margin:5px 0 0;font-size:13px;color:#64748b;line-height:1.5;
}

/* The row. Highly specific + !important: this is the bit that kept losing. */
.aops-form-wrap.aopsrf .aopsrf-form .aopsrf-row{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin:0 0 10px !important;
  align-items:start;
}
.aops-form-wrap.aopsrf .aopsrf-form .aopsrf-cell{min-width:0}  /* lets children shrink */
/* AN !important IN A STYLESHEET BEATS A NON-IMPORTANT INLINE STYLE.
   That is the one direction where inline loses, it is counter-intuitive, and it is
   the whole reason this rule exists. Anyone debugging a row that will not hide
   reaches for style="display:none" first — it was already there, and already losing.

   Both of the obvious mechanisms set a NON-IMPORTANT inline display, so the row rule
   above killed them at the same time: style="display:none" and jQuery .show()/.hide()
   alike. A toggle dead in both directions looks like a toggle that was never wired.

   The winner was that row rule: display:grid !important at four classes (0,4,0). The
   .aopsrf-hidden utility is one class (0,1,0) and loses to it too — so the class that
   exists for exactly this job could never have done it, and nothing revealed that
   because nothing had ever asked it to. Five classes here (0,5,0), so this one wins.
   Specificity computed, not eyeballed: the first draft of this comment had the
   numbers wrong while reaching the right conclusion. */
.aops-form-wrap.aopsrf .aopsrf-form .aopsrf-row.aopsrf-hidden{display:none !important}

/* Fields */
.aops-form-wrap.aopsrf .aopsrf-input{
  width:100%;display:block;margin:0;
  padding:9px 12px;font-size:14px;line-height:1.35;
  color:#0f172a;background:#fff;
  border:1px solid #e2e8f0;border-radius:8px;
  transition:border-color .16s ease, box-shadow .16s ease;
  min-height:0;height:auto;
}
.aops-form-wrap.aopsrf .aopsrf-input::placeholder{color:#94a3b8}
.aops-form-wrap.aopsrf .aopsrf-input:focus{
  outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.aops-form-wrap.aopsrf .aopsrf-input.error{border-color:#ef4444;background:#fef2f2}

.aops-form-wrap.aopsrf .aopsrf-textarea{
  resize:vertical;min-height:62px;margin:0 0 10px;
}

/* Phone: dialling code stays narrow so the number never overflows. */
.aops-form-wrap.aopsrf .aopsrf-phone{display:flex;gap:6px}
.aops-form-wrap.aopsrf .aopsrf-phone .aopsrf-code{
  width:78px;min-width:78px;flex:0 0 78px;padding-left:8px;padding-right:6px;
}
.aops-form-wrap.aopsrf .aopsrf-phone input{flex:1 1 auto;min-width:0}

/* WhatsApp — deliberately tiny. */
.aops-form-wrap.aopsrf .aopsrf-wa{
  display:flex;align-items:center;gap:6px;
  margin:-2px 0 10px;font-size:12px;color:#64748b;cursor:pointer;
}
.aops-form-wrap.aopsrf .aopsrf-wa input{width:auto;margin:0;min-height:0}

/* Compact dropzone — one line, ~70px. */
.aops-form-wrap.aopsrf .aopsrf-drop{margin:0 0 10px}
.aops-form-wrap.aopsrf .aopsrf-dz{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:70px;padding:12px;text-align:center;
  border:1.5px dashed #cbd5e1;border-radius:8px;background:#fafbff;
  transition:border-color .16s ease, background .16s ease;
}
.aops-form-wrap.aopsrf .aopsrf-dz:hover,
.aops-form-wrap.aopsrf .aopsrf-dz.dragover{border-color:#2563eb;background:#f0f5ff}
.aops-form-wrap.aopsrf .aopsrf-dz input[type=file]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2;
}
.aops-form-wrap.aopsrf .aopsrf-dz-text{
  font-size:13px;color:#475569;line-height:1.45;position:relative;z-index:1;
}
.aops-form-wrap.aopsrf .aopsrf-dz-text strong{color:#2563eb;font-weight:700}
.aops-form-wrap.aopsrf .aopsrf-dz-text em{
  display:block;font-style:normal;font-size:11px;color:#94a3b8;margin-top:2px;
}
.aops-form-wrap.aopsrf .aopsrf-dz.error,
.aops-form-wrap.aopsrf #aops-drop-area.error{border-color:#ef4444;background:#fef2f2}
.aops-form-wrap.aopsrf .aopsrf-files{margin-top:6px}
.aops-form-wrap.aopsrf .aopsrf-files:empty{margin-top:0}

/* Submit */
.aops-form-wrap.aopsrf .aopsrf-btn{
  display:block;width:100%;margin:0;
  padding:12px 18px;font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#1a3a8a,#2563eb);
  border:0;border-radius:8px;cursor:pointer;
  box-shadow:0 4px 12px rgba(37,99,235,.24);
  transition:transform .12s ease, box-shadow .16s ease, filter .16s ease;
}
.aops-form-wrap.aopsrf .aopsrf-btn:hover{filter:brightness(1.06);box-shadow:0 6px 16px rgba(37,99,235,.32)}
.aops-form-wrap.aopsrf .aopsrf-btn:active{transform:translateY(1px)}
.aops-form-wrap.aopsrf .aopsrf-btn:disabled{opacity:.65;cursor:default}

/* Trust — one line. */
.aops-form-wrap.aopsrf .aopsrf-trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-top:10px;font-size:11px;color:#94a3b8;
}

.aops-form-wrap.aopsrf .aops-form-msg{margin:0 0 10px;font-size:13px}
.aops-form-wrap.aopsrf .aops-form-msg:empty{margin:0;display:none}

/* Mobile: single column, 16px inputs (stops iOS zooming on focus). */
@media(max-width:640px){
  .aops-form-wrap.aopsrf{padding:16px;border-radius:10px}
  .aops-form-wrap.aopsrf .aopsrf-form .aopsrf-row{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .aops-form-wrap.aopsrf .aopsrf-input{font-size:16px;padding:11px 12px}
  .aops-form-wrap.aopsrf .aopsrf-btn{padding:14px 18px;font-size:16px}
}

/* WhatsApp opt-in under the phone field. */
.aops-wa-check{
  display:flex;align-items:center;gap:6px;margin-top:6px;
  font-size:12px;color:#6b7280;cursor:pointer;
}
.aops-wa-check input{width:auto;margin:0;min-height:0}

/* ── Compact pills (turnaround + output format) ─────────────────── */
.aops-format-grid{display:flex;flex-wrap:wrap;gap:6px}
.aops-pill{position:relative;cursor:pointer;display:inline-block}
.aops-pill input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;width:100%;height:100%}
.aops-pill-label{
  display:inline-block;padding:8px 14px;font-size:13px;font-weight:600;
  border:1.5px solid #e6e8f2;border-radius:999px;background:#fafbff;color:#374151;
  transition:all .18s ease;white-space:nowrap;
}
.aops-pill:hover .aops-pill-label{border-color:#2d2d8e;color:#2d2d8e}

/* Selected. Both the :checked sibling rule AND an .is-selected class set by JS —
   a theme style can out-specify one, and then nothing looks selected at all. */
.aops-pill input:checked + .aops-pill-label,
.aops-pill.is-selected .aops-pill-label{
  background:#2d2d8e;border-color:#2d2d8e;color:#fff;
  box-shadow:0 2px 6px rgba(45,45,142,.25);
}
.aops-pill input:checked + .aops-pill-label::after,
.aops-pill.is-selected .aops-pill-label::after{content:' ✓';font-weight:800}

/* Compact turnaround: an inline row of small pills, not stacked cards. */
.aops-delivery-field.is-compact .aops-delivery-grid{display:flex;flex-wrap:wrap;gap:6px}
.aops-delivery-field.is-compact .aops-delivery-opt{width:auto}
.aops-delivery-field.is-compact .aops-delivery-label{
  display:inline-block;padding:8px 14px;font-size:13px;font-weight:600;
  border-radius:999px;background:#fafbff;border:1.5px solid #e6e8f2;white-space:nowrap;
}
.aops-delivery-field.is-compact .dopt-time{font-size:13px;font-weight:600;display:inline}
.aops-delivery-field.is-compact input:checked + .aops-delivery-label,
.aops-delivery-field.is-compact.is-selected .aops-delivery-label,
.aops-delivery-opt.is-selected .aops-delivery-label{
  background:#2d2d8e;border-color:#2d2d8e;box-shadow:0 2px 6px rgba(45,45,142,.25);
}
.aops-delivery-opt.is-selected .dopt-time{color:#fff}
.aops-delivery-opt.is-selected .dopt-note{color:rgba(255,255,255,.85)}
/* Compact pills carry the tick inline, so suppress the absolutely-positioned one. */
.aops-delivery-field.is-compact input:checked + .aops-delivery-label{padding-right:14px}
.aops-delivery-field.is-compact input:checked + .aops-delivery-label::after{
  content:' ✓';position:static;transform:none;font-size:13px;
}

/* ── Upload-first hero dropzone (multistep step 1) ──────────────── */
.aops-dropzone.is-hero{
  padding:44px 20px;border-width:2px;border-style:dashed;border-color:#c7cbe8;
  background:linear-gradient(180deg,#fafbff,#f2f4fd);
}
.aops-dropzone.is-hero .dz-icon{font-size:40px}
.aops-dropzone.is-hero .dz-text{font-size:15px;font-weight:600}

.aops-step-heading{
  margin:0 0 16px;font-size:17px;font-weight:700;color:#1a1a3a;line-height:1.3;
}
.aops-field-label .opt{font-weight:400;color:#9ca3af;text-transform:none;letter-spacing:0}

/* Never let any control push the form sideways. */
.aops-form-wrap,
.aops-form-wrap *{box-sizing:border-box}
.aops-form-wrap{width:100%;margin-left:auto;margin-right:auto;overflow-x:hidden}
.aops-form-wrap input,
.aops-form-wrap select,
.aops-form-wrap textarea{max-width:100%}

/* ── Tablet (≤1024px): comfortable spacing, keep 2-col where it fits ── */
@media(max-width:1024px){
  .aops-form-wrap{max-width:100%}
  .aops-section{padding-left:16px;padding-right:16px}
}

/* ── Small tablet / large phone (≤768px): collapse the 2-col grid ── */
@media(max-width:768px){
  .aops-row2,
  .aops-form-short .aops-row2,
  .aops-form-multistep .aops-row2{grid-template-columns:1fr;gap:0}
  .aops-services-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .aops-delivery-grid{gap:6px}
  .aops-delivery-label{white-space:normal}
}

/* ── Phone (≤640px): single column, 44px touch targets, full-width buttons ── */
@media(max-width:640px){
  .aops-form-wrap{border-radius:12px}
  .aops-form-header{padding:20px 16px}
  .aops-form-title{font-size:20px;line-height:1.25}
  .aops-form-subtitle{font-size:13px}
  .aops-section{padding:16px}
  .aops-progress{padding:12px 16px 0}

  /* 44px minimum touch target (WCAG 2.5.5). 16px font also stops iOS
     Safari zooming the viewport when a field takes focus. */
  .aops-form-wrap input,
  .aops-form-wrap select,
  .aops-form-wrap textarea,
  .aops-submit-btn,
  .aops-back-btn{min-height:44px;font-size:16px}
  .aops-form-wrap textarea{min-height:88px}

  .aops-submit-btn,
  .aops-back-btn{width:100%}
  .aops-step-nav{flex-direction:column-reverse;gap:8px}

  /* Dialling code + number: keep the code narrow so the number never overflows. */
  .aops-phone-row{display:flex;gap:6px}
  .aops-phone-row select#af-phone-code{
    width:96px !important;min-width:96px;flex:0 0 96px;
    padding-left:8px;padding-right:22px;font-size:14px;
    text-overflow:ellipsis;
  }
  .aops-phone-row input#af-phone{flex:1 1 auto;min-width:0}

  /* Services: two per row rather than a cramped auto-fill. */
  .aops-services-grid{grid-template-columns:1fr 1fr;gap:6px}
  .aops-choice-label{padding:10px 8px;font-size:13px;min-height:44px}

  /* Delivery: full-width stacked options, each a proper tap target. */
  .aops-delivery-grid{flex-direction:column}
  .aops-delivery-opt{width:100%}
  .aops-delivery-label{
    width:100%;min-height:44px;display:flex;flex-direction:column;
    justify-content:center;white-space:normal;text-align:left;padding:10px 14px;
  }

  /* Dropzone: generous tap area on touch. */
  .aops-dropzone{padding:22px 12px;min-height:120px}
  .dz-icon{font-size:24px}
  .dz-meta{font-size:10px}

  .aops-trust-bar{flex-wrap:wrap;gap:6px}
}

/* ══════════════════════════════════════════════════════════════════
   MULTISTEP on the .aopsrf-* namespace — reuses the short form's compact
   grid/inputs/dropzone; only the step-specific chrome is defined here.
   ══════════════════════════════════════════════════════════════════ */

.aops-form-wrap.aops-form-multistep.aopsrf{max-width:560px}

/* Progress bar sits flush inside the tighter aopsrf padding. */
.aops-form-wrap.aopsrf .aops-progress{padding:0 0 12px}

/* Centered per-step titles. */
.aops-form-wrap.aopsrf .aopsrf-step-title{
  margin:2px 0 14px;font-size:18px;font-weight:800;color:#0f172a;
  text-align:center;line-height:1.3;letter-spacing:-.01em;
}

/* Equal step heights: both steps reserve the same min-height so switching between
   them doesn't make the form (and the page below it) jump. Relaxed on phones,
   where the form scrolls and a fixed height would only add dead space. */
.aops-form-wrap.aopsrf.aops-form-multistep .aops-step{
  min-height:430px;display:flex;flex-direction:column;
}
.aops-form-wrap.aopsrf.aops-form-multistep .aops-step .aopsrf-btn,
.aops-form-wrap.aopsrf.aops-form-multistep .aops-step .aopsrf-nav{margin-top:auto}
@media(max-width:640px){
  .aops-form-wrap.aopsrf.aops-form-multistep .aops-step{min-height:0;display:block}
}

/* Single-column row (used when the service is locked and Quantity is alone). */
.aops-form-wrap.aopsrf .aopsrf-form .aopsrf-row-1{grid-template-columns:1fr !important}

/* Upload-first hero dropzone — taller and more prominent than the short form's. */
.aops-form-wrap.aopsrf .aopsrf-dz-hero{min-height:118px;padding:26px 16px;border-width:2px}
.aops-form-wrap.aopsrf .aopsrf-dz-hero .aopsrf-dz-text{font-size:14px}
.aops-form-wrap.aopsrf .aopsrf-dz-hero .aopsrf-dz-text strong{color:#2563eb}

/* Step nav — Back + primary on one row (primary flexes to fill). */
.aops-form-wrap.aopsrf .aopsrf-nav{display:flex;gap:10px;align-items:center;margin-top:4px}
.aops-form-wrap.aopsrf .aopsrf-nav .aopsrf-btn{flex:1;margin:0}
.aops-form-wrap.aopsrf .aopsrf-back{
  flex:0 0 auto;padding:12px 18px;font-size:14px;font-weight:600;
  color:#475569;background:#fff;border:1px solid #e2e8f0;border-radius:8px;cursor:pointer;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.aops-form-wrap.aopsrf .aopsrf-back:hover{border-color:#2563eb;color:#2563eb;background:#f0f5ff}
@media(max-width:640px){
  .aops-form-wrap.aopsrf .aopsrf-nav{flex-direction:column-reverse}
  .aops-form-wrap.aopsrf .aopsrf-nav .aopsrf-btn,
  .aops-form-wrap.aopsrf .aopsrf-nav .aopsrf-back{width:100%}
}

/* ── Small phone (≤400px): tighten further, 360px must not clip ── */
@media(max-width:400px){
  .aops-section{padding:14px 12px}
  .aops-form-header{padding:18px 12px}
  .aops-form-title{font-size:18px}
  .aops-services-grid{grid-template-columns:1fr}
  .aops-phone-row select#af-phone-code{
    width:84px !important;min-width:84px;flex:0 0 84px;font-size:13px;
  }
  .aops-trust-item{font-size:11px}
}
/* 3.41.0 — the note under the email field (Settings → Note under the email field). */
.aops-form-wrap .aops-form .aopsrf-email-note{margin:4px 0 0;font-size:12px;line-height:1.4;color:#6b7280}