/* Afra Web Studio platform - shared styles (site palette: navy / blue / sky - matches the
   main marketing site's design system, so the two feel like one brand). */
:root {
  --navy: #0a2540; --blue: #0c4a78; --sky: #0ea5e9; --cyan: #22d3ee; --sky-text: #0369a1;
  --grad: linear-gradient(135deg, var(--blue) 0%, var(--sky) 100%);
  --ink: #0f172a; --muted: #64748b; --line: #e2e8f0; --bg: #f8fafc; --card: #ffffff;
  --ok: #047857; --ok-bg: #d1fae5; --warn: #b45309; --warn-bg: #fef3c7; --bad: #b91c1c; --bad-bg: #fee2e2; --info-bg: #e0f2fe;
  --r: 16px; --shadow: 0 16px 40px rgba(12, 74, 120, .14); --shadow-sm: 0 8px 22px rgba(12, 74, 120, .10);
  --font-head: "Poppins", "Segoe UI", system-ui, -apple-system, "Noto Sans Bengali", "Nirmala UI", Roboto, Arial, sans-serif;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Noto Sans Bengali", "Nirmala UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--font); }
a { color: var(--sky-text); }
h1, h2, h3 { color: var(--navy); line-height: 1.25; margin: 0 0 .5em; text-wrap: balance; font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 800; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(560px, 100% - 32px); margin-inline: auto; }

/* header / footer */
.top { background: linear-gradient(160deg, var(--navy), var(--blue)); color: #fff; }
.top .wrap { display: flex; align-items: center; gap: 20px; padding: 14px 0; flex-wrap: wrap; }
.brand { color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; text-decoration: none; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 10px; }
.brand .logo { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: var(--grad); display: grid; place-items: center; color: #fff; font-size: 1rem; box-shadow: 0 4px 12px rgba(14, 165, 233, .4); }
.brand small { font-weight: 500; opacity: .72; margin-left: 8px; font-size: .8rem; font-family: var(--font); }
.nav { display: flex; gap: 6px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a, .nav button.link { color: #cfe6f7; text-decoration: none; padding: 7px 12px; border-radius: 8px; font: inherit; font-size: .93rem; background: none; border: 0; cursor: pointer; transition: color .15s, background .15s; }
.nav a:hover, .nav button.link:hover { background: rgba(255, 255, 255, .12); color: var(--cyan); }
.nav a.on { background: rgba(255, 255, 255, .14); color: #fff; }
.nav form { margin: 0; }
.langtoggle { display: inline-flex; gap: 2px; margin-left: 6px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.18); }
.langtoggle a { color: #9fc6e0; text-decoration: none; padding: 6px 8px; border-radius: 8px; font-size: .85rem; font-weight: 600; }
.langtoggle a.on { background: rgba(255,255,255,.14); color: #fff; }
.langtoggle a:hover { color: #fff; }
.foot { padding: 28px 0 40px; color: var(--muted); font-size: .88rem; }
main { padding: 28px 0 24px; min-height: 60vh; }

/* buttons, forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-family: var(--font-head); font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: none; background: var(--grad); color: #fff; box-shadow: 0 8px 20px rgba(14, 165, 233, .32); transition: transform .2s, box-shadow .2s, background .2s, color .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(14, 165, 233, .42); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .pill:focus-within { outline: 3px solid rgba(14, 165, 233, .45); outline-offset: 1px; }
.btn.ghost { background: transparent; color: var(--blue); border-color: var(--line); box-shadow: none; }
.btn.ghost:hover { background: var(--info-bg); transform: none; box-shadow: none; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; }
.btn.small { padding: 8px 16px; font-size: .88rem; box-shadow: 0 5px 14px rgba(14, 165, 233, .28); }
label { font-weight: 600; font-size: .95rem; display: block; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=url], input[type=number], input[type=date], input[type=password], select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; background: #fff; color: var(--ink);
}
textarea { min-height: 110px; resize: vertical; }
.field { margin-bottom: 18px; }
.field[hidden], .group[hidden] { display: none; }
.help { color: var(--muted); font-size: .86rem; margin: -2px 0 8px; }
.err { color: var(--bad); font-size: .88rem; margin-top: 5px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--bad); }
.req { color: var(--bad); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow-sm); }
.card + .card { margin-top: 18px; }
.flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-weight: 500; }
.flash.ok { background: var(--ok-bg); color: var(--ok); } .flash.error { background: var(--bad-bg); color: var(--bad); }

/* status pills */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--info-bg); color: var(--sky-text); white-space: nowrap; }
.badge.s-approved, .badge.s-provisioned, .badge.s-accepted, .badge.s-closed, .badge.s-confirmed { background: var(--ok-bg); color: var(--ok); }
.badge.s-needs_info, .badge.s-provisioning, .badge.s-pending_provision, .badge.s-in_progress, .badge.s-pending, .badge.s-provisioned_unverified { background: var(--warn-bg); color: var(--warn); }
.badge.s-rejected, .badge.s-failed, .badge.s-refunded { background: var(--bad-bg); color: var(--bad); }
.tag { display: inline-block; padding: 2px 9px; border-radius: 6px; background: #eef2f7; color: #334155; font-size: .8rem; margin: 0 4px 4px 0; }

/* tables */
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: .94rem; }
table.list th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 12px; border-bottom: 2px solid var(--line); white-space: nowrap; }
table.list td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list tr:hover td { background: #f1f7fb; }
.num { font-variant-numeric: tabular-nums; }

/* answer sheet */
dl.sheet { display: grid; grid-template-columns: minmax(150px, 34%) 1fr; gap: 0; margin: 0; }
dl.sheet dt { color: var(--muted); font-size: .9rem; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); }
dl.sheet dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) { dl.sheet { grid-template-columns: 1fr; } dl.sheet dt { border: 0; padding-bottom: 0; } }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--line); margin-left: 6px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--sky); border: 2px solid #fff; }

.grid2 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.filters input, .filters select { width: auto; min-width: 150px; }
.filters input[type=search] { flex: 1 1 260px; }
.stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; text-decoration: none; color: var(--ink); transition: transform .18s, box-shadow .18s, border-color .18s; }
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: transparent; }
.stat b { display: block; font-size: 1.3rem; color: var(--navy); font-family: var(--font-head); font-weight: 800; font-variant-numeric: tabular-nums; }
.stat span { font-size: .8rem; color: var(--muted); }
.stat.on { border-color: var(--sky); background: var(--info-bg); }
.pager { display: flex; gap: 6px; margin-top: 14px; align-items: center; }

