/* MM Radius captive portal v2 additions: language toggle, announcement, plans,
 * buy button, background photo and dark appearance. Loaded after the base
 * designs, so every theme gets these features without changing its layout. */
.cp-header-tools{display:inline-flex;align-items:center;gap:10px;min-width:0}
.cp-lang{border:1px solid rgba(148,163,184,.45);background:rgba(255,255,255,.85);color:var(--cp-ink,#0f172a);border-radius:999px;padding:7px 14px;font:700 .78rem/1 Inter,"Noto Sans Myanmar",system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.cp-lang:hover{border-color:var(--cp-accent,#087f6f)}
.cp-lang-my{line-height:1.75}
.cp-lang-my h1,.cp-lang-my h2{letter-spacing:0!important;line-height:1.45!important}
.cp-announce{margin:0 0 16px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--cp-accent,#087f6f) 12%,#fff);border:1px solid color-mix(in srgb,var(--cp-accent,#087f6f) 30%,#fff);color:var(--cp-ink,#0f172a);font-size:.86rem;font-weight:600;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.cp-plans{margin-top:22px}
.cp-plans h3{margin:0 0 10px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cp-muted,#64748b)}
.cp-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.cp-plan{display:flex;flex-direction:column;gap:3px;padding:12px 13px;border-radius:14px;border:1px solid rgba(148,163,184,.35);background:rgba(255,255,255,.7);min-width:0}
.cp-plan-name{font-size:.8rem;font-weight:700;color:var(--cp-muted,#64748b);overflow-wrap:anywhere}
.cp-plan-price{font-size:1.05rem;font-weight:800;color:var(--cp-accent,#087f6f);overflow-wrap:anywhere}
.cp-plan-note{font-size:.74rem;color:var(--cp-muted,#64748b);overflow-wrap:anywhere}
.cp-buy{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:13px 16px;border-radius:12px;border:1.5px solid var(--cp-accent,#087f6f);color:var(--cp-accent,#087f6f)!important;font-weight:700;text-decoration:none;min-height:48px;text-align:center}
.cp-buy:hover{background:color-mix(in srgb,var(--cp-accent,#087f6f) 8%,transparent)}

/* Background photo: readable overlay, works with every theme. */
body.cp.cp-has-bg{background-image:linear-gradient(rgba(10,20,32,.38),rgba(10,20,32,.55)),var(--cp-bg-image)!important;background-size:cover!important;background-position:center!important;background-attachment:fixed}
body.cp.cp-has-bg::before{display:none}
body.cp.cp-has-bg .cp-intro h1,body.cp.cp-has-bg .cp-intro .cp-lead,body.cp.cp-has-bg .cp-footer,body.cp.cp-has-bg .cp-benefits span{color:#fff!important;text-shadow:0 1px 12px rgba(0,0,0,.35)}
body.cp.cp-has-bg .cp-card{background:rgba(255,255,255,.94)}
@media(max-width:800px){body.cp.cp-has-bg{background-attachment:scroll}}

/* Dark appearance (explicit or following the device). */
body.cp[data-appearance=dark]{--cp-ink:#e7eef6;--cp-ink-2:#cbd5e1;--cp-muted:#a3b3c5;--cp-bg:#0b1522;--cp-line:rgba(148,163,184,.22);--cp-surface:rgba(17,30,46,.92);color-scheme:dark;background-color:#0b1522!important;color:var(--cp-ink)}
@media(prefers-color-scheme:dark){body.cp[data-appearance=auto]{--cp-ink:#e7eef6;--cp-ink-2:#cbd5e1;--cp-muted:#a3b3c5;--cp-bg:#0b1522;--cp-line:rgba(148,163,184,.22);--cp-surface:rgba(17,30,46,.92);color-scheme:dark;background-color:#0b1522!important;color:var(--cp-ink)}}
body.cp[data-appearance=dark]:not(.cp-has-bg){background-image:radial-gradient(at 12% 10%,rgba(16,185,129,.16) 0,transparent 48%),radial-gradient(at 88% 14%,rgba(2,132,199,.14) 0,transparent 52%)!important}
body.cp[data-appearance=dark] .cp-card,body.cp[data-appearance=dark].cp-has-bg .cp-card{background:rgba(17,30,46,.94)!important;border-color:rgba(148,163,184,.22)!important;box-shadow:0 30px 80px rgba(0,0,0,.35)!important;color:var(--cp-ink)}
body.cp[data-appearance=dark] .cp-brand,body.cp[data-appearance=dark] .cp-label,body.cp[data-appearance=dark] .cp-lang,body.cp[data-appearance=dark] .cp-kicker,body.cp[data-appearance=dark] .cp-benefits,body.cp[data-appearance=dark] .cp-benefits>div,body.cp[data-appearance=dark] .cp-art-tag,body.cp[data-appearance=dark] .cp-router{background:rgba(17,30,46,.82)!important;border-color:rgba(148,163,184,.25)!important;color:var(--cp-ink)!important}
body.cp[data-appearance=dark] .cp-header{background:transparent!important;border-color:rgba(148,163,184,.18)!important}
body.cp[data-appearance=dark] h1,body.cp[data-appearance=dark] h2,body.cp[data-appearance=dark] #login-title,body.cp[data-appearance=dark] .cp-card-welcome h2{color:var(--cp-ink)!important}
body.cp[data-appearance=dark] input:not([type=checkbox]){background:#0e1a29!important;border-color:rgba(148,163,184,.3)!important;color:var(--cp-ink)!important}
body.cp[data-appearance=dark] input::placeholder{color:#7b8ca0!important}
body.cp[data-appearance=dark] .cp-terms,body.cp[data-appearance=dark] .cp-terms-copy,body.cp[data-appearance=dark] .cp-muted,body.cp[data-appearance=dark] .cp-step,body.cp[data-appearance=dark] .cp-footer{color:var(--cp-muted)!important}
body.cp[data-appearance=dark] .cp-terms-copy,body.cp[data-appearance=dark] .cp-notice,body.cp[data-appearance=dark] .cp-mode-bar,body.cp[data-appearance=dark] .cp-stats div,body.cp[data-appearance=dark] .cp-plan,body.cp[data-appearance=dark] .cp-qr-tool-btn,body.cp[data-appearance=dark] .cp-qr-cta,body.cp[data-appearance=dark] .cp-chip{background:#0e1a29!important;border-color:rgba(148,163,184,.25)!important;color:var(--cp-ink)!important}
body.cp[data-appearance=dark] .cp-mode-btn{color:var(--cp-muted)!important}
body.cp[data-appearance=dark] .cp-mode-btn.is-active{background:#17293f!important;color:var(--cp-ink)!important}
body.cp[data-appearance=dark] .cp-announce{background:color-mix(in srgb,var(--cp-accent,#087f6f) 22%,#0e1a29);border-color:color-mix(in srgb,var(--cp-accent,#087f6f) 45%,#0e1a29);color:var(--cp-ink)}
body.cp[data-appearance=dark] .cp-support{border-color:rgba(148,163,184,.2)!important}
body.cp[data-appearance=dark] .cp-error{background:#3b1717!important;border-color:#7f1d1d!important;color:#fecaca!important}
@media(prefers-color-scheme:dark){
  body.cp[data-appearance=auto] .cp-card{background:rgba(17,30,46,.94)!important;border-color:rgba(148,163,184,.22)!important;color:var(--cp-ink)}
  body.cp[data-appearance=auto] .cp-brand,body.cp[data-appearance=auto] .cp-label,body.cp[data-appearance=auto] .cp-lang,body.cp[data-appearance=auto] .cp-kicker,body.cp[data-appearance=auto] .cp-benefits,body.cp[data-appearance=auto] .cp-art-tag,body.cp[data-appearance=auto] .cp-router{background:rgba(17,30,46,.82)!important;border-color:rgba(148,163,184,.25)!important;color:var(--cp-ink)!important}
  body.cp[data-appearance=auto] .cp-header{background:transparent!important}
  body.cp[data-appearance=auto] h1,body.cp[data-appearance=auto] h2{color:var(--cp-ink)!important}
  body.cp[data-appearance=auto] input:not([type=checkbox]),body.cp[data-appearance=auto] .cp-terms-copy,body.cp[data-appearance=auto] .cp-notice,body.cp[data-appearance=auto] .cp-mode-bar,body.cp[data-appearance=auto] .cp-plan,body.cp[data-appearance=auto] .cp-stats div,body.cp[data-appearance=auto] .cp-qr-cta,body.cp[data-appearance=auto] .cp-chip{background:#0e1a29!important;border-color:rgba(148,163,184,.3)!important;color:var(--cp-ink)!important}
  body.cp[data-appearance=auto] .cp-terms,body.cp[data-appearance=auto] .cp-muted,body.cp[data-appearance=auto] .cp-footer{color:var(--cp-muted)!important}
}
@media(max-width:480px){.cp-header-tools .cp-label{display:none}.cp-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
body.cp[data-appearance=dark] .cp-intro h1{background:linear-gradient(135deg,#f1f5f9 20%,#6ee7b7 65%,#7dd3fc 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
@media(prefers-color-scheme:dark){body.cp[data-appearance=auto] .cp-intro h1{background:linear-gradient(135deg,#f1f5f9 20%,#6ee7b7 65%,#7dd3fc 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}}
body.cp.cp-has-bg .cp-intro h1{background:none!important;-webkit-text-fill-color:#fff!important}
.cp-lang-my .cp-step,.cp-lang-my .cp-chip,.cp-lang-my .cp-kicker b,.cp-lang-my .cp-label{letter-spacing:0!important;text-transform:none!important}

/* Connect button reason and QR guidance (captive sign-in windows). */
.cp-connect-hint{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:.8rem;line-height:1.55}
.cp-qr-guide{margin:12px 0;padding:14px 16px;border-radius:12px;background:#f0fdf4;border:1px solid #bbf7d0;color:#14532d;font-size:.86rem;line-height:1.6}
.cp-qr-guide p{margin:0}.cp-qr-guide p+p{margin-top:8px}
body[data-appearance="dark"] .cp-connect-hint{background:#3b1d0b;border-color:#7c2d12;color:#fed7aa}
body[data-appearance="dark"] .cp-qr-guide{background:#052e1a;border-color:#14532d;color:#bbf7d0}
/* Login form shape (Router Manager > Sign-in form). Rounded keeps each design's own radii. */
body[data-corners=square] .cp-card{border-radius:4px!important}
body[data-corners=square] input:not([type=checkbox]),body[data-corners=square] .cp-button,body[data-corners=square] .cp-qr-cta,body[data-corners=square] .cp-secondary,body[data-corners=square] .cp-notice,body[data-corners=square] .cp-stats div,body[data-corners=square] .cp-plan{border-radius:3px!important}
body[data-corners=pill] .cp-card{border-radius:30px!important}
body[data-corners=pill] input:not([type=checkbox]),body[data-corners=pill] .cp-button,body[data-corners=pill] .cp-qr-cta,body[data-corners=pill] .cp-secondary{border-radius:999px!important}
body[data-corners=pill] input:not([type=checkbox]){padding-left:20px!important}
/* Brand icon replaces the monogram when the operator uploads one. */
.cp-mark.cp-mark-icon{background:#fff center/cover no-repeat!important;color:transparent!important;box-shadow:0 0 0 1px rgba(15,23,42,.08)}