/* Owner Dashboard → Personal details & identity (public/owner-profile.js), Moataz's mockup 2026-11-07.
   The owner header and sidebar come from owner-shell.css; this file styles the page content only.
   .op-tabs is also used on its own by the Login & security page (window.OwnerAccountTabs), so it carries its own tokens. */
.op-page,.op-tabs{
  /* shared owner-shell tokens (:root in owner-shell.css), with the same values as fallbacks */
  --op-deep:var(--os-header,#08243A); --op-navy:var(--os-ink,#10283D); --op-navy2:var(--os-navy,#203D4E); --op-gold:var(--os-gold,#C7A250); --op-gold1:#E0B755; --op-gold2:#B98412;
  --op-gold-grad:var(--os-gold-grad,linear-gradient(135deg,#E0B755 0%,#B98412 100%)); --op-gold-bg:#F7E8BE; --op-gold-line:#D8C07A;
  --op-bg:var(--os-bg,#F5F7F9); --op-card:var(--os-card,#FFFFFF); --op-text:#172536; --op-muted:var(--os-muted,#64748B); --op-line:var(--os-line,#E0E5EB); --op-fill:#F1F3F6;
  --op-ok:#16A34A; --op-ok-bg:#EAF8EE; --op-warn:#F3B544; --op-warn-bg:#FFF4D9; --op-pend:#D97706; --op-info:#2563EB; --op-info-bg:#EAF2FF;
  --op-bad:#DC2626; --op-bad-bg:#FDECEC; --op-shadow:0 8px 24px rgba(16,40,61,.07),0 1px 3px rgba(16,40,61,.06); --op-radius:16px;
}
.op-page{color:var(--op-text);min-width:0;padding:0 18px 110px;position:relative}
.op-page *,.op-tabs *{box-sizing:border-box}
.op-ic{width:20px;height:20px;flex:none}
.op-ic-xs{width:14px;height:14px}
.op-gold{color:var(--op-gold)}
.op-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html[lang="ar"] .op-page,html[dir="rtl"] .op-page,html[dir="rtl"] .op-tabs{font-family:Cairo,'Segoe UI',Tahoma,sans-serif}

/* ---------- banner ---------- */
.op-hero{position:relative;margin:0 -18px;min-height:212px;padding:26px 36px 64px;display:flex;align-items:flex-start;overflow:hidden;isolation:isolate;color:#fff;background:#08243A;border-start-start-radius:18px}
/* his own villa + towers + turquoise sea, composed like the mockup (villa at the far side from the text) */
.op-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/img/home/owner-profile-banner-1180.webp) left center/cover no-repeat;background-image:image-set(url(/img/home/owner-profile-banner-1180.webp) 1x,url(/img/home/owner-profile-banner.webp) 2x)}
html[dir="ltr"] .op-hero::before{transform:scaleX(-1)}
.op-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,36,58,.96) 0%,rgba(8,36,58,.86) 34%,rgba(8,36,58,.3) 64%,rgba(8,36,58,0) 86%),linear-gradient(0deg,rgba(8,36,58,.35),rgba(8,36,58,0) 45%)}
html[dir="rtl"] .op-hero::after{background:linear-gradient(270deg,rgba(8,36,58,.94) 0%,rgba(8,36,58,.8) 30%,rgba(8,36,58,.25) 56%,rgba(8,36,58,0) 74%),linear-gradient(0deg,rgba(8,36,58,.35),rgba(8,36,58,0) 45%)}
.op-hero-text{max-width:640px}
.ah-page .op-hero h1{display:flex;align-items:center;gap:12px;margin:0 0 10px;color:#fff;font-size:clamp(1.5rem,2.1vw,1.85rem);font-weight:800;line-height:1.25}
html[dir="ltr"] .op-hero h1{flex-direction:row-reverse;justify-content:flex-end}
.op-hero-ic{width:36px;height:36px;color:var(--op-gold1);stroke-width:1.7}
.ah-page .op-hero p{margin:0;color:rgba(255,255,255,.92);font-size:1.02rem;line-height:1.7;max-width:470px}
.op-hero-line{display:block;width:72px;height:3px;border-radius:3px;background:var(--op-gold-grad);margin-top:14px}

/* ---------- tabs (shared) ---------- */
.op-tabs{position:relative;z-index:3;margin:-52px 14px 15px;background:#fff;border:1px solid var(--op-line);border-radius:12px;box-shadow:var(--op-shadow);padding:4px}
.op-tabs ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.op-tabs-5 ul{grid-template-columns:repeat(5,minmax(0,1fr))}
.op-tab{display:flex;align-items:center;justify-content:center;gap:10px;min-height:40px;padding:0 12px;border-radius:9px;color:var(--op-navy);text-decoration:none;font-weight:700;font-size:1rem;white-space:nowrap;transition:background-color .15s ease}
.op-tab .op-ic{width:22px;height:22px;color:var(--op-navy2)}
.op-tab:hover{background:var(--op-fill)}
.op-tab:focus-visible{outline:2px solid var(--op-gold);outline-offset:2px}
.op-tab.is-active{background:var(--op-gold-grad);color:#fff;box-shadow:0 8px 18px -10px rgba(185,132,18,.9)}
.op-tab.is-active .op-ic{color:#fff}
.op-tabs li{position:relative}
.op-tabs li+li::before{content:"";position:absolute;inset-inline-start:-2px;top:22%;bottom:22%;width:1px;background:var(--op-line)}

/* ---------- grid ---------- */
.op-grid{display:grid;grid-template-columns:minmax(0,1fr) 334px;gap:20px;align-items:start}
.op-main,.op-aside{display:flex;flex-direction:column;gap:20px;min-width:0}
/* the mockup shows the profile and the identity documents in one white card */
.op-main{gap:0;background:var(--op-card);border:1px solid var(--op-line);border-radius:var(--op-radius);box-shadow:var(--op-shadow)}
.op-main>.op-card{border:0;box-shadow:none;background:none;border-radius:0}
.op-main>.op-identity{padding-top:4px}
.op-card{background:var(--op-card);border:1px solid var(--op-line);border-radius:var(--op-radius);box-shadow:var(--op-shadow);padding:20px;scroll-margin-top:96px}
.ah-page .op-card h2{margin:0}
.op-page h1,.op-page h2,.op-page h3,.op-tabs{font-family:var(--body,Inter,'Segoe UI',system-ui,sans-serif);letter-spacing:0}
html[dir="rtl"] .op-page h1,html[dir="rtl"] .op-page h2{font-family:Cairo,'Segoe UI',Tahoma,sans-serif}

/* section bar (soft grey strip with icon) */
.op-bar{display:flex;align-items:center;gap:10px;background:var(--op-fill);border-radius:10px;padding:10px 14px;margin:0 0 16px;font-size:1.05rem;font-weight:800;color:var(--op-navy)}
.ah-page .op-bar{font-size:1.05rem}
.op-bar .op-ic{color:var(--op-gold)}
.op-bar-row{justify-content:space-between}
.op-bar-row h2{display:flex;align-items:center;gap:10px;font-size:1.05rem;font-weight:800}

/* ---------- profile head ---------- */
.op-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:4px 4px 20px}
.op-avatar{position:relative;flex:none;width:104px;height:104px}
.op-avatar>.ag-avatar,.op-av-img{width:104px!important;height:104px!important;border-radius:50%;overflow:hidden;display:grid;place-items:center;border:3px solid #fff;box-shadow:0 0 0 2px var(--op-gold-line),0 8px 18px rgba(16,40,61,.15)}
.op-av-img img{width:100%;height:100%;object-fit:cover;display:block}
.op-av-ini{background:var(--op-navy);color:var(--op-gold1);font-size:2rem;font-weight:800}
.op-av-cam{position:absolute;bottom:2px;inset-inline-end:2px;width:36px;height:36px;border-radius:50%;border:2px solid #fff;background:var(--op-navy);color:#fff;display:grid;place-items:center;cursor:pointer}
.op-av-cam .op-ic{width:18px;height:18px}
.op-av-cam:focus-visible{outline:2px solid var(--op-gold);outline-offset:2px}
.op-who{flex:1;min-width:180px}
.ah-page .op-who h2{font-size:1.55rem;font-weight:800;color:var(--op-navy);margin:0 0 6px}
.op-who p{margin:8px 0 0;color:var(--op-muted)}
.op-head-btns{display:flex;gap:12px;flex-wrap:wrap;margin-inline-start:auto}

/* ---------- buttons ---------- */
.op-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:10px;font:inherit;font-weight:700;font-size:.97rem;cursor:pointer;border:1px solid var(--op-line);background:#fff;color:var(--op-navy);text-decoration:none;transition:background-color .15s ease,filter .15s ease,border-color .15s ease}
.op-btn:hover{background:var(--op-fill)}
.op-btn:focus-visible{outline:2px solid var(--op-gold);outline-offset:2px}
.op-btn:disabled{opacity:.55;cursor:not-allowed}
.op-btn-sm{min-height:40px;padding:0 14px;font-size:.9rem}
.op-btn-line{border-color:#CBD3DC}
.op-btn-goldline{border-color:var(--op-gold-line);background:var(--op-gold-bg);color:#7A5710}
.op-btn-goldline:hover{background:#F3DFA8}
.op-btn-goldline .op-ic{color:var(--op-gold2)}
.op-btn-gold{border:0;background:var(--op-gold-grad);color:#fff;box-shadow:0 8px 18px -10px rgba(185,132,18,.9)}
.op-btn-gold:hover{background:var(--op-gold-grad);filter:brightness(1.05)}
.op-danger{color:var(--op-bad)!important}
.op-link{border:0;background:none;padding:2px 0;color:var(--op-info);font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---------- fields ---------- */
.op-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px;padding:0 4px}
.op-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.op-field>label,.op-lbl{font-weight:700;font-size:.93rem;color:var(--op-navy)}
.op-field>label small{font-weight:500;color:var(--op-muted)}
.op-req{color:var(--op-bad);font-style:normal}
.op-lbl-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.op-field input:not([type=checkbox]):not([type=radio]):not(.op-file),.op-field select,.op-static,.op-field .ag-cal-btn{width:100%;min-height:48px;border:1px solid #D5DCE4;border-radius:10px;background:#fff;padding:0 14px;font:inherit;font-size:1rem;color:var(--op-text)}
.op-field input:focus,.op-field select:focus{outline:none;border-color:var(--op-gold);box-shadow:0 0 0 3px rgba(199,162,80,.22)}
.op-field.has-err input,.op-field.has-err select,.op-field.has-err .ag-cal-btn{border-color:var(--op-bad);box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.op-ferr{color:var(--op-bad);font-size:.82rem;min-height:0}
.op-ferr:empty{display:none}
.op-select{position:relative}
/* Nationality: the flag sits in a fixed 24px box and the menu text always starts after it. A native menu ignores
   padding on some systems (macOS, iOS) and wrote "Egypt" under the flag, so the menus on this page draw their own arrow. */
.op-select select{padding-inline-end:40px;-webkit-appearance:none;appearance:none;text-overflow:ellipsis;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310283D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px 16px}
html[dir="rtl"] .op-select select{background-position:left 14px center}
.op-flagsel select{padding-inline-start:50px}
.op-flag,.op-flag-box{display:inline-flex;align-items:center;justify-content:center;width:24px;height:16px;line-height:1;font-size:1.05rem;overflow:hidden}
.op-flag{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);pointer-events:none}
.op-flag-img{display:block;width:24px;height:16px}
.op-static{display:flex;align-items:center;gap:10px;color:var(--op-text);text-align:start}
.op-static .op-ic{color:var(--op-muted)}
.op-email bdi{flex:1;min-width:0}
.op-m-only{display:none!important}
.op-static bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.op-static{cursor:pointer}
button.op-static:hover{border-color:var(--op-gold-line)}
.op-phone .op-cc{display:inline-flex;align-items:center;gap:6px;padding-inline-start:10px;border-inline-start:1px solid var(--op-line);font-weight:600}
.op-phone .op-num{flex:1;font-size:1.02rem;letter-spacing:.02em}
.op-phone .op-ph{flex:1;color:var(--op-muted)}
.op-wa{width:22px;height:22px}
.op-in-acts{display:inline-flex;gap:10px;margin-inline-start:auto;flex:none}
.op-static>bdi{flex:1;min-width:0}
.op-in-link{flex:none;font-size:.8rem}
.op-link{font-size:.8rem}
.op-note{display:flex;gap:10px;align-items:flex-start;background:var(--op-info-bg);color:#1E3A8A;border-radius:10px;padding:10px 14px;margin:14px 4px 0;font-size:.92rem;line-height:1.6}
.op-note .op-ic{margin-top:2px}
.op-note-ok{background:var(--op-ok-bg);color:#166534}
.op-note-warn{background:var(--op-warn-bg);color:#92400E}
.op-note-bad{background:var(--op-bad-bg);color:#991B1B}

/* chips */
.op-chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font-size:.78rem;font-weight:700;white-space:nowrap}
.op-chip-ok{background:var(--op-ok-bg);color:#15803D}
.op-chip-ok .op-ic{background:var(--op-ok);color:#fff;border-radius:50%;padding:2px}
.op-chip-warn{background:var(--op-warn-bg);color:#B45309}
.op-chip-info{background:var(--op-info-bg);color:var(--op-info)}
.op-chip-bad{background:var(--op-bad-bg);color:var(--op-bad)}
.op-chip-muted{background:var(--op-fill);color:var(--op-muted)}

/* ---------- identity ---------- */
.op-intro{margin:0 4px 12px;color:var(--op-muted);font-size:.93rem;line-height:1.7}
.op-seg{display:inline-flex;gap:4px;border:1px solid var(--op-line);background:var(--op-fill);border-radius:12px;padding:4px;margin:2px 4px 14px}
.op-seg label{position:relative;cursor:pointer}
.op-seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.op-seg span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:9px;font-weight:700;font-size:.92rem;color:var(--op-navy)}
.op-seg input:checked+span{background:#fff;box-shadow:0 1px 4px rgba(16,40,61,.12);color:#7A5710}
.op-seg input:focus-visible+span{outline:2px solid var(--op-gold)}
.op-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0 4px}
.op-docs:empty{display:none}
.op-doc{border:1px solid var(--op-line);border-radius:14px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:12px;min-width:0}
.op-doc.is-busy{opacity:.75}
.op-doc{position:relative}
.op-doc-top{display:flex;gap:14px;align-items:center;padding-top:18px}
.op-doc-chip{position:absolute;top:10px;inset-inline-end:12px}
.op-doc-prev{width:112px;height:76px;border-radius:8px;flex:none;background:var(--op-fill);border:1px dashed #CBD3DC;display:grid;place-items:center;overflow:hidden}
.op-doc.has-file .op-doc-prev{border:1px solid var(--op-line);box-shadow:0 2px 6px rgba(16,40,61,.12)}
.op-doc-prev img{width:100%;height:100%;object-fit:cover;display:block}
.op-doc-ph{width:34px;height:34px;color:#9AA6B2}
.op-doc-pdf{display:flex;flex-direction:column;align-items:center;color:var(--op-bad);font-size:.78rem}
.op-doc-txt{min-width:0;flex:1}
.op-doc-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:space-between}
.op-doc-title b{font-size:.98rem;color:var(--op-navy)}
.op-doc-txt small{color:var(--op-muted);font-size:.84rem}
.op-doc-meta{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:.78rem;font-weight:600;color:#15803D}
.op-doc-lock{color:#B45309}
.op-doc.has-file{border-color:#CFE9D7}
.op-doc-txt{display:flex;flex-direction:column}
.op-doc-btns{display:flex;gap:10px;flex-wrap:wrap}
.op-doc-btns label{position:relative;overflow:hidden}
.op-file{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;font-size:0}
.op-doc-btns label:focus-within{outline:2px solid var(--op-gold);outline-offset:2px}
.op-doc-progress{height:6px;border-radius:6px;background:var(--op-fill);overflow:hidden}
.op-doc-progress span{display:block;height:100%;width:0;background:var(--op-gold-grad);transition:width .2s}
.op-id-fields{margin-top:18px}
.op-formats{flex-direction:row;align-items:center;gap:8px;color:var(--op-muted);font-size:.85rem;align-self:end;min-height:48px}
.op-ddate .dd-wrap,.op-ddate>div{display:flex;gap:8px}
.op-ddate select{min-height:48px;border:1px solid #D5DCE4;border-radius:10px;padding:0 10px;font:inherit;background:#fff;flex:1;min-width:0}
.op-check{display:flex;gap:10px;align-items:flex-start;margin:16px 4px 0;font-size:.93rem;line-height:1.6;cursor:pointer}
.op-check input{width:20px;height:20px;margin-top:3px;accent-color:var(--op-gold2);flex:none}
.op-id-send{display:flex;justify-content:flex-end;margin:12px 4px 0}
.op-err{color:var(--op-bad);font-weight:600;font-size:.9rem;margin:8px 4px 0}
.op-err:empty{display:none}
.op-id-read{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 4px 0}
.op-id-read div{background:var(--op-fill);border-radius:10px;padding:10px 12px}
.op-id-read dt{color:var(--op-muted);font-size:.82rem}
.op-id-read dd{margin:2px 0 0;font-weight:700}
.op-privacy{display:flex;gap:12px;align-items:flex-start;background:#FFF8E6;border:1px solid var(--op-gold-line);border-radius:12px;padding:12px 16px;margin:18px 4px 0}
.op-privacy .op-ic{width:26px;height:26px;color:var(--op-gold2)}
.op-privacy b{display:block;color:var(--op-navy)}
.op-privacy p{margin:2px 0 0;color:var(--op-muted);font-size:.88rem;line-height:1.6}

/* next required step (identity) */
.op-next{display:flex;align-items:center;gap:12px;margin:0 4px 12px;padding:10px 14px;border-radius:12px;border:1px solid var(--op-gold-line);background:#FFF8E6}
.op-next>.op-ic{width:24px;height:24px;color:var(--op-gold2)}
html[dir="rtl"] .op-next-todo>.op-ic{transform:scaleX(-1)}
.op-next-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.45}
.op-next-txt b{font-size:.78rem;letter-spacing:.02em;color:#8A6412;text-transform:uppercase}
.op-next-txt span{font-weight:700;color:var(--op-navy)}
.op-next-txt small{color:var(--op-muted);font-size:.82rem;line-height:1.5}
.op-next-ok{background:var(--op-ok-bg);border-color:#BFE5CB}.op-next-ok>.op-ic{color:var(--op-ok)}.op-next-ok b{color:#15803D}
.op-next-wait{background:var(--op-warn-bg);border-color:#F6D58E}.op-next-wait>.op-ic{color:var(--op-pend)}
.op-next .op-btn{flex:none}

/* ---------- verification summary ---------- */
.op-level{display:flex;align-items:center;gap:18px;padding:4px 10px 16px}
.op-ring{--p:0;width:88px;height:88px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(#C99A2E calc(var(--p)*1%),#E7EBF0 0);position:relative}
.op-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff}
.op-ring span{position:relative;font-size:1.45rem;font-weight:800;color:var(--op-navy)}
.op-level b{display:block;font-size:1.1rem;color:var(--op-navy)}
.op-level small{color:var(--op-muted);font-size:.9rem}
.op-srows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.op-srow{width:100%;display:flex;align-items:center;gap:12px;border:0;border-radius:12px;padding:10px 14px;background:var(--op-fill);font:inherit;text-align:start;cursor:pointer;color:var(--op-text)}
.op-srow:hover{filter:brightness(.98)}
.op-srow:focus-visible{outline:2px solid var(--op-gold);outline-offset:2px}
.op-srow-ok{background:var(--op-ok-bg)}
.op-srow-warn,.op-srow-info{background:#FFF8E6}
.op-srow-bad{background:var(--op-bad-bg)}
.op-srow-st{flex:none;display:grid;place-items:center;width:28px}
.op-srow-txt{flex:1;display:flex;flex-direction:column}
.op-srow-txt b{font-size:.98rem;color:var(--op-navy)}
.op-srow-txt small{font-size:.85rem;font-weight:700}
.op-srow-ok small{color:var(--op-ok)}
.op-srow-warn small,.op-srow-info small{color:var(--op-pend)}
.op-srow-bad small{color:var(--op-bad)}
.op-srow-no small{color:var(--op-muted)}
.op-srow-ic{width:24px;height:24px;color:var(--op-navy2)}
.op-dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.op-dot-ok{background:var(--op-ok);color:#fff}
.op-dot-ok .op-ic{stroke-width:3}
.op-dot-pend{border:3px dotted var(--op-warn)}
.op-dot-no{background:#CBD3DC;color:#fff}
.op-dot-clock{width:28px;height:28px;color:var(--op-navy)}

/* ---------- companions ---------- */
.op-comp-text{margin:0 6px 14px;color:var(--op-muted);font-size:.92rem;line-height:1.7;text-align:center}
.op-comp-add{display:flex;justify-content:center;margin-bottom:16px}
.op-comp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.op-comp{display:flex;align-items:center;gap:12px;border:1px solid var(--op-line);border-radius:12px;padding:10px 12px}
.op-cav{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--op-gold-bg);color:#7A5710;font-weight:800;flex:none}
.op-comp-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.op-comp-txt b{color:var(--op-navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-comp-txt small{color:var(--op-muted)}
.op-menu-wrap{position:relative}
.op-kebab{width:40px;height:40px;border-radius:10px;border:0;background:transparent;color:var(--op-navy);display:grid;place-items:center;cursor:pointer}
.op-kebab:hover{background:var(--op-fill)}
.op-kebab:focus-visible{outline:2px solid var(--op-gold)}
.op-menu{position:absolute;top:100%;inset-inline-end:0;z-index:20;background:#fff;border:1px solid var(--op-line);border-radius:12px;box-shadow:var(--op-shadow);padding:6px;min-width:150px}
.op-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;border:0;background:none;padding:0 12px;border-radius:8px;font:inherit;font-weight:600;color:var(--op-navy);cursor:pointer;text-align:start}
.op-menu button:hover,.op-menu button:focus-visible{background:var(--op-fill);outline:none}
.op-empty{margin:0;text-align:center;color:var(--op-muted);font-size:.92rem;padding:8px 0}

/* ---------- functional section tabs (desktop + mobile) ----------
   A tab shows its content, not a scroll destination. Keep the coastal hero,
   gold tabs, white cards and verification state unchanged. The shared login
   security tab lives outside .op-page and is not affected by these rules. */
.op-page[data-mtab="personal"] .op-identity,
.op-page[data-mtab="personal"] .op-comps,
.op-page[data-mtab="personal"] .op-contact,
.op-page[data-mtab="personal"] .op-bar-contact,
.op-page[data-mtab="personal"] .op-contact-note{display:none!important}

.op-page[data-mtab="contact"] .op-head,
.op-page[data-mtab="contact"] #opPersonalH,
.op-page[data-mtab="contact"] .op-fields>.op-field:not(.op-contact),
.op-page[data-mtab="contact"] .op-identity,
.op-page[data-mtab="contact"] .op-comps{display:none!important}
.op-page[data-mtab="contact"] .op-bar-contact{display:flex!important}

.op-page[data-mtab="identity"] .op-profile,
.op-page[data-mtab="identity"] .op-comps{display:none!important}

.op-page[data-mtab="companions"] .op-main,
.op-page[data-mtab="companions"] .op-status,
.op-page[data-mtab="companions"] .op-actions{display:none!important}
.op-page[data-mtab="companions"] .op-grid{grid-template-columns:minmax(0,1fr)}
.op-page[data-mtab="companions"] .op-aside{display:block;grid-column:1/-1;min-width:0}

/* End the personal form cleanly when contact moves to its own tab. */
.op-page[data-mtab="personal"] .op-fields{align-items:start}

/* ---------- bottom actions ---------- */
.op-actions{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap;margin:22px -18px 0;padding:8px 22px;padding-inline-end:96px;background:rgba(255,255,255,.96);border-top:1px solid var(--op-line);box-shadow:0 -6px 18px rgba(16,40,61,.06);backdrop-filter:blur(6px)}
.op-actions .op-btn{min-height:42px;min-width:187px}
.op-actions .op-btn-gold{min-width:287px}
.op-actions .op-err{margin:0;margin-inline-end:auto}

/* ---------- tablets and phones ---------- */
@media (max-width:1200px){
  .op-grid{grid-template-columns:minmax(0,1fr) 300px}
  .op-tab{font-size:.92rem;gap:8px;padding:0 8px}
}
@media (max-width:1024px){
  .op-page{padding:0 16px 110px}
  .op-hero{margin:12px -16px 0}
  .op-grid{grid-template-columns:1fr}
  .op-aside{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .op-tabs{margin:-50px 0 18px;overflow-x:auto;scrollbar-width:none}
  .op-tabs ul{grid-template-columns:repeat(4,minmax(150px,1fr))}
  .op-tabs-5 ul{grid-template-columns:repeat(5,minmax(150px,1fr))}
  .op-actions{margin:20px -16px 0}
}
@media (max-width:860px){
  body:not(.bn-hidden) .op-actions{bottom:calc(64px + env(safe-area-inset-bottom))}
}
@media (max-width:720px){
  .op-hero{min-height:200px;padding:22px 18px 70px;border-radius:0}
  .op-hero::before{background-position:62% center}
  .op-hero::after,html[dir="rtl"] .op-hero::after{background:linear-gradient(180deg,rgba(8,36,58,.82) 0%,rgba(8,36,58,.7) 55%,rgba(8,36,58,.35) 100%)}
  .ah-page .op-hero h1{font-size:1.45rem}
  .ah-page .op-hero p{font-size:.98rem}
  .op-hero-ic{width:34px;height:34px}
  /* phones: the four tabs as a 2x2 block, each tab shows only its own section (no long scroll) */
  .op-tabs{margin:-56px 0 14px;overflow:visible;scroll-margin-top:72px}
  .op-tabs ul,.op-tabs-5 ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-tabs li+li::before{display:none}
  .op-tab{min-height:46px;padding:0 10px;font-size:.92rem;white-space:normal;text-align:center;line-height:1.25}
  .op-m-only{display:flex!important}
  .op-page[data-mtab] .op-grid{gap:14px}
  .op-page[data-mtab="personal"] .op-identity,.op-page[data-mtab="personal"] .op-comps,
  .op-page[data-mtab="personal"] .op-contact,.op-page[data-mtab="personal"] .op-bar-contact,.op-page[data-mtab="personal"] .op-contact-note{display:none!important}
  .op-page[data-mtab="contact"] .op-head,.op-page[data-mtab="contact"] #opPersonalH,.op-page[data-mtab="contact"] .op-fields>.op-field:not(.op-contact),
  .op-page[data-mtab="contact"] .op-identity,.op-page[data-mtab="contact"] .op-aside{display:none!important}
  .op-page[data-mtab="identity"] .op-profile,.op-page[data-mtab="identity"] .op-aside{display:none!important}
  .op-page[data-mtab="companions"] .op-main,.op-page[data-mtab="companions"] .op-status,.op-page[data-mtab="companions"] .op-actions{display:none!important}
  /* save bar: always reachable, docked just above the bottom navigation (never under or over it); the page keeps
     room under its last field so nothing is ever hidden behind the bar */
  .op-page{padding-bottom:12px}
  .op-actions,body:not(.bn-hidden) .op-actions{position:sticky;margin:14px -16px 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));padding-inline-end:72px;flex-direction:row;flex-wrap:nowrap;align-items:center;border-radius:0}
  body:not(.bn-hidden) .op-actions{bottom:calc(64px + env(safe-area-inset-bottom));padding-bottom:10px}
  .op-actions .op-err{position:absolute;bottom:100%;inset-inline:0;margin:0;padding:6px 16px;background:var(--op-bad-bg)}
  .op-aside{grid-template-columns:1fr}
  .op-fields,.op-docs,.op-id-read{grid-template-columns:1fr}
  .op-card{padding:16px 14px}
  .op-who{min-width:0}
  .op-formats{min-height:0}
  .op-actions{gap:8px}
  .op-actions .op-btn,.op-actions .op-btn-gold{flex:1 1 0;width:auto;min-width:0;min-height:46px;padding:4px 8px;font-size:.88rem;line-height:1.2;white-space:normal;text-align:center}
  .op-actions .op-btn-gold{flex-grow:1.35}
  .op-actions .op-btn .op-ic{display:none}
  /* shorter page, same text sizes */
  .op-hero{min-height:168px;padding:18px 16px 64px}
  .ah-page .op-hero h1{margin-bottom:6px}
  .ah-page .op-hero p{line-height:1.6}
  .op-hero-line{margin-top:10px}
  /* compact profile card: photo beside the name, the two buttons on one row below */
  .op-head{flex-direction:row;flex-wrap:wrap;align-items:center;text-align:start;gap:10px 14px;padding:0 0 12px}
  .op-avatar,.op-avatar>.ag-avatar,.op-av-img{width:88px!important;height:88px!important}
  .op-av-ini{font-size:1.6rem}
  .op-av-cam{width:30px;height:30px;bottom:-2px;inset-inline-end:-2px}
  .op-av-cam .op-ic{width:16px;height:16px}
  .op-who{flex:1;min-width:0}
  .ah-page .op-who h2{font-size:1.3rem;margin-bottom:2px}
  .op-who p{margin-top:2px;font-size:.9rem}
  .op-head-btns{margin:0;width:100%;flex-direction:row;flex-wrap:nowrap;gap:8px}
  .op-head-btns .op-btn{flex:1 1 0;min-width:0;min-height:44px;padding:0 8px;font-size:.9rem;line-height:1.2;white-space:normal;text-align:center}
  .op-head-btns .op-btn .op-ic{display:none}
  .op-fields{gap:12px}
  .op-card{padding:14px 12px}
  .op-bar{margin-bottom:12px}
  /* readability on phones: secondary text never below ~13.5px, muted text a touch darker, disabled save still legible */
  .op-page{--op-muted:#556274}
  .op-doc-txt small,.op-intro,.op-comp-text,.op-privacy p,.op-srow-txt small,.op-who p{font-size:.88rem}
  .op-doc-meta{font-size:.84rem}
  .op-field>label,.op-lbl{font-size:.95rem}
  .op-actions .op-btn:disabled{opacity:1;background:#E9DDBF;color:#6B5420;box-shadow:none}
  .op-actions .op-btn{font-size:.92rem;font-weight:800}
  .op-next{margin:0 0 12px}
  .op-doc-prev{width:96px;height:66px}
}
@media (prefers-reduced-motion:reduce){.op-tab,.op-btn,.op-doc-progress span{transition:none}}

/* ---------- computers: the mockup's compact density (measured on his 1448px image) ---------- */
@media (min-width:1025px){
  .op-card{padding:14px 16px}
  .op-main>.op-profile{padding-bottom:8px}
  .op-bar,.ah-page .op-bar{padding:7px 12px;margin:0 0 10px;font-size:.98rem}
  .op-bar-row h2{font-size:.98rem}
  .op-head{padding:2px 4px 12px;gap:16px}
  .op-avatar,.op-avatar>.ag-avatar,.op-av-img{width:96px!important;height:96px!important}
  .op-av-cam{width:32px;height:32px}
  .ah-page .op-who h2{font-size:1.35rem;margin-bottom:4px}
  .op-who p{margin-top:6px;font-size:.9rem}
  .op-btn{min-height:38px;padding:0 16px;font-size:.88rem}
  .op-btn-sm{min-height:32px;padding:0 12px;font-size:.82rem}
  .op-fields{gap:8px 26px}
  .op-field{gap:4px}
  .op-field>label,.op-lbl{font-size:.84rem}
  .op-field>label small{font-size:.74rem}
  .op-field input:not([type=checkbox]):not([type=radio]):not(.op-file),.op-field select,.op-static,.op-field .ag-cal-btn,.op-ddate select{min-height:36px;font-size:.9rem;border-radius:8px}
  .op-chip{padding:2px 8px;font-size:.72rem}
  .op-intro{font-size:.84rem;margin-bottom:8px}
  .op-note{font-size:.84rem;padding:7px 12px;margin-top:8px}
  .op-seg{margin-bottom:10px}.op-seg span{min-height:32px;font-size:.84rem}
  .op-docs{gap:14px}
  .op-doc{padding:10px 12px;gap:8px;border-radius:12px}
  .op-doc-prev{width:100px;height:66px}
  .op-doc-title b{font-size:.9rem}.op-doc-txt small{font-size:.78rem}
  .op-id-fields{margin-top:10px}
  .op-formats{font-size:.78rem;min-height:36px}
  .op-check{margin-top:10px;font-size:.84rem}
  .op-id-send{margin-top:8px}
  .op-privacy{padding:8px 14px;margin-top:12px}
  .op-privacy p{font-size:.8rem}
  .op-level{padding:2px 8px 12px}
  .op-ring span{font-size:1.3rem}
  .op-srows{gap:8px}
  .op-srow{padding:8px 12px}
  .op-srow-txt b{font-size:.92rem}.op-srow-txt small{font-size:.8rem}
  .op-comp-text{font-size:.84rem;margin-bottom:10px}
  .op-comp-add{margin-bottom:12px}
  .op-comp-list{gap:8px}
  .op-comp{padding:6px 10px}
  .op-cav{width:36px;height:36px}
  .op-kebab{width:34px;height:34px}
  .op-grid{gap:18px}
  .op-aside{gap:18px}
  /* a little more air between the profile and identity sections, and around section bars */
  .op-main>.op-identity{padding-top:14px;margin-top:4px;border-top:1px solid var(--op-line)}
  .op-main>.op-profile{padding-bottom:14px}
  .op-bar,.ah-page .op-bar{margin-bottom:12px}
  .op-fields{gap:10px 26px}
  .op-next{padding:8px 12px;margin-bottom:10px}
  .op-next-txt span{font-size:.88rem}
}