/* ultrawidescreensaver.com — Cassiopeia user.css
   Upload to /media/templates/site/cassiopeia/css/user.css (Cassiopeia loads it automatically).
   Dark navy + warm sunset accent, matching the app icon. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@300;600;700&display=swap");

:root {
  --ss-bg: #11141b;
  --ss-panel: #181c26;
  --ss-panel2: #1f2431;
  --ss-line: #2b3142;
  --ss-text: #d8dce6;
  --ss-muted: #a1a8b8;
  --ss-accent: #ffa94d;
  --ss-accent2: #ffc46b;
  --ss-accent-ink: #1d1003;
  --cassiopeia-color-primary: #0d1016;
  --cassiopeia-color-link: #ffb35c;
  --cassiopeia-color-hover: #ffd08f;
  --link-color: #ffb35c;
  --link-hover-color: #ffd08f;
  --body-bg: var(--ss-bg);
  --body-color: var(--ss-text);
}

[hidden] { display: none !important; }
body.site { background: var(--ss-bg); color: var(--ss-text); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.site-grid { background: transparent; }

/* header */
.container-header { background: #0d1016; border-bottom: 1px solid var(--ss-line); box-shadow: none; }
.container-header .navbar-brand { color: #fff; }
.container-header .navbar-brand a, .container-header .brand-logo { color: #fff; text-decoration: none; }
.container-header .navbar-brand .brand-logo img { height: 40px; width: auto; max-width: 100%; }
@media (max-width: 575.98px) { .container-header .navbar-brand .brand-logo img { height: 30px; } }
.container-header .metismenu > li > a, .container-header .mod-menu > li > a { color: var(--ss-text); font-weight: 500; }
.container-header .metismenu > li > a:hover, .container-header .metismenu > li.active > a, .container-header .metismenu > li.current > a, .container-header .mod-menu > li > a:hover, .container-header .mod-menu > li.current > a { color: var(--ss-accent); }
.container-header .navbar-toggler { border-color: var(--ss-line); color: #fff; }
.container-header a.ss-nav-buy, .container-header .mod-menu > li.current > a.ss-nav-buy, .container-header .mod-menu > li.active > a.ss-nav-buy { background: var(--ss-accent); color: var(--ss-accent-ink) !important; border-radius: 999px; padding: .35rem 1rem; font-weight: 700; }
.container-header a.ss-nav-buy:hover { background: var(--ss-accent2); color: var(--ss-accent-ink); }

/* text */
h1, h2, h3, .page-header h1, .page-header h2 { font-family: Outfit, Inter, sans-serif; color: #fff; }
h1 { font-weight: 700; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -.01em; }
h2 { font-weight: 600; font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-top: 2.6rem; }
h3 { font-weight: 600; font-size: 1.15rem; }
a { color: var(--cassiopeia-color-link); }
a:hover { color: var(--cassiopeia-color-hover); }
code, kbd { color: var(--ss-accent2); }
hr { border-color: var(--ss-line); opacity: 1; }

/* Joomla compiles Bootstrap with NO variable prefix: --table-*, --btn-*, --card-* (not --bs-*) */
.table { --table-bg: transparent; --table-color: var(--ss-text); --table-border-color: var(--ss-line); --table-striped-bg: rgba(255,255,255,.04); --table-striped-color: var(--ss-text); --table-hover-color: #fff; color: var(--ss-text); border-color: var(--ss-line); }
.table > :not(caption) > * > * { color: var(--ss-text); background-color: transparent; }
.table th { color: #fff; }
.input-group-text { background-color: var(--ss-panel2); color: var(--ss-text); border-color: var(--ss-line); }

/* buttons (Cassiopeia sets real properties, so set both) */
.btn { text-decoration: none; border-radius: 999px; }
.btn-primary, a.btn-primary, button.btn-primary { background-color: var(--ss-accent); border-color: var(--ss-accent); color: var(--ss-accent-ink); font-weight: 700; }
.btn-primary:hover, .btn-primary:focus, a.btn-primary:hover { background-color: var(--ss-accent2); border-color: var(--ss-accent2); color: var(--ss-accent-ink); }
.btn-success, a.btn-success { background-color: var(--ss-accent); border-color: var(--ss-accent); color: var(--ss-accent-ink); font-weight: 700; }
.btn-success:hover, a.btn-success:hover { background-color: var(--ss-accent2); border-color: var(--ss-accent2); color: var(--ss-accent-ink); }
.btn-secondary, a.btn-secondary { background-color: transparent; border-color: #4a5266; color: var(--ss-text); }
.btn-secondary:hover, a.btn-secondary:hover { background-color: var(--ss-panel2); border-color: var(--ss-muted); color: #fff; }

/* landing page blocks */
.ss-hero { padding: 2.6rem 0 1.4rem; }
.ss-kicker { text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; color: var(--ss-accent); font-weight: 700; margin-bottom: .6rem; }
.ss-lead { font-size: 1.2rem; color: var(--ss-text); max-width: 46rem; }
.ss-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.6rem 0 .8rem; align-items: center; }
.ss-small { font-size: .9rem; color: var(--ss-muted); }
.ss-shot { margin: 1.6rem 0; }
.ss-shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--ss-line); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.ss-shot figcaption { font-size: .9rem; color: var(--ss-muted); margin-top: .6rem; text-align: center; }
.ss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.ss-card { background: var(--ss-panel); border: 1px solid var(--ss-line); border-radius: 12px; padding: 1.2rem 1.3rem; }
.ss-card h3 { margin-top: 0; }
.ss-card p { margin-bottom: 0; color: var(--ss-muted); }
.ss-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; margin: 2rem 0; }
@media (max-width: 767.98px) { .ss-split { grid-template-columns: 1fr; } }
.ss-split img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--ss-line); }
.ss-prices .ss-card { display: flex; flex-direction: column; }
.ss-prices .ss-card h3 { text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; color: var(--ss-accent); }
.ss-prices .ss-card ul { color: var(--ss-text); padding-left: 1.1rem; margin: .6rem 0 1rem; }
.ss-prices .ss-card .btn { margin-top: auto; align-self: flex-start; }
.ss-price { font-family: Outfit, sans-serif; font-weight: 700; font-size: 2.8rem; line-height: 1; color: #fff !important; margin: .3rem 0 .4rem !important; }
.ss-price small { font-size: 1rem; font-weight: 400; color: var(--ss-muted); }
.ss-was { text-decoration: line-through; color: var(--ss-muted); font-size: 1.1rem; margin-left: .4rem; }
.ss-steps { padding-left: 1.2rem; }
.ss-steps li { margin-bottom: .6rem; }
.ss-faq h3 { margin-top: 1.4rem; }
.ss-note { background: var(--ss-panel); border-left: 3px solid var(--ss-accent); padding: .9rem 1.1rem; border-radius: 6px; margin: 1.2rem 0; }
.ss-check { list-style: none; padding-left: 0; }
.ss-check li { padding-left: 1.6rem; position: relative; margin-bottom: .45rem; }
.ss-check li::before { content: "✓"; position: absolute; left: 0; color: var(--ss-accent); font-weight: 700; }

/* articles: one readable column, centred */
.com-content-article { max-width: 68rem; margin-left: auto; margin-right: auto; }
.com-content-article ol li, .com-content-article ul li { margin-bottom: .35rem; }
.osm-container, .cssl-license { max-width: 64rem; margin-left: auto; margin-right: auto; }
.com-users-login, .com-users-profile, .com-users-registration, .com-users-reset, .com-users-remind { max-width: 32rem; margin-left: auto; margin-right: auto; }

/* My license page */
.cssl-key-card { background: var(--ss-panel); border: 1px solid var(--ss-line); border-radius: 12px; padding: 1.1rem 1.2rem; margin: 1rem 0; }
.cssl-key-meta { color: var(--ss-muted); font-size: .9rem; margin-bottom: .5rem; }
.cssl-key { font-family: Consolas, Menlo, monospace; font-size: 1rem; line-height: 1.6; color: #fff; background: #0b0e13; border: 1px solid var(--ss-line); border-radius: 8px; padding: .7rem .9rem; word-break: break-all; margin-bottom: .7rem; user-select: all; }
.cssl-copied { margin-left: .7rem; color: var(--ss-accent2); }

/* Membership Pro (pricing, sign-up, account): its own CSS paints these white/grey */
.osm-container { color: var(--ss-text); }
.osm-container .osm-item-wrapper { background: var(--ss-panel); border: 1px solid var(--ss-line); border-radius: 12px; overflow: hidden; margin-bottom: 1.2rem; color: var(--ss-text); }
.osm-container .osm-item-heading-box { background: var(--ss-panel2); border-bottom: 1px solid var(--ss-line); padding: .8rem 1.2rem; }
.osm-container .osm-item-title { margin: 0; }
.osm-container .osm-item-title a { color: #fff; text-decoration: none; }
.osm-container .osm-item-title a:hover { color: var(--ss-accent); }
.osm-container .osm-item-description { padding: 1rem 1.2rem; background: transparent; color: var(--ss-text); }
.osm-container .osm-description-details, .osm-container .osm-description-details p { color: var(--ss-text); }
.osm-container .table { --table-bg: transparent; --table-color: var(--ss-text); --table-striped-bg: rgba(255,255,255,.04); --table-striped-color: var(--ss-text); --table-border-color: var(--ss-line); color: var(--ss-text); }
.osm-container .table td, .osm-container .table th { background-color: transparent; color: var(--ss-text); border-color: var(--ss-line); box-shadow: none; }
.osm-container .osm-plan-property-label { color: var(--ss-muted); }
.osm-container .osm-plan-property-value { color: #fff; font-weight: 600; }
.osm-container .osm-taskbar ul { list-style: none; padding: 0; margin: 0; display: flex; gap: .6rem; flex-wrap: wrap; }
.osm-container label, .osm-container .control-label, .osm-container legend { color: var(--ss-text); }
.osm-container .well, .osm-container .osm-container-box, .osm-container fieldset { background: var(--ss-panel); border-color: var(--ss-line); color: var(--ss-text); }
.osm-container h1, .osm-container h2, .osm-container h3, .osm-container .osm-page-title { color: #fff; }
.osm-container .text-muted, .osm-container small { color: var(--ss-muted) !important; }
.form-control, .form-select { background-color: #0b0e13; color: var(--ss-text); border-color: var(--ss-line); }
.form-control:focus, .form-select:focus { background-color: #0b0e13; color: #fff; border-color: var(--ss-accent); box-shadow: 0 0 0 .2rem rgba(255,169,77,.22); }
.card { --card-bg: var(--ss-panel); --card-border-color: var(--ss-line); background-color: var(--ss-panel); border-color: var(--ss-line); color: var(--ss-text); }
.alert-info { --alert-bg: #13202e; --alert-color: #cfe3ff; --alert-border-color: #23405e; background-color: #13202e; color: #cfe3ff; border-color: #23405e; }
.alert-message, .alert-success { --alert-bg: #13261b; --alert-color: #c9f2d6; --alert-border-color: #24543a; background-color: #13261b; color: #c9f2d6; border-color: #24543a; }

/* support form (Convert Forms) on the dark theme */
.convertforms { max-width: 46rem; }
.convertforms .cf-label, .convertforms .cf-label label { color: #fff; }
.convertforms .cf-input, .convertforms select.cf-input, .convertforms textarea.cf-input { background-color: #0b0e13 !important; color: var(--ss-text) !important; border-color: var(--ss-line) !important; }
.convertforms .cf-input:focus { border-color: var(--ss-accent) !important; box-shadow: 0 0 0 .2rem rgba(255,169,77,.22); }
.convertforms .cf-control-input-desc, .convertforms .cf-footer { color: var(--ss-muted); }
.convertforms .cf-response { color: var(--ss-text); }

/* footer */
.footer { background: #0d1016; border-top: 1px solid var(--ss-line); }
.footer ul { display: flex; flex-direction: row; gap: 1.4rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.footer ul li { margin: 0; padding: 0; }
.footer a { color: var(--ss-muted); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer .ss-copy { color: var(--ss-muted); font-size: .85rem; margin-top: .8rem; }

/* muted text and Choices.js dropdowns (Membership Pro country) on the dark theme */
.text-muted, .cssl-license .text-muted { color: var(--ss-muted) !important; }
.choices__inner, .choices__list--dropdown, .choices__list[aria-expanded] { background-color: #0b0e13 !important; color: var(--ss-text) !important; border-color: var(--ss-line) !important; }
.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background-color: var(--ss-panel2) !important; color: #fff !important; }
.choices__input { background-color: #0b0e13 !important; color: var(--ss-text) !important; }
.choices__placeholder { opacity: .85; color: var(--ss-muted); }
.osm-container .alert-info, .osm-container .osm-message { background-color: #13202e; color: #cfe3ff; border-color: #23405e; }

/* launch-price display */
.ss-launch { display: inline-block; align-self: flex-start; background: rgba(255,169,77,.14); color: var(--ss-accent2); border: 1px solid rgba(255,169,77,.45); border-radius: 999px; padding: .1rem .65rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: .2rem 0 .1rem; }
.ss-was { font-family: Inter, system-ui, sans-serif; font-size: 1.15rem; font-weight: 500; color: var(--ss-muted); text-decoration: line-through; text-decoration-thickness: 2px; margin-left: .35rem; vertical-align: middle; }
.osm-container .ss-launch-line { color: var(--ss-text); }
.osm-container .ss-launch-line .ss-was { font-size: 1rem; }
.ss-until { color: var(--ss-muted); font-size: .9rem; white-space: nowrap; }