/* OrderGuard admin styles. Enqueued by orderguard_enqueue_admin_assets(). */

/* Extracted from admin-welcome.php. */
.ogfa-lvl{flex:1; height:40px; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:12px; font-weight:600; border-radius:8px; border:1px solid #D9E2E0; background:#fff; color:#8A9794; cursor:pointer;}
.ogfa-lvl input{position:absolute; opacity:0; width:0; height:0;}
.ogfa-lvl:has(input:checked){border:2px solid #2F8A80; background:#E4F0EE; color:#2F8A80;}
.ogfa-field{height:40px; box-sizing:border-box; font-size:13px; padding:0 12px; border:1px solid #D5DCDA; border-radius:8px; background:#fff; color:#1C2B29;}
.ogfa-row{display:flex; gap:10px; align-items:stretch;}
.ogfa-levels{flex:1; display:flex; gap:8px;}
.ogfa-tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
@media (max-width:782px){
  .ogfa-row{flex-direction:column; align-items:stretch;}
  .ogfa-levels{flex-wrap:wrap;}
  .ogfa-search{min-width:0 !important; width:100%;}
}

/* Extracted from admin-welcome.php. */
.og-wrap { max-width: 720px; margin: 24px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.og-card { background: #fff; border: 1px solid #E6E9E8; border-radius: 14px; padding: 32px; margin-bottom: 20px; }
.og-logo { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: #E4F0EE; margin-bottom: 16px; }
.og-logo .dashicons { color: #2F8A80; font-size: 26px; width: 26px; height: 26px; }
.og-h1 { font-size: 24px; font-weight: 600; margin: 0 0 6px; color: #1C2B29; }
.og-sub { font-size: 15px; color: #5C6B68; margin: 0 0 24px; line-height: 1.6; }
.og-feature { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.og-feature .dashicons { color: #2F8A80; margin-top: 1px; }
.og-feature-text { font-size: 14px; color: #34423F; line-height: 1.5; }
.og-terms-box { background: #F6F8F8; border: 1px solid #E6E9E8; border-radius: 10px; padding: 16px; margin: 20px 0; }
.og-terms-label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #34423F; cursor: pointer; line-height: 1.5; }
.og-terms-label input { margin-top: 3px; }
/* Toggle switch (settings on/off). Wraps a checkbox, styled as a pill. */
.og-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.og-toggle input { opacity: 0; width: 0; height: 0; margin: 0; }
.og-toggle .og-slider { position: absolute; inset: 0; background: #CBD5D2; border-radius: 999px; transition: background .18s; cursor: pointer; }
.og-toggle .og-slider:before { content: ""; position: absolute; height: 20px; width: 20px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform .18s; }
.og-toggle input:checked + .og-slider { background: #2F8A80; }
.og-toggle input:checked + .og-slider:before { transform: translateX(18px); }
.og-toggle-row { display: flex; gap: 12px; align-items: flex-start; }
.og-sec-head { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #0e0e0e; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin: 0 0 14px; }
.og-sec-head .dashicons { font-size: 15px; width: 15px; height: 15px; }
.og-btn { background: #2F8A80; color: #fff; border: none; border-radius: 9px; padding: 12px 22px; font-size: 15px; font-weight: 500; cursor: pointer; }
.og-btn:hover { background: #276F67; }
/* 0.3.1: a link styled as a button keeps white text (wp-admin's a:hover/a:focus colours otherwise win). */
a.og-btn, a.og-btn:hover, a.og-btn:focus, a.og-btn:active, a.og-btn:visited { color: #fff; text-decoration: none; }
.og-btn:disabled { background: #A9C4C0; cursor: not-allowed; }
.og-status { display: inline-flex; align-items: center; gap: 8px; background: #EDF4E1; color: #44621F; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.og-status .dashicons { color: #44621F; }
.og-notice { padding: 12px 16px; border-radius: 9px; font-size: 14px; margin-bottom: 20px; }
.og-notice-success { background: #EDF4E1; color: #44621F; }
.og-notice-error { background: #FBEAEA; color: #8F4444; }
.og-muted { font-size: 12px; color: #8A9794; margin-top: 16px; line-height: 1.5; }
.og-link { color: #2F8A80; text-decoration: none; }
.og-link:hover { text-decoration: underline; }
.og-headcard { background: #fff; border: 1px solid #E6E9E8; border-radius: 14px; margin-bottom: 20px; }
.og-headrow { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; }
.og-headrow .og-brand { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; color: #1C2B29; }
.og-headrow .og-brand .dashicons { color: #2F8A80; font-size: 20px; width: 20px; height: 20px; }
.og-planbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.og-planbadge.pro { background: #F3EEF9; color: #6B4CA3; }
.og-planbadge.free { background: #EEF1F0; color: #5C6B68; }
.og-planbadge .dashicons { font-size: 13px; width: 13px; height: 13px; }
.og-capbar { padding: 13px 22px; background: #F6F8F8; border-top: 1px solid #EEF1F0; }
.og-capbar-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; font-size: 12px; color: #5C6B68; }
.og-capbar-track { height: 6px; background: #E1E7E5; border-radius: 999px; overflow: hidden; }
.og-capbar-fill { height: 100%; background: #5DCAA5; border-radius: 999px; transition: width .2s; }
.og-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 10px 16px; border-top: 1px solid #EEF1F0; }
/* 0.3.1: the tab bar wraps instead of running off the card, so every tab and the
   language menu stay reachable at any width (phones included). */
.og-tab { white-space: nowrap; }
@media (max-width: 600px) {
  .og-tabs { padding: 8px 10px; gap: 4px; }
  .og-tabs .og-tab { padding: 8px 10px; font-size: 13px; }
}
.og-langdd summary::-webkit-details-marker { display: none; }
.og-langdd summary::marker { content: ""; }
.og-langdd[open] summary { background: #F1F4F3; }
.og-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; font-size: 14px; font-weight: 500; color: #5C6B68; text-decoration: none; border-radius: 8px; }
.og-tab:hover { color: #2F8A80; background: #EDF4F2; }
.og-tab.is-active { color: #2F8A80; background: #E4F0EE; }
.og-tab .dashicons { font-size: 16px; width: 16px; height: 16px; }
/* Gradient risk sliders (green low -> red high). */
.og-rslider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(to right, #5DCAA5 0%, #EF9F27 55%, #E24B4A 100%); outline: none; }
.og-rslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid #2F8A80; cursor: pointer; }
.og-rslider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #2F8A80; cursor: pointer; }
/* (No locked-slider style any more: the free plugin never renders a
   non-interactive control -- WP.org guideline 5. The og-rslider class
   stays: flag-for-review uses it, and the orderguard-pro add-on reuses
   it for its COD threshold sliders. Split #38.) */
.og-slider-row { display: flex; align-items: center; gap: 12px; }
.og-slider-row .og-slider-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.og-slider-row .og-slider-icon .dashicons { font-size: 17px; width: 17px; height: 17px; }
.og-soon { display: inline-block; background: #F3EEF9; color: #6B4CA3; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.og-placeholder { text-align: center; padding: 40px 20px; color: #8A9794; }
.og-placeholder .dashicons { font-size: 34px; width: 34px; height: 34px; color: #C5D0CE; margin-bottom: 10px; }

/* Extracted from admin-welcome.php. */
/* Welcome / waitlist card (first-run screens) */
.og-welcome-card { max-width: 540px; margin: 0 auto; background: #fff; border: 1px solid #E6E9E8; border-radius: 14px; overflow: hidden; }
.og-wl-card { max-width: 420px; }
.og-welcome-head { position: relative; overflow: hidden; padding: 24px 28px; border-bottom: 1px solid #EEF1F0; }
.og-welcome-head-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.og-welcome-tile { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: #E4F0EE; }
.og-welcome-tile .dashicons { color: #2F8A80; font-size: 26px; width: 26px; height: 26px; }
.og-welcome-title { font-size: 19px; font-weight: 500; color: #1C2B29; margin: 0 0 3px; }
.og-welcome-sub { font-size: 13px; color: #8A9794; margin: 0; }
/* Falling parcels: decorative layer behind the header content.
   Each parcel drops from above the card (top:-34px) to top:100%,
   vanishing exactly at the header's bottom border. */
.og-parcels { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.og-parcel { position: absolute; top: -34px; opacity: 0; color: #A8DCC7; animation: ogparcelfall 9s linear infinite; }
.og-wl-card .og-parcels { opacity: .75; }
@keyframes ogparcelfall {
    0%   { top: -34px; opacity: 0; transform: rotate(-8deg); }
    12%  { opacity: .6; }
    82%  { opacity: .6; }
    100% { top: 100%; opacity: 0; transform: rotate(10deg); }
}
.og-welcome-body { padding: 22px 28px 24px; }
.og-flagband { display: flex; align-items: center; gap: 12px; background: #EAF6EE; border: 1px solid #CFE8DA; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.og-flagband-flag { flex-shrink: 0; display: inline-flex; }
.og-flagband-title { display: block; font-size: 13px; font-weight: 500; color: #1C2B29; }
.og-flagband-sub { display: block; font-size: 13px; color: #1D9E75; }
.og-tilegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.og-tile { background: #F4F7F6; border-radius: 10px; padding: 12px; animation: ogtilein .45s ease both; }
.og-tile:nth-child(1) { animation-delay: .05s; }
.og-tile:nth-child(2) { animation-delay: .12s; }
.og-tile:nth-child(3) { animation-delay: .19s; }
.og-tile:nth-child(4) { animation-delay: .26s; }
@keyframes ogtilein { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.og-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: #E4F0EE; margin-bottom: 8px; }
.og-tile-icon .dashicons { color: #0F6E56; font-size: 15px; width: 15px; height: 15px; }
.og-tile-title { font-size: 12.5px; font-weight: 500; color: #1C2B29; margin: 0 0 3px; }
.og-tile-desc { font-size: 11.5px; color: #5C6B68; margin: 0; line-height: 1.45; }
.og-legalrow { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; margin: 0 0 14px; }
.og-legalrow a { color: #2F8A80; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.og-legalrow a:hover { text-decoration: underline; }
.og-legalrow .dashicons { font-size: 13px; width: 13px; height: 13px; }
.og-consent { background: #F4F7F6; border-radius: 10px; padding: 13px 14px; margin-bottom: 14px; }
.og-consent-label { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: #34423F; cursor: pointer; line-height: 1.5; }
.og-consent-label input { margin-top: 2px; }
.og-activate-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: #1D9E75; color: #fff; border: none; border-radius: 10px; padding: 12px 18px; font-size: 14px; font-weight: 500; cursor: pointer; }
.og-activate-btn:hover { background: #178A65; }
.og-activate-btn:disabled { background: #A9C4C0; cursor: not-allowed; }
.og-activate-btn .dashicons { font-size: 17px; width: 17px; height: 17px; }
.og-welcome-foot { text-align: center; font-size: 11.5px; color: #8A9794; line-height: 1.5; margin: 12px 0 0; }
/* Waitlist (unsupported country) */
.og-wl-band { display: flex; align-items: flex-start; gap: 12px; background: #FDF3EC; border: 1px solid #F3D9C6; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.og-wl-band .og-flagband-flag { margin-top: 1px; }
.og-wl-title { display: block; font-size: 12.5px; font-weight: 500; color: #1C2B29; margin-bottom: 3px; }
.og-wl-desc { display: block; font-size: 12px; color: #5C6B68; line-height: 1.5; }
.og-wl-form { display: flex; gap: 8px; }
.og-wl-input { flex: 1; min-width: 0; border: 1px solid #DCE3E1; border-radius: 10px; padding: 9px 12px; font-size: 13px; color: #1C2B29; }
.og-wl-input:focus { border-color: #1D9E75; box-shadow: 0 0 0 1px #1D9E75; outline: none; }
.og-wl-btn { width: auto; flex-shrink: 0; padding: 9px 15px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
    .og-parcel { animation: none; opacity: 0; }
    .og-tile { animation: none; }
}

/* Extracted from admin-welcome.php. */
.og-cap-label { white-space: nowrap; }
.og-cap-flow { position: relative; flex: 1; height: 20px; margin: 0 14px; overflow: hidden; }
.og-cap-flow .og-cap-box { position: absolute; left: -18px; opacity: 0; display: inline-flex; animation: ogcapdrift 6.4s linear infinite; }
@keyframes ogcapdrift { 0% { left: -18px; opacity: 0; } 12% { opacity: .9; } 88% { opacity: .9; } 100% { left: 100%; opacity: 0; } }
.og-cap-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .og-cap-flow .og-cap-box { animation: none; opacity: 0; } }

/* Extracted from admin-welcome.php. */
@keyframes ogImpPulse { 0%,100% { opacity:.4; transform:scale(.8); } 50% { opacity:1; transform:scale(1.15); } }
@keyframes ogImpCount { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.og-imp-net circle.n { transform-box:fill-box; transform-origin:center; animation: ogImpPulse 3s ease-in-out infinite; }
#og-import-fill { transition: width .6s ease; }
@media (prefers-reduced-motion: reduce) { .og-imp-net circle.n { animation: none; } }

/* Extracted from admin-welcome.php. */
@keyframes ogdaBadge { 0%,42% { opacity:0; transform:translateY(-5px); } 52%,90% { opacity:1; transform:none; } 100% { opacity:0; } }
@keyframes ogdaOne { 0%,38% { opacity:1; } 44%,100% { opacity:0; } }
@keyframes ogdaTwo { 0%,38% { opacity:0; } 44%,94% { opacity:1; } 100% { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .ogda-anim { animation:none !important; } }

/* Extracted from admin-welcome.php. */
@keyframes ogfPulse { 0%,100% { opacity:.3; } 50% { opacity:1; } }
@keyframes ogfRing { 0% { transform:scale(.6); opacity:.5; } 100% { transform:scale(2.1); opacity:0; } }
@keyframes ogfRise { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.ogf-card { border:1px solid #E6E9E8; border-radius:14px; overflow:hidden; background:#fff; margin-bottom:18px; }
.ogf-head { display:flex; align-items:center; gap:12px; padding:15px 18px; background:#F3FAF7; border-bottom:1px solid #E2EFEA; }
.ogf-tile { width:38px; height:38px; border-radius:10px; background:#0F6E56; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.ogf-tile .dashicons { font-size:19px; width:19px; height:19px; }
.ogf-dot { width:8px; height:8px; border-radius:50%; background:#1D9E75; position:relative; display:inline-block; }
.ogf-dot.on::after { content:''; position:absolute; inset:0; border-radius:50%; background:#1D9E75; animation:ogfRing 1.7s ease-out infinite; }
.ogf-sw { width:50px; height:27px; border-radius:999px; border:0; position:relative; cursor:pointer; padding:0; transition:background .25s; background:#CBD5D2; flex-shrink:0; }
/* 0.3.1: OFF is grey (it was dark green, darker than ON, so OFF read as ON). */
.ogf-sw:hover { background:#B8C4C1; }
.ogf-sw:focus-visible { outline:3px solid #9FD9C6; outline-offset:2px; }
/* (No [disabled] style: OrderGuard never renders a disabled switch.
   Free plans get a status line, not a control they can't use. #38) */
.ogf-knob { position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; transition:transform .25s; }
.ogf-sw.on { background:#1D9E75; }
.ogf-sw.on:hover { background:#178A65; }
.ogf-sw.on .ogf-knob { transform:translateX(23px); }
.ogf-mini { border:1px solid #DDE7E4; border-radius:11px; padding:11px; background:#fff; }
.ogf-stat { flex:1; background:#F6F8F8; border-radius:8px; padding:8px 10px; }
@media (prefers-reduced-motion: reduce) { .ogf-dot.on::after { animation:none; } }

/* Extracted from admin-welcome.php. */
@keyframes og-cs-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
@keyframes og-cs-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes og-cs-fillx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.og-cs-dot{animation:og-cs-pulse 2.4s ease-in-out infinite}
.og-cs-bar{transform-origin:bottom;animation:og-cs-grow .6s cubic-bezier(.22,1,.36,1) both}
.og-cs-fill{transform-origin:left;animation:og-cs-fillx .7s cubic-bezier(.22,1,.36,1) both}
@media (prefers-reduced-motion: reduce){
    .og-cs-dot{animation:none}
    .og-cs-bar{animation:none;transform:none}
    .og-cs-fill{animation:none;transform:none}
}

/* Extracted from orderguard.php. */
#og-ncp{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:rgba(22,40,36,.42);padding:20px;box-sizing:border-box;}
#og-ncp *{box-sizing:border-box;}
#og-ncp .box{width:100%;max-width:430px;background:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(18,49,42,.3);overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;animation:ogncp .4s cubic-bezier(.2,.8,.3,1) both;}
@keyframes ogncp{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
#og-ncp .ico{width:52px;height:52px;border-radius:14px;background:#FBF1DE;display:flex;align-items:center;justify-content:center;margin:0 auto 13px;}
#og-ncp .btnP{width:100%;background:#0F6E56;color:#fff;border:0;border-radius:10px;padding:12px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;}
#og-ncp .btnP:hover{background:#0c5c48;color:#fff;}
#og-ncp .btnN{width:100%;background:#fff;color:#5C6B68;border:1px solid #D9DEDC;border-radius:10px;padding:11px;font-size:12.5px;font-weight:600;cursor:pointer;}
@media (prefers-reduced-motion:reduce){#og-ncp .box{animation:none}}

/* Extracted from orderguard.php. */
.ogfl-row{display:flex;gap:10px;align-items:center;border:1px solid #E6E9E8;border-radius:9px;padding:9px 11px;cursor:pointer;margin-bottom:8px;}
.ogfl-row input{position:absolute;opacity:0;width:0;height:0;}
.ogfl-badge{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ogfl-check{margin-left:auto;color:#2F8A80;opacity:0;flex-shrink:0;}
.ogfl-row:has(input:checked){border-color:#2F8A80;border-width:2px;background:#F1F8F6;}
.ogfl-row:has(input:checked) .ogfl-check{opacity:1;}

/* Extracted from review-queue.php. */
.ogrq-row{display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid #EDF0EF;}
.ogrq-row:first-of-type{border-top:none;}
.ogrq-actions{display:flex; gap:8px; flex-shrink:0; align-items:center;}
.ogrq-btn{display:inline-flex; align-items:center; gap:5px; text-decoration:none; font-size:12px; font-weight:600; border-radius:8px; padding:7px 13px; white-space:nowrap;}
@media (max-width:600px){
  .ogrq-row{flex-wrap:wrap;}
  .ogrq-actions{width:100%; justify-content:flex-end;}
}

/* ===== 0.3.1 UI: Pro add-on download button (fill on hover, white text) and install steps ===== */
a.ogx-dl, a.ogx-dl:visited { position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; gap:12px; background:#fff; color:#0F6E56; border:2px solid #0F6E56; border-radius:999px; padding:8px 24px 8px 8px; font-size:15px; font-weight:600; line-height:1.2; text-decoration:none; box-shadow:none; transition:color .3s ease; animation:ogx-halo 2.6s ease-out infinite; }
a.ogx-dl::before { content:""; position:absolute; inset:0; background:#0F6E56; transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.22,1,.36,1); z-index:-1; }
a.ogx-dl:hover, a.ogx-dl:focus, a.ogx-dl:active { color:#fff; text-decoration:none; box-shadow:none; animation:none; }
a.ogx-dl:hover::before, a.ogx-dl:focus::before, a.ogx-dl:active::before { transform:scaleX(1); }
a.ogx-dl:focus-visible { outline:3px solid #9FD9C6; outline-offset:3px; }
a.ogx-dl:active { transform:scale(.98); }
.ogx-dl-ic { width:34px; height:34px; border-radius:50%; background:#0F6E56; color:#fff; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s ease, transform .3s ease; }
a.ogx-dl:hover .ogx-dl-ic, a.ogx-dl:focus .ogx-dl-ic { background:rgba(255,255,255,.18); transform:rotate(-8deg); }
a.ogx-dl:hover .ogx-dl-arrow, a.ogx-dl:focus .ogx-dl-arrow { animation:ogx-drop .8s cubic-bezier(.5,0,.4,1) infinite; }
.ogx-dl-chev { display:inline-flex; width:0; opacity:0; overflow:hidden; transition:width .3s ease, opacity .3s ease; }
a.ogx-dl:hover .ogx-dl-chev, a.ogx-dl:focus .ogx-dl-chev { width:16px; opacity:1; }
@keyframes ogx-halo { 0% { box-shadow:0 0 0 0 rgba(29,158,117,.45); } 70% { box-shadow:0 0 0 12px rgba(29,158,117,0); } 100% { box-shadow:0 0 0 0 rgba(29,158,117,0); } }
@keyframes ogx-drop { 0% { transform:translateY(-8px); opacity:0; } 35% { opacity:1; } 75%, 100% { transform:translateY(1px); opacity:1; } }
.ogx-dl-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.ogx-dl-note { font-size:11px; color:#8A9794; max-width:260px; line-height:1.45; }
.ogx-steps { display:flex; gap:10px; margin-top:22px; }
.ogx-step { flex:1; display:flex; gap:10px; align-items:flex-start; background:#F6F8F8; border:1px solid #E6E9E8; border-radius:10px; padding:12px; font-size:12.5px; line-height:1.45; color:#34423F; }
.ogx-step strong { color:#1C2B29; }
.ogx-step-title { display:block; font-weight:600; color:#1C2B29; margin-bottom:2px; }
.ogx-num { width:24px; height:24px; border-radius:50%; background:#E4F0EE; color:#0F6E56; font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
@media (max-width:782px) { .ogx-steps { flex-direction:column; } }

/* ===== 0.3.1 UI: Support tab ===== */
.ogsp-card { background:#fff; border:1px solid #E6E9E8; border-radius:14px; overflow:hidden; margin-bottom:20px; }
.ogsp-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 28px; background:#F3FAF7; border-bottom:1px solid #E2EFEA; }
.ogsp-headl { display:flex; align-items:center; gap:14px; }
.ogsp-tile { width:46px; height:46px; border-radius:12px; background:#0F6E56; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.ogsp-h1 { margin:0 0 3px; font-size:21px; font-weight:600; color:#1C2B29; line-height:1.3; padding:0; }
.ogsp-sub { margin:0; font-size:13.5px; color:#5C6B68; }
.ogsp-bubs { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.ogsp-bub { display:inline-flex; gap:4px; align-items:center; background:#fff; border-radius:12px 12px 12px 4px; padding:9px 12px; box-shadow:0 2px 6px rgba(15,110,86,.12); }
.ogsp-bub i { width:6px; height:6px; border-radius:50%; background:#5DCAA5; display:block; animation:ogsp-type 1.2s ease-in-out infinite; }
.ogsp-bub i:nth-child(2) { animation-delay:.15s; }
.ogsp-bub i:nth-child(3) { animation-delay:.3s; }
.ogsp-bub2 { background:#0F6E56; color:#fff; border-radius:12px 12px 4px 12px; padding:7px 12px; font-size:12px; font-weight:600; animation:ogsp-in 4s ease-in-out infinite; }
@keyframes ogsp-type { 0%, 60%, 100% { transform:translateY(0); opacity:.45; } 30% { transform:translateY(-4px); opacity:1; } }
@keyframes ogsp-in { 0%, 15% { opacity:0; transform:translateY(6px); } 25%, 85% { opacity:1; transform:none; } 100% { opacity:0; } }
.ogsp-body { padding:22px 28px 26px; }
.ogsp-metas { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.ogsp-meta { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:#34423F; background:#F6F8F8; border:1px solid #E6E9E8; border-radius:999px; padding:6px 12px; }
.ogsp-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; margin-bottom:22px; }
.ogsp-ch { display:flex; flex-direction:column; gap:12px; border:1px solid #E6E9E8; border-radius:14px; padding:20px; background:#fff; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ogsp-ch:hover { transform:translateY(-3px); box-shadow:0 12px 26px rgba(28,43,41,.08); border-color:#CFE3DD; }
.ogsp-ch.is-pro { background:#FCFAFE; border-color:#E1D6F0; }
.ogsp-ch.is-pro.is-mine { background:#fff; border-color:#C9B7E6; box-shadow:0 0 0 3px #F3EEF9; }
.ogsp-ico { width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; }
.ogsp-ch:hover .ogsp-env { animation:ogsp-fly 1.1s ease-in-out infinite; }
@keyframes ogsp-fly { 0%, 100% { transform:translate(0, 0) rotate(0); } 40% { transform:translate(2px, -3px) rotate(-6deg); } 70% { transform:translate(-1px, 1px) rotate(3deg); } }
.ogsp-chtop { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ogsp-chtitle { font-size:16px; font-weight:600; line-height:1.35; color:#1C2B29; }
.ogsp-chtext { margin:6px 0 0; font-size:13px; color:#5C6B68; line-height:1.5; }
.ogsp-pill { display:inline-block; font-size:11px; font-weight:600; line-height:1.5; white-space:nowrap; border-radius:999px; padding:2px 9px; }
.ogsp-pill.free { color:#3B6D2A; background:#EAF3E0; }
.ogsp-pill.pro { color:#6B4CA3; background:#F3EEF9; }
.ogsp-act { margin-top:auto; }
/* every channel button has the same box (1px border, same padding, 44px minimum) so the two cards line up */
.ogsp-act > a, .ogsp-act .ogsp-btn { box-sizing:border-box; min-height:44px; border:1px solid transparent; padding:10px 16px; text-align:center; line-height:1.35; }
.ogsp-act > a.ogsp-out { border-color:#D5DCDA; }
a.ogsp-out, a.ogsp-out:visited { display:inline-flex; align-items:center; justify-content:center; gap:7px; background:#fff; color:#34423F; text-decoration:none; border:1px solid #D5DCDA; border-radius:10px; padding:10px 16px; font-size:13.5px; font-weight:600; box-shadow:none; transition:border-color .2s ease, color .2s ease; }
a.ogsp-out:hover, a.ogsp-out:focus { border-color:#2F8A80; color:#0F6E56; box-shadow:none; }
a.ogsp-pro, a.ogsp-pro:visited { display:inline-flex; align-items:center; justify-content:center; gap:7px; background:#6B4CA3; color:#fff; text-decoration:none; border-radius:10px; padding:11px 18px; font-size:14px; font-weight:600; box-shadow:none; transition:background .2s ease; }
a.ogsp-pro:hover, a.ogsp-pro:focus { background:#5A3E8E; color:#fff; box-shadow:none; }
.ogsp-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#0F6E56; color:#fff; border:0; border-radius:10px; padding:11px 18px; font-size:14px; font-weight:600; cursor:pointer; transition:background .2s ease; }
.ogsp-btn:hover, .ogsp-btn:focus { background:#12806A; color:#fff; }
a.ogsp-out:focus-visible, a.ogsp-pro:focus-visible, .ogsp-btn:focus-visible { outline:3px solid #9FD9C6; outline-offset:3px; }
.ogsp-scope { display:flex; flex-direction:column; gap:10px; border-top:1px solid #EEF1F0; padding-top:18px; }
.ogsp-row { display:grid; grid-template-columns:130px minmax(0, 1fr); align-items:start; gap:6px 10px; }
.ogsp-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ogsp-lbl { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding-top:6px; }
.ogsp-chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; border-radius:999px; padding:5px 11px; }
.ogsp-chip.yes { background:#EAF6EE; color:#0F6E56; }
.ogsp-chip.no { background:#F1F3F2; color:#5C6B68; }
.ogsp-foot { display:flex; align-items:center; gap:7px; margin:6px 0 0; font-size:12px; color:#5C6B68; }
@media (max-width:600px) { .ogsp-grid { grid-template-columns:minmax(0, 1fr); } .ogsp-bubs { display:none; } .ogsp-row { grid-template-columns:minmax(0, 1fr); } .ogsp-lbl { padding-top:0; } }

/* ===== 0.3.1 UI: Plan tab (Free) ===== */
.ogpl-card { background:#fff; border:1px solid #E6E9E8; border-radius:16px; overflow:hidden; margin-bottom:20px; }
.ogpl-hero { display:flex; align-items:center; gap:16px; padding:26px 28px; background:#F7F3FC; border-bottom:1px solid #EEE7F6; }
.ogpl-star { position:relative; width:54px; height:54px; border-radius:14px; background:#6B4CA3; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.ogpl-sparks { position:absolute; left:-3px; top:-3px; }
.ogpl-spark { animation:ogpl-spark 2.8s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
.ogpl-spark.two { animation-delay:1.4s; }
@keyframes ogpl-spark { 0%, 100% { opacity:.2; transform:scale(.6); } 50% { opacity:1; transform:scale(1); } }
.ogpl-kicker { font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#6B4CA3; margin-bottom:3px; }
.ogpl-h1 { margin:0 0 4px; font-size:22px; font-weight:600; color:#1C2B29; line-height:1.3; padding:0; }
.ogpl-sub { margin:0; font-size:13.5px; color:#5C6B68; }
.ogpl-body { padding:24px 28px 26px; }
.ogpl-legend { font-size:13px; font-weight:600; color:#34423F; margin:0 0 12px; padding:0; }
.ogpl-fs { border:0; margin:0; padding:0; min-width:0; }
.ogpl-tiles { display:flex; gap:14px; margin-bottom:18px; }
.ogpl-tile { position:relative; flex:1; display:block; border:2px solid #E3DCEE; background:#fff; border-radius:14px; padding:16px 18px; cursor:pointer; color:#1C2B29; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.ogpl-tile:hover { border-color:#C9B7E6; transform:translateY(-2px); }
.ogpl-tile input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.ogpl-tile:has(input:checked) { border-color:#6B4CA3; box-shadow:0 0 0 4px #EFE8F8; }
.ogpl-tile:has(input:focus-visible) { outline:3px solid #C9B7E6; outline-offset:2px; }
.ogpl-tilehead { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:14.5px; font-weight:600; }
.ogpl-radio { width:18px; height:18px; border-radius:50%; border:2px solid #C9B7E6; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; box-sizing:border-box; }
.ogpl-radio i { width:8px; height:8px; border-radius:50%; background:#6B4CA3; transform:scale(0); transition:transform .25s cubic-bezier(.3,1.5,.5,1); }
.ogpl-tile:has(input:checked) .ogpl-radio { border-color:#6B4CA3; }
.ogpl-tile:has(input:checked) .ogpl-radio i { transform:scale(1); }
.ogpl-price { display:block; font-size:26px; font-weight:700; letter-spacing:-.02em; color:#1C2B29; }
.ogpl-per { font-size:13px; font-weight:500; color:#5C6B68; letter-spacing:0; }
.ogpl-note { display:block; font-size:12px; color:#5C6B68; margin-top:3px; }
.ogpl-note.good { color:#0F6E56; font-weight:600; }
.ogpl-best { position:absolute; top:-11px; right:14px; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:#0F6E56; border-radius:999px; padding:3px 9px; }
.ogpl-cta { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; box-sizing:border-box; background:#6B4CA3; color:#fff; border:0; border-radius:12px; padding:15px 18px; font-size:15.5px; font-weight:600; cursor:pointer; transition:background .2s ease; }
.ogpl-cta:hover, .ogpl-cta:focus { background:#5A3E8E; color:#fff; }
.ogpl-cta:focus-visible { outline:3px solid #C9B7E6; outline-offset:3px; }
.ogpl-cta::after { content:""; position:absolute; top:0; left:-50%; width:30%; height:100%; background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0)); transform:skewX(-20deg); animation:ogpl-sheen 4s ease-in-out infinite; pointer-events:none; }
@keyframes ogpl-sheen { 0%, 60% { left:-50%; } 100% { left:130%; } }
.ogpl-arr { transition:transform .25s ease; }
.ogpl-cta:hover .ogpl-arr, .ogpl-cta:focus .ogpl-arr { transform:translateX(4px); }
.ogpl-foot { display:flex; align-items:center; justify-content:center; gap:7px; margin:12px 0 0; font-size:12px; color:#5C6B68; text-align:center; }
.ogpl-cmp { background:#fff; border:1px solid #E6E9E8; border-radius:16px; overflow:hidden; margin-bottom:20px; }
.ogpl-row { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); align-items:center; gap:12px; padding:11px 16px; font-size:13.5px; color:#34423F; border-top:1px solid #EEF1F0; }
.ogpl-row:hover { background:#FAFBFB; }
.ogpl-row.head { border-top:0; background:#F6F8F8; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#5C6B68; }
.ogpl-row.head:hover { background:#F6F8F8; }
.ogpl-row .muted { color:#5C6B68; }
.ogpl-row .pro { font-weight:600; color:#6B4CA3; }
@media (max-width:600px) { .ogpl-tiles { flex-direction:column; } .ogpl-hero { flex-direction:column; align-items:flex-start; } }

@media (prefers-reduced-motion: reduce) {
    a.ogx-dl, a.ogx-dl:hover .ogx-dl-arrow, a.ogx-dl:focus .ogx-dl-arrow { animation:none; }
    .ogsp-bub i, .ogsp-bub2, .ogsp-ch:hover .ogsp-env, .ogpl-spark, .ogpl-cta::after { animation:none; }
    .ogsp-bub2 { opacity:1; }
    .ogsp-ch:hover, .ogpl-tile:hover { transform:none; }
}
.ogpl-foot svg, .ogsp-foot svg, .ogsp-meta svg { flex-shrink:0; }