/* Emirae.Pro Join-Provider page - jp-* additions (password toggle, review, context, status).
   Shared sr-* kit from design-system/forms.css. Loads only on /join/. */
body.emirae-join-provider-page { background:#f6f5f1; }
@keyframes srFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes srPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.jp-textarea { min-height: 110px; }
.jp-pass { position: relative; }
.jp-pass .sr-input { padding-right: 46px; }
.jp-pass__toggle { position: absolute; top: 0; right: 0; height: 100%; width: 44px; display: grid; place-items: center; background: none; border: none; cursor: pointer; color: var(--text-muted); border-radius: 0 var(--radius-md) var(--radius-md) 0; transition: color var(--dur) var(--ease); }
.jp-pass__toggle:hover { color: var(--text-secondary); }
.jp-pass__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.jp-pass__toggle svg { width: 19px; height: 19px; }
.jp-pass__toggle .jp-eye-off { display: none; }
.jp-pass__toggle.is-on .jp-eye { display: none; }
.jp-pass__toggle.is-on .jp-eye-off { display: block; }
.jp-review { border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 34%, #fff), #fff 60%); }
.jp-review__group { padding: 16px 18px; }
.jp-review__group + .jp-review__group { border-top: 1px solid var(--border); }
.jp-review__gh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.jp-review__gh > span { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.jp-edit { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent); background: none; border: none; cursor: pointer; padding: 4px 6px; margin: -4px -6px; border-radius: var(--radius-sm); font-family: inherit; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.jp-edit:hover { color: var(--accent-hover); background: var(--accent-soft); }
.jp-review__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: var(--fs-sm); }
.jp-review__k { color: var(--text-muted); font-weight: var(--fw-medium); flex: none; }
.jp-review__v { color: var(--text-strong); font-weight: var(--fw-bold); text-align: right; min-width: 0; word-break: break-word; }
.jp-review__v.is-empty { color: var(--text-muted); font-weight: var(--fw-medium); font-style: italic; }
.jp-ctx-card .sr-scard__h { margin-bottom: 12px; }
.jp-ctx__t { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); }
.jp-ctx__s { margin: 6px 0 0; font-size: var(--fs-xs); line-height: 1.6; color: var(--text-secondary); }
.jp-trust { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--border); font-size: var(--fs-xs); line-height: 1.5; font-weight: var(--fw-medium); color: var(--text-secondary); }
.jp-trust svg { width: 15px; height: 15px; flex: none; color: var(--accent); margin-top: 1px; }
.jp-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; margin-left: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: rgba(255,255,255,.9); }
.jp-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning-500, #f5a623); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning-500, #f5a623) 26%, transparent); }
@media (max-width: 520px) {
.jp-status { margin-left: 0; }
}

/* Flash banner (server redirect messages). */
.jp-flash { margin-bottom:20px; padding:14px 16px; border-radius:var(--radius-lg); font-size:var(--fs-sm); font-weight:var(--fw-medium); line-height:1.5; }
.jp-flash--success { background:var(--success-50); color:var(--success-700); border:1px solid color-mix(in srgb, var(--success-500) 30%, transparent); }
.jp-flash--error { background:var(--error-50); color:var(--error-700); border:1px solid color-mix(in srgb, var(--error-500) 30%, transparent); }

/* Tickable-tile grid. Two users: the emirates-served list (emirate_mode=specific)
   and the services list on the same step. `jp-pick*` is the shared name; the
   emirates keep their original `jp-emirate*` classes, so their markup is untouched. */
.jp-emirates, .jp-picks { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:560px){ .jp-emirates, .jp-picks { grid-template-columns:1fr; } }
.jp-emirate, .jp-pick { position:relative; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1.5px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface); cursor:pointer; font-size:var(--fs-sm); color:var(--text-strong); transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
/* Service names wrap where emirate names never did, so a service tile is pinned to
   a 44px tap target and its text gets a wrapping line-height. */
.jp-pick { min-height:44px; line-height:1.35; }
.jp-emirate:hover, .jp-pick:hover { border-color:var(--text-muted); }
.jp-emirate input, .jp-pick input { position:absolute; opacity:0; width:1px; height:1px; }
.jp-emirate__box, .jp-pick__box { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border:1.5px solid var(--border-strong); border-radius:6px; flex:none; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.jp-emirate__box svg, .jp-pick__box svg { width:14px; height:14px; opacity:0; stroke-width:3; color:#fff; }
.jp-emirate input:checked ~ .jp-emirate__box, .jp-pick input:checked ~ .jp-pick__box { background:var(--accent); border-color:var(--accent); }
.jp-emirate input:checked ~ .jp-emirate__box svg, .jp-pick input:checked ~ .jp-pick__box svg { opacity:1; }
.jp-emirate input:checked ~ span, .jp-pick input:checked ~ span { color:var(--text-strong); }
.jp-emirate:has(input:checked), .jp-pick:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.jp-emirate input:focus-visible ~ .jp-emirate__box, .jp-pick input:focus-visible ~ .jp-pick__box { outline:2px solid var(--focus-ring); outline-offset:2px; }
.jp-emirates-field.has-error .sr-error { display:flex; }