/* Maajee.pk — live additions on top of the new design's maajee.css (4 Nov 2026), for /home2 and /signup2 only.
   maajee.css itself stays a copy of new/assets/maajee.css. */

/* ---------- real dropdowns, styled like the design's .select rows ---------- */
select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted-green) 50%), linear-gradient(135deg, var(--muted-green) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--charcoal);
  cursor: pointer;
}
.row-inline select.input { text-align: left; }
/* the shared city / profession picker (search box, list, "Others" box) */
.pick-wrap { width: 100%; }
.pick-wrap .pick-q,
.pick-wrap .pick-other {
  width: 100%;
  min-height: var(--tap);
  padding: 11px 14px;
  border: 1.5px solid var(--field-border);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 15px;
}
.pick-wrap .pick-q:focus, .pick-wrap .pick-other:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(15, 107, 80, .10); }

/* country code picker in the phone row */
select.phone__cc--select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--emerald);
  padding: 0 26px 0 10px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--emerald) 50%), linear-gradient(135deg, var(--emerald) 50%, transparent 50%);
  background-position: calc(100% - 13px) 50%, calc(100% - 9px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

/* ---------- sign-up: messages ---------- */
.s2-alert,
.s2-err {
  background: #FDECEA;
  border: 1.5px solid #E5A29B;
  color: #9B2C22;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
.s2-err[hidden], .s2-alert[hidden] { display: none; }
/* the message sits right under the box it is about */
.s2-ferr { margin: 6px 0 0; display: flex; gap: 6px; align-items: flex-start; color: #B3261E; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.s2-ferr::before { content: "!"; flex: none; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; background: #C0392B; color: #fff; font-size: 12px; font-weight: 800; line-height: 17px; text-align: center; }
.s2-ferr a { color: var(--emerald); font-weight: 700; text-decoration: underline; }
.check + .s2-ferr { margin: -4px 0 4px; }
.is-invalid,
.input.is-invalid, .textarea.is-invalid { border-color: #C0392B !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, .10); }
.chips.is-invalid { outline: 2px solid #E5A29B; outline-offset: 4px; border-radius: 10px; }
input[type="checkbox"].is-invalid { outline: 2px solid #C0392B; outline-offset: 2px; }
.s2-linkbtn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; min-height: 32px; }
.s2-linkbtn[hidden] { display: none; }
.s2 .actions__note a { color: var(--emerald); font-weight: 600; }

/* ---------- home2: real profile cards ---------- */
.profile__photo--clear img { filter: none; transform: none; }
.profile__photo--none { display: grid; place-items: center; background: linear-gradient(160deg, var(--emerald-light), #F3EEDD); }
.profile__nophoto { color: var(--muted-green); opacity: .55; display: grid; place-items: center; }
.badge--abroad { background: rgba(255, 255, 255, .92); color: var(--emerald-dark); }
a.like-btn { text-decoration: none; }

/* ---------- /signup2/verify: send one WhatsApp message ---------- */
.btn--wa { background: #25D366; color: #fff; gap: 10px; box-shadow: 0 8px 20px rgba(37, 211, 102, .28); font-size: 16px; min-height: 54px; }
.btn--wa:hover { background: #1EBE5A; color: #fff; }
.v2-after { background: var(--emerald-light); border: 1px solid #A9CFBE; border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--emerald-dark); }
.v2-qr { display: none; }
.v2-qr__box { flex: none; }
.v2-qr__box img { display: block; width: auto; max-width: none; height: auto; border-radius: 8px; border: 1px solid var(--border); background: #fff; }   /* a squeezed QR does not scan */
.v2-msg { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--ivory); }
.v2-msg summary { cursor: pointer; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--emerald); min-height: 44px; }
.v2-msg pre { margin: 0; padding: 0 14px 14px; white-space: pre-wrap; font: inherit; font-size: 14px; line-height: 1.6; color: var(--charcoal); }
.v2-done { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; }
.v2-tick { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--emerald-light); color: var(--emerald); }
@media (min-width: 768px) {
  .v2-qr:not([hidden]) { display: flex; gap: 18px; align-items: center; border: 1px dashed var(--gold-line); border-radius: var(--radius); padding: 14px 16px; background: var(--gold-soft); }
  .v2-qr p { margin-top: 4px; }
}

/* ---------- sign-up: PIN with show / hide ---------- */
.s2-pinwrap { position: relative; display: block; }
.s2-pinwrap .input { padding-right: 48px; letter-spacing: .3em; }
.s2-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; border-radius: 8px; cursor: pointer; font-size: 18px; opacity: .55; }
.s2-eye[aria-pressed="true"] { opacity: 1; background: var(--emerald-light); }
.s2-step .page-title:focus { outline: none; }

/* searchable pickers (city / caste / profession) need the full width on phones — a row of two squashed their search box */
@media (max-width: 600px) {
  .s2 .row2:has(.pick-wrap) { grid-template-columns: 1fr; }
}

/* ---------- sign-up: 4 PIN boxes (like Login) ---------- */
.s2-pinrow { display: flex; align-items: center; gap: 10px; }
.s2-pinboxes { display: flex; gap: 10px; }
.s2-pinboxes.is-invalid { outline: 2px solid #E5A29B; outline-offset: 4px; border-radius: 10px; }
.s2-pinbox {
  width: 54px; height: 58px;
  text-align: center; font-size: 24px; font-weight: 800;
  border: 1.5px solid var(--field-border); border-radius: var(--radius-sm);
  background: var(--ivory); color: var(--charcoal); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.s2-pinbox:focus { border-color: var(--emerald); background: #fff; box-shadow: 0 0 0 3px rgba(15, 107, 80, .14); }
.s2-pinbox.filled { border-color: var(--emerald); background: var(--emerald-light); }
.s2-pinrow .s2-eye { position: static; transform: none; flex: none; }
@media (max-width: 360px) { .s2-pinbox { width: 48px; height: 54px; } .s2-pinboxes { gap: 8px; } }

/* "this number is already registered" under the WhatsApp field */
.s2-phonecheck { margin-top: 6px; background: #FFF7E6; border: 1px solid #F0C36D; color: #7A5A12; border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13.5px; line-height: 1.5; }
.s2-phonecheck a, .s2-err a { color: var(--emerald); font-weight: 700; text-decoration: underline; }

/* ---------- sign-up: Roman Urdu next to each label, sample-text button (5 Nov 2026) ---------- */
#s2Form .lbl-ur { font-weight: 500; color: #6B6B6B; font-size: .92em; }
#s2Form .page-title .lbl-ur { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; color: #3F7A5C; }
.s2-sample { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; width: 100%; margin: 0 0 8px; padding: 10px 14px; min-height: 44px; border: 1.5px dashed #3F7A5C; border-radius: 10px; background: #F1F8F4; color: #0F6B50; font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.s2-sample span { font-weight: 500; font-size: 13px; color: #4C6B5D; }
.s2-sample:hover, .s2-sample:focus-visible { background: #E3F1EA; }