/* ------------------------------------------------------------------ wizard */
.hero { text-align: center; padding: 8px 0 26px; }
.hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); }
.hero p { color: var(--muted); max-width: 640px; margin: 0 auto; }
.progress { display: flex; gap: 6px; margin: 0 0 22px; padding: 0 0 8px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.progress li { flex: 1 0 auto; min-width: 84px; text-align: center; font-size: .8rem; color: var(--muted); padding-top: 10px; border-top: 4px solid var(--line); white-space: nowrap; }
.progress li.done { border-color: var(--sky); color: var(--sky-text); cursor: pointer; }
.progress li.now { border-color: var(--blue); color: var(--navy); font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pick { display: block; cursor: pointer; margin: 0; font-weight: 400; }
.pick input { position: absolute; opacity: 0; }
.pick .box { display: block; height: 100%; padding: 18px; border: 2px solid var(--line); border-radius: var(--r); background: #fff; transition: transform .18s, box-shadow .18s, border-color .18s, background .18s; }
.pick .box:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--sky); }
.pick .box b { display: block; color: var(--navy); font-family: var(--font-head); font-weight: 700; margin-bottom: 4px; }
.pick .box span { color: var(--muted); font-size: .88rem; }
.pick input:checked + .box { border-color: var(--sky); background: var(--info-bg); box-shadow: var(--shadow-sm); }
.pick input:focus-visible + .box { outline: 3px solid rgba(14, 165, 233, .45); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; cursor: pointer; font-weight: 500; margin: 0; font-size: .93rem; }
.pill input { accent-color: var(--blue); width: 16px; height: 16px; margin: 0; }
.pill:has(input:checked) { border-color: var(--sky); background: var(--info-bg); }
.group { margin-bottom: 26px; }
.group > h3 { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.filelist { list-style: none; padding: 0; margin: 8px 0 0; }
.filelist li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; background: #f1f5f9; border-radius: 8px; margin-bottom: 4px; font-size: .9rem; }
.filelist button { background: none; border: 0; color: var(--bad); cursor: pointer; font: inherit; }
.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tabs button { flex: 1; padding: 10px; border: 1px solid var(--line); background: #fff; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; }
.tabs button[aria-selected=true] { background: var(--grad); color: #fff; border-color: transparent; }
.review h3 { display: flex; justify-content: space-between; align-items: baseline; }
.review .edit { font-size: .85rem; font-weight: 500; background: none; border: 0; color: var(--sky-text); cursor: pointer; text-decoration: underline; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.errbox { background: var(--bad-bg); color: var(--bad); padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; }
.notice { background: var(--ok-bg); color: var(--ok); padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; }
.big-id { font-size: 1.6rem; font-weight: 800; font-family: var(--font-head); color: var(--navy); letter-spacing: .5px; font-variant-numeric: tabular-nums; }

/* OAuth sign-in (Google/Facebook) - deliberately NOT gradient/pill like .btn: these two
   buttons carry each provider's own recognizable brand mark, so a plain, flat, bordered
   shape (matching how Google/Facebook's own design guidelines show it elsewhere on the
   web) reads correctly rather than competing with the site's own brand gradient. */
.oauth-buttons { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.oauth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 16px; border-radius: 10px; font-family: var(--font-head); font-weight: 600; font-size: .95rem; text-decoration: none; box-shadow: none; transition: background .15s, border-color .15s; }
.oauth-btn::before { content: ""; width: 19px; height: 19px; background-repeat: no-repeat; background-position: center; background-size: contain; flex: 0 0 auto; }
.oauth-google { background: #fff; color: #3c4043; border: 1px solid #dadce0; }
.oauth-google:hover { background: #f8fafc; box-shadow: none; transform: none; }
.oauth-google::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%234285F4' d='M45.1 24.5c0-1.6-.1-3.1-.4-4.6H24v9.1h11.9c-.5 2.8-2.1 5.1-4.4 6.7v5.5h7.1c4.2-3.8 6.5-9.5 6.5-16.7z'/><path fill='%2334A853' d='M24 46c5.9 0 10.9-2 14.5-5.3l-7.1-5.5c-2 1.3-4.5 2.1-7.4 2.1-5.7 0-10.5-3.8-12.2-9H4.5v5.7C8.1 41 15.4 46 24 46z'/><path fill='%23FBBC05' d='M11.8 28.3c-.4-1.3-.7-2.7-.7-4.3s.3-3 .7-4.3v-5.7H4.5C3 16.9 2 20.3 2 24s1 7.1 2.5 10.1l7.3-5.8z'/><path fill='%23EA4335' d='M24 10.7c3.2 0 6.1 1.1 8.4 3.3l6.3-6.3C34.9 4.2 29.9 2 24 2 15.4 2 8.1 7 4.5 13.9l7.3 5.7c1.7-5.2 6.5-8.9 12.2-8.9z'/></svg>"); }
.oauth-facebook { background: #1877F2; color: #fff; border: 1px solid #1877F2; }
.oauth-facebook:hover { background: #1565d8; box-shadow: none; transform: none; }
.oauth-facebook::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06C2 17.08 5.66 21.23 10.44 22v-7.03H7.9v-2.91h2.54V9.85c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.78l-.44 2.91h-2.34V22C18.34 21.23 22 17.08 22 12.06z'/></svg>"); }
.oauth-divider { display: flex; align-items: center; gap: 12px; margin: 4px 0 20px; color: var(--muted); font-size: .85rem; }
.oauth-divider::before, .oauth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }