/* Pricing pages, dark theme only: the Workbench dark palette (same tokens as the new home page).
   Loaded last in the head of the four pricing templates. Every rule is scoped to body.pricing-page.dark-mode,
   one class more than dark-theme.css, so it wins over that shared file without changing it; light mode and
   every other page are untouched. */
body.pricing-page.dark-mode {
    --wb-shell: #111316;
    --wb-panel: #16181c;
    --wb-surface: #1d2025;
    --wb-soft: #22262c;
    --wb-line: #2b3038;
    --wb-border: #343a44;
    --wb-hover: #2a2f37;
    --wb-text: #e7e9ed;
    --wb-muted: #a0a7b2;
    --wb-faint: #7b8390;
    --wb-primary: #2664ff;
    --wb-primary-hover: #477bff;
    --wb-accent: #99b6ff;
    --wb-divider: rgba(255, 255, 255, .07);
    /* The page's own variables, which its cards, tabs and text already read. */
    --bg: var(--wb-panel) !important;
    --bg-secondary: var(--wb-surface) !important;
    --text: var(--wb-text) !important;
    --text-secondary: var(--wb-muted) !important;
    --text-muted: var(--wb-faint) !important;
    --border: var(--wb-line) !important;
    --border-hover: var(--wb-border) !important;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3) !important;
    --shadow-hover: 0 16px 36px rgba(0, 0, 0, .45) !important;
    background: var(--wb-shell) !important;
    color: var(--wb-text);
}
html.dark-mode:has(> body.pricing-page) { background-color: #111316 !important; }

/* Header: as on the new home page. */
body.pricing-page.dark-mode .header { background-color: var(--wb-shell) !important; border-bottom-color: var(--wb-divider) !important; }
body.pricing-page.dark-mode .header-text-title { color: var(--wb-text); }
body.pricing-page.dark-mode .head_left :is(.plugins, .tools, .pricing, .tutorial, .canvas).head_rnav .hr-text,
body.pricing-page.dark-mode .head_left .canvas.head_rnav [data-i18n="canvas"],
body.pricing-page.dark-mode .head_left [data-i18n="navSketchup"],
body.pricing-page.dark-mode .head_left [data-i18n="navRhino"],
body.pricing-page.dark-mode .head_left [data-i18n="sidebarHome"] { color: var(--wb-text) !important; }
body.pricing-page.dark-mode .nav-dropdown-menu,
body.pricing-page.dark-mode .lang-dropdown { background-color: var(--wb-surface); border-color: var(--wb-line); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
body.pricing-page.dark-mode .nav-dropdown-item,
body.pricing-page.dark-mode .nav-dropdown-item a,
body.pricing-page.dark-mode .lang-option,
body.pricing-page.dark-mode .globe-icon,
body.pricing-page.dark-mode .dropdown-arrow { color: var(--wb-text); }
body.pricing-page.dark-mode .lang-switch-container .hr-text,
body.pricing-page.dark-mode .lang-current-text { color: var(--wb-text) !important; }
body.pricing-page.dark-mode .nav-dropdown-item:hover,
body.pricing-page.dark-mode .lang-option:hover,
body.pricing-page.dark-mode .lang-option.active { background-color: var(--wb-hover); }
body.pricing-page.dark-mode .login-register-btn,
body.pricing-page.dark-mode .try-tools-btn { background-color: var(--wb-primary) !important; border-color: var(--wb-primary); }
body.pricing-page.dark-mode .login-register-btn:hover,
body.pricing-page.dark-mode .try-tools-btn:hover { background-color: var(--wb-primary-hover) !important; }
body.pricing-page.dark-mode .mobile-nav-menu,
body.pricing-page.dark-mode #mobileMenu,
body.pricing-page.dark-mode .mobile-nav-panel { background-color: var(--wb-shell); border-color: var(--wb-line); color: var(--wb-text); }
body.pricing-page.dark-mode .mobile-nav-item { color: var(--wb-text); border-bottom-color: var(--wb-line); }

/* Limited offer banner: a quiet surface with the warm glow kept low, no amber frame. */
body.pricing-page.dark-mode .promo-banner {
    background-image: linear-gradient(135deg, var(--wb-surface) 0%, var(--wb-panel) 100%) !important;
    border-color: var(--wb-line) !important;
    color: var(--wb-text) !important;
}
body.pricing-page.dark-mode .promo-banner::before { opacity: .22; }
body.pricing-page.dark-mode .promo-banner .promo-title { color: var(--wb-text) !important; }
body.pricing-page.dark-mode .promo-banner .promo-subtitle { color: var(--wb-muted) !important; }
body.pricing-page.dark-mode .promo-banner .promo-tag { background-color: #fde047 !important; color: #1a1a1a !important; }
body.pricing-page.dark-mode .countdown-item { background-color: var(--wb-soft) !important; border: 1px solid var(--wb-line); }
body.pricing-page.dark-mode .promo-banner .countdown-value { color: var(--wb-text) !important; }
body.pricing-page.dark-mode .promo-banner .countdown-label { color: var(--wb-faint) !important; }

/* Pay as You Go / Monthly / Annual */
body.pricing-page.dark-mode .tabs { background-color: var(--wb-surface) !important; border-color: var(--wb-line) !important; }
body.pricing-page.dark-mode .tab-btn { background-color: transparent !important; border-color: transparent !important; color: var(--wb-muted) !important; }
body.pricing-page.dark-mode .tab-btn:hover { color: var(--wb-text) !important; }
body.pricing-page.dark-mode .tab-btn.active { background-color: #353c48 !important; color: #fff !important; }

/* Plan cards. dark-theme.css paints every .card with !important (#1f2937, a transparent border, its own shadow),
   which is why the Pro and Master frames vanished; these take it back. */
body.pricing-page.dark-mode .card {
    background-color: var(--wb-panel) !important;
    background-image: none !important;
    border-color: var(--wb-line) !important;
    color: var(--wb-text) !important;
    box-shadow: var(--shadow) !important;
}
body.pricing-page.dark-mode .card:hover { border-color: var(--wb-border) !important; box-shadow: var(--shadow-hover) !important; }
body.pricing-page.dark-mode .card.no-hover:hover { border-color: var(--wb-line) !important; box-shadow: var(--shadow) !important; }
body.pricing-page.dark-mode .card-pro,
body.pricing-page.dark-mode .card-pro:hover {
    border-color: var(--wb-primary) !important;
    background-image: linear-gradient(180deg, rgba(38, 100, 255, .16) 0%, rgba(38, 100, 255, 0) 25%, var(--wb-panel) 25%) !important;
}
body.pricing-page.dark-mode .card-pro .card-badge { background: var(--wb-primary); color: #fff !important; }
body.pricing-page.dark-mode .card-ultimate,
body.pricing-page.dark-mode .card-ultimate:hover {
    border-color: #8b6cf0 !important;
    background-image: linear-gradient(180deg, rgba(139, 108, 240, .16) 0%, rgba(139, 108, 240, 0) 25%, var(--wb-panel) 25%) !important;
}
body.pricing-page.dark-mode .card-ultimate .card-badge { background: #8b6cf0; color: #fff !important; }
body.pricing-page.dark-mode .card h3 { color: var(--wb-text); }
body.pricing-page.dark-mode .card .subtitle { color: var(--wb-faint) !important; }
body.pricing-page.dark-mode .price,
body.pricing-page.dark-mode .price-row { color: var(--wb-text) !important; }
body.pricing-page.dark-mode .price small { color: var(--wb-faint) !important; }
body.pricing-page.dark-mode .price-was { color: var(--wb-faint); }
body.pricing-page.dark-mode .price-permo { color: var(--wb-muted); }
body.pricing-page.dark-mode .features,
body.pricing-page.dark-mode .features li,
body.pricing-page.dark-mode .section li { color: #cdd2d9 !important; }
body.pricing-page.dark-mode .check::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%237b8390" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
}
body.pricing-page.dark-mode .features .pill-badge-blue { background: rgba(153, 182, 255, .12) !important; color: var(--wb-accent) !important; }
body.pricing-page.dark-mode .pill-yellow,
body.pricing-page.dark-mode .pill-green,
body.pricing-page.dark-mode .pill-badge-yellow,
body.pricing-page.dark-mode .pill-badge-red,
body.pricing-page.dark-mode .pill-badge-green { background: rgba(250, 204, 21, .14) !important; color: #facc15 !important; }

/* Buttons: the primary action is the Workbench blue, the outline sits on the card. */
body.pricing-page.dark-mode .btn-gradient { background: var(--wb-primary); color: #fff; }
body.pricing-page.dark-mode .btn-gradient:hover { background: var(--wb-primary-hover); opacity: 1; }
body.pricing-page.dark-mode .btn-disabled { background: var(--wb-soft) !important; color: var(--wb-faint) !important; }
body.pricing-page.dark-mode .btn-outline,
body.pricing-page.dark-mode .btn.btn-outline { background-color: transparent !important; color: var(--wb-text) !important; border-color: var(--wb-border) !important; }
body.pricing-page.dark-mode .btn-outline:hover,
body.pricing-page.dark-mode .btn.btn-outline:hover { background-color: var(--wb-hover) !important; color: #fff !important; border-color: var(--wb-border) !important; }

body.pricing-page.dark-mode .footer { background-color: transparent !important; border-top-color: var(--wb-line) !important; color: var(--wb-faint) !important; }

/* The page's own card-payment confirmation (a layui layer added to body). */
body.pricing-page.dark-mode .stripe-confirm-dialog,
body.pricing-page.dark-mode .stripe-confirm-dialog .layui-layer-content,
body.pricing-page.dark-mode .stripe-confirm-dialog .layui-layer-title,
body.pricing-page.dark-mode .stripe-confirm-dialog .layui-layer-btn { background: var(--wb-surface) !important; color: var(--wb-text) !important; }
body.pricing-page.dark-mode .stripe-confirm-dialog { box-shadow: 0 0 0 1px var(--wb-border), 0 24px 60px rgba(0, 0, 0, .55) !important; }
body.pricing-page.dark-mode .stripe-confirm-dialog .layui-layer-btn .layui-layer-btn0 { background: var(--wb-primary) !important; color: #fff !important; }
body.pricing-page.dark-mode .stripe-confirm-dialog .layui-layer-btn .layui-layer-btn0:hover { background: var(--wb-primary-hover) !important; }
body.pricing-page.dark-mode .stripe-confirm-dialog .layui-layer-btn .layui-layer-btn1 { background: var(--wb-soft) !important; color: var(--wb-text) !important; border-color: var(--wb-border) !important; }
body.pricing-page.dark-mode .stripe-confirm-dialog .layui-layer-btn .layui-layer-btn1:hover { background: var(--wb-hover) !important; }