:root{
  /* Dark, metallic colour palette */
  --bg: #0a0a0a;
  --surface: rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.08);
  --text: rgba(255,255,255,0.90);
  --muted: rgba(255,255,255,0.60);
  --border: rgba(255,255,255,0.10);
  --shadow: rgba(0,0,0,0.50);

  /* Use neutral greys for accents instead of purple/green/orange */
  --accent: #707070;
  --accent-2: #5a5a5a;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 10px;

  --container: 1120px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family:var(--font); color:var(--text); background:var(--bg); }

/* Subtle background depth so the site doesn't feel "flat" */
body{
  /* Remove colourful gradients and use a subtle dark backdrop */
  background: var(--bg);
}
img{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
/* Selection highlight: subtle grey */
::selection{ background: rgba(100,100,100,0.35); }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px 16px 70px;
}

.muted{ color: var(--muted); }
.hidden{ display:none !important; }

/* ========== TOPBAR (mobile friendly) ========== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;

  border-bottom: 1px solid var(--border);
  background: rgba(11,15,23,0.80);
  backdrop-filter: blur(10px);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
}

.brand{
  position: relative;
  font-weight: 900;
  letter-spacing: 0.4px;
  display:flex;
  align-items:center;
  gap: 10px;
  white-space: nowrap;
}
.brand:hover{ text-decoration:none; }

/* Brand logo */
.brand.has-logo::before{ display:none; }
.brand-logo{
  width: 34px;
  height: 34px;
  display:block;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35));
}
.brand-text{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.brand-logo{
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display:block;
}

/* Keep the brand text in the DOM for accessibility/SEO, but hide it visually */
.brand-text{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.brand.has-logo::before{
  display:none;
}

.brand::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 4px rgba(124,58,237,0.15);
}

/* Nav scrolls horizontally on mobile instead of breaking layout */
/* Navigation bar styles */
.nav{
  display:flex;
  gap: 8px;
  align-items:center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Allow the menu to grow full width and wrap items on larger screens */
  flex-wrap: wrap;
  max-width: 100%;
  padding-bottom: 2px;
}
.nav::-webkit-scrollbar{ display:none; }

.nav a{
  flex: 0 0 auto;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: 140ms ease;
  font-weight: 650;
  font-size: 13px;
  white-space: nowrap;
}

/* On medium and larger screens, allow navigation items to wrap and fill space */
@media (min-width: 720px) {
  .nav {
    flex-wrap: wrap;
    max-width: none;
  }
}

.nav a:hover{
  text-decoration:none;
  color: var(--text);
  border-color: var(--border);
  background: rgba(255,255,255,0.05);
}

.nav a.active{
  color: var(--text);
  background: rgba(124,58,237,0.16);
  border-color: rgba(124,58,237,0.28);
}

/* ========== HERO ========== */
.hero{
  padding: 14px 0 10px;
}

.hero .kicker{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  letter-spacing: 0.25px;
  color: rgba(255,255,255,0.86);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.16);
}

.hero .kicker::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.hero h1{
  margin: 10px 0 8px;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.6px;
}

.hero p{
  margin: 0;
  max-width: 72ch;
  line-height: 1.6;
}

/* Home hero variant (optional if used) */
.hero.hero-home{
  padding-top: 18px;
}
.hero .hero-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ========== SURFACE BLOCKS ========== */
.checkout-box{
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
  box-shadow: 0 18px 50px var(--shadow);
}

/* Forms */
.field{
  display:grid;
  gap: 7px;
  margin-bottom: 12px;
}
label{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.2px;
}
input{
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 14px;
  color: var(--text);
  background: rgba(0,0,0,0.22);
  outline: none;
  transition: 140ms ease;
}
input::placeholder{ color: rgba(255,255,255,0.35); }
input:focus{
  border-color: rgba(124,58,237,0.55);
  box-shadow: 0 0 0 4px rgba(124,58,237,0.12);
}

textarea{
  width: 100%;
  min-height: 120px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 14px;
  color: var(--text);
  background: rgba(0,0,0,0.22);
  outline: none;
  transition: 140ms ease;
  resize: vertical;
}

/* Style select inputs to match dark theme */
select{
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 14px;
  color: var(--text);
  background: rgba(0,0,0,0.22);
  appearance: none;
  outline: none;
}
select option{
  color: var(--text);
  background: var(--bg);
}
textarea::placeholder{ color: rgba(255,255,255,0.35); }
textarea:focus{
  border-color: rgba(124,58,237,0.55);
  box-shadow: 0 0 0 4px rgba(124,58,237,0.12);
}

/* Select styling (used by catalog filter) */
select{
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 14px;
  color: var(--text);
  background: rgba(0,0,0,0.22);
  outline: none;
  transition: 140ms ease;
}
select:focus{
  border-color: rgba(124,58,237,0.55);
  box-shadow: 0 0 0 4px rgba(124,58,237,0.12);
}

/* Inline message types */
[data-msg-type="info"]{ color: var(--muted); }
[data-msg-type="success"]{ color: rgba(34,197,94,0.95); }
[data-msg-type="error"]{ color: rgba(248,113,113,0.95); }

/* ========== SECTIONS ========== */
.section{ margin-top: 22px; }

.section-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.section-header h2{
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.2px;
}

/* ========== GRID & CARDS (mobile-first) ========== */
.grid{
  display:grid;
  grid-template-columns: 1fr; /* mobile default */
  gap: 14px;
}

.card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
  overflow:hidden;
  box-shadow: 0 16px 45px var(--shadow);
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.05));
}

.card-img{
  width:100%;
  height: 185px;
  object-fit: cover;
  display:block;
  background: rgba(255,255,255,0.06);
}

.card-img-placeholder{
  width: 100%;
  height: 185px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(220px 140px at 30% 30%, rgba(124,58,237,0.35), rgba(0,0,0,0.0) 60%),
    radial-gradient(220px 140px at 70% 55%, rgba(34,197,94,0.22), rgba(0,0,0,0.0) 60%),
    rgba(255,255,255,0.05);
  border-bottom: 1px solid var(--border);
}

.card-img-placeholder span{
  font-weight: 900;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.86);
  opacity: 0.9;
}

.pill.pill-warn{
  border-color: rgba(248,113,113,0.35);
  color: rgba(248,113,113,0.92);
  background: rgba(248,113,113,0.08);
}

.pill.pill-ok{
  border-color: rgba(34,197,94,0.35);
  color: rgba(34,197,94,0.92);
  background: rgba(34,197,94,0.08);
}

/* Adjust card images in catalog list to display small icons only.
   This overrides the default card image height for cards shown in the
   catalog list (services and products pages). By constraining the
   dimensions and using object-fit: contain we ensure the icons are
   centred and do not dominate the card. */
.catalog-list .card .card-img {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  object-fit: contain;
  background: transparent;
}

/* ------------------------------------------------------------------ */
/* New list view styling inspired by modern plugin panels */

/* Catalogue list now displays items as horizontal panels instead of
   grid cards. Each .catalog-item is a flex row with a small icon,
   info column and a meta column on the right. */
.catalog-list.list-style {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.catalog-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: background 0.2s, border 0.2s;
  text-decoration: none;
}

.catalog-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(124,58,237,0.35);
}

.catalog-item:focus {
  outline: 2px solid rgba(124,58,237,0.55);
  outline-offset: 2px;
}

/* Thumbnail on the left */
.catalog-item .card-thumb {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.catalog-item .card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Central information column */
.catalog-item .card-info {
  flex: 1 1 auto;
  margin-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.catalog-item .card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.catalog-item .card-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(255,255,255,0.92);
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.catalog-item .card-title .version {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
}

.catalog-item .card-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  line-height: 1.4;
  margin-top: 2px;
}

/* Right-hand meta column: rating, price and actions */
.catalog-item .card-meta-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-left: 16px;
  min-width: 140px;
}

/* Wishlist button styling. Uses heart icons to mark favourites. */
.catalog-item .wishlist-btn {
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  margin-bottom: 6px;
  transition: color 0.2s;
}
.catalog-item .wishlist-btn.active {
  color: var(--accent);
}
.catalog-item .wishlist-btn:hover {
  color: var(--accent-2);
}

/* Wishlist button styling for the item buy box */
.rts-buybox .wishlist-btn {
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  margin-top: 8px;
  margin-bottom: 8px;
  padding: 0;
  transition: color 0.2s;
}
.rts-buybox .wishlist-btn.active {
  color: var(--accent);
}
.rts-buybox .wishlist-btn:hover {
  color: var(--accent-2);
}

/* Interactive rating input used on item pages and dashboard */
.rts-rating-input {
  display: flex;
  gap: 4px;
  font-size: 22px;
  margin-top: 4px;
}
.rts-rating-input .rts-star {
  cursor: pointer;
  user-select: none;
  color: rgba(255,255,255,0.65);
  transition: color 0.2s;
}
.rts-rating-input .rts-star:hover {
  color: rgba(255,255,255,0.85);
}


.catalog-item .card-price {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}

.catalog-item .card-actions {
  display: flex;
  gap: 6px;
}

/* Ensure small buttons in list view look tidy */
.catalog-item .card-actions .btn {
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 6px;
}

.split{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.card-body{
  padding: 14px 14px 16px;
}

.card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.card h3{
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.2px;
}

.price{
  font-weight: 900;
  font-size: 17px;
  color: rgba(255,255,255,0.95);
  white-space: nowrap;
}

/* Pills & badges */
.pills{
  margin: 10px 0;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.pill{
  border: 1px solid var(--border);
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(0,0,0,0.18);
}
.badge{
  margin-left: 8px;
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), rgba(124,58,237,0.55));
  color: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.10);
  vertical-align: middle;
}

/* Buttons (stack on small screens to avoid overflow) */
.card-actions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* ========== CATALOG UI (compact list + compact controls) ========== */
.catalog-controls{
  padding: 12px;
}

.catalog-controls-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.catalog-controls-title{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.2px;
}

.catalog-controls-sub{
  margin-top: 2px;
}

.catalog-controls-row{
  display:grid;
  grid-template-columns: 1fr 240px;
  gap: 12px;
  align-items: end;
}

.catalog-controls-row .field{
  margin-bottom: 0;
}

.catalog-controls input,
.catalog-controls select{
  padding: 10px 12px;
}

.catalog-controls-meta{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.catalog-toggle{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.catalog-toggle input{
  width: 18px;
  height: 18px;
  margin: 0;
}

.catalog-hint{
  margin-top: 6px;
  font-size: 12px;
}

/* Catalog grid can be denser than general site grids */
.catalog-grid{
  grid-template-columns: 1fr;
}

/* Compact catalog cards */
.catalog-card{
  display:flex;
  gap: 12px;
  padding: 12px;
  overflow:hidden;
}

.catalog-thumb{
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
  overflow: hidden;
}

.catalog-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.catalog-body{
  flex: 1 1 auto;
  min-width: 0;
}

.catalog-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.catalog-title{
  margin: 0;
  font-size: 16px;
}

.catalog-desc{
  margin: 8px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.catalog-actions{
  margin-top: 10px;
  display:flex;
  justify-content: flex-end;
}

article.card[role="link"]{
  cursor: pointer;
}

article.card[role="link"]:focus{
  outline: none;
  border-color: rgba(124,58,237,0.55);
  box-shadow: 0 0 0 4px rgba(124,58,237,0.12);
}

@media (max-width: 720px){
  .catalog-controls-row{
    grid-template-columns: 1fr;
  }
  .catalog-thumb{
    width: 86px;
    height: 86px;
    flex-basis: 86px;
  }
}

@media (min-width: 720px){
  .catalog-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1020px){
  .catalog-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px){
  .catalog-grid{
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Shared button styles for BOTH <button> and <a> */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;

  /* Use a neutral grey gradient for primary buttons in keeping with the metallic theme */
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(135deg, rgba(112,112,112,0.90), rgba(80,80,80,0.80));
  color: rgba(255,255,255,0.98);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor:pointer;
  font-weight: 800;
  letter-spacing: 0.1px;
  transition: 140ms ease;
  text-decoration:none;
}

.btn:hover{
  filter: brightness(1.05);
  border-color: rgba(255,255,255,0.22);
  text-decoration:none;
}
/* Compact button variant (used in catalog quick view, modals, etc.) */
.btn-sm{
  padding: 8px 10px;
  font-size: 13px;
  border-radius: var(--radius-xs);
}


.btn:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-ghost{
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.14);
}
.btn-ghost:hover{
  background: rgba(255,255,255,0.08);
}

/* Details blocks */
.details{
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* A simple divider used between stacked panels */
.divider{
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}

/* "details" used as a collapsible panel in checkout boxes */
details.details{
  border-top: none;
  padding-top: 0;
}
details.details summary{
  cursor: pointer;
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  list-style: none;
}
details.details summary::-webkit-details-marker{ display: none; }
details.details summary:focus{ outline: none; }
details.details[open] summary{ opacity: 0.95; }
.details h4{
  margin: 12px 0 6px;
  font-size: 14px;
  letter-spacing: -0.1px;
}
.details ul{
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.6;
}
.details p{
  margin: 8px 0;
  line-height: 1.65;
}

/* FAQ */
details.faq summary{
  cursor: pointer;
  color: rgba(255,255,255,0.92);
  font-weight: 800;
}
details.faq > div{
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.65;
}

/* Footer */
.footer{
  margin-top: 30px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  color: var(--muted);
}

/* ========== HOME PAGE LAYOUT (fixes “main page looks off”) ========== */
.home-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.home-card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
  box-shadow: 0 16px 45px var(--shadow);
  padding: 16px;
}

.home-card h2{
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: -0.3px;
}

.home-card p{
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.6;
}

.home-cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ========== FEATURE / VALUE PROPS ========== */
.feature-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.feature{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.05);
  padding: 16px;
  box-shadow: 0 14px 40px var(--shadow);
}

.feature h3{
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: -0.2px;
}

.feature p{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.feature .icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(135deg, rgba(124,58,237,0.22), rgba(34,197,94,0.14));
  margin-bottom: 10px;
}

.availability{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  font-size: 12px;
  color: var(--muted);
}

.availability[data-state="ok"]{ color: rgba(34,197,94,0.95); border-color: rgba(34,197,94,0.25); }
.availability[data-state="no"]{ color: rgba(248,113,113,0.95); border-color: rgba(248,113,113,0.22); }

/* ========== ORDER PAGE LAYOUT (fixes “order page looks empty”) ========== */
.order-shell{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.order-card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
  box-shadow: 0 16px 45px var(--shadow);
  padding: 16px;
}

.order-row{
  display:flex;
  gap: 10px;
  align-items:flex-end;
  flex-wrap: wrap;
}

.order-row .field{
  flex: 1 1 380px;
  margin-bottom: 0;
}

.order-status-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

/* ========== ORDER PAGE POLISH (works even if not used) ========== */
#downloadWrap{
  margin-top: 12px;
}
#downloadBtn{
  display:inline-block;
}
#downloadMeta{
  margin-top: 10px;
}

/* ========== RTS MODAL / DETAILS PANEL (for new catalog UI) ========== */
#rtsModalHost{
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

#rtsModalHost.is-open{
  pointer-events: auto;
}

.rts-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(6px);
}

.rts-modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(980px, calc(100vw - 24px));
  max-height: min(86vh, 820px);
  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  box-shadow: 0 22px 80px rgba(0,0,0,0.65);

  display:flex;
  flex-direction: column;
}

.rts-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(11,15,23,0.55);
}

.rts-modal-title h3{
  margin: 0 0 6px;
  font-size: 18px;
  letter-spacing: -0.2px;
}

.rts-modal-title .muted{
  line-height: 1.5;
}

.rts-modal-close{
  white-space: nowrap;
}

.rts-modal-body{
  padding: 14px;
  overflow: auto;
}

.rts-modal-meta{
  margin-top: 12px;
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.rts-modal-price{
  font-weight: 900;
  font-size: 20px;
  color: rgba(255,255,255,0.95);
}

.rts-modal-footer{
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: rgba(11,15,23,0.55);

  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#rtsModalMsg{
  min-height: 18px;
}

/* Gallery inside modal */
.rts-gallery{
  display:grid;
  gap: 10px;
}

.rts-gallery-main{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.18);
  overflow:hidden;
}

.rts-gallery-main img{
  width: 100%;
  height: auto;
  display:block;
}

.rts-gallery-thumbs{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.rts-thumb{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.20);
  border-radius: var(--radius-xs);
  padding: 0;
  cursor: pointer;
  overflow:hidden;
  width: 78px;
  height: 54px;
}

.rts-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.rts-thumb:hover{
  border-color: rgba(255,255,255,0.22);
  filter: brightness(1.05);
}

/* Add-ons inside item modal */
.rts-addons{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.rts-addon{
  display:flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.16);
}

.rts-addon-title{
  font-weight: 800;
  letter-spacing: -0.2px;
}

.rts-addon-right{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  min-width: 140px;
}

.rts-addon-price{
  font-weight: 900;
  font-size: 16px;
}

article.card[role="button"]{
  cursor: pointer;
}
article.card[role="button"]:focus{
  outline: none;
  border-color: rgba(124,58,237,0.55);
  box-shadow: 0 0 0 4px rgba(124,58,237,0.12);
}

/* ========== RESPONSIVE BREAKPOINTS ========== */
@media (min-width: 720px){
  .container{ padding: 26px 18px 70px; }
  .hero h1{ font-size: 40px; }
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .card-img{ height: 190px; }
  .nav a{ font-size: 14px; }

  .home-grid{ grid-template-columns: repeat(2, 1fr); }
  .order-shell{ grid-template-columns: 1fr 1fr; }
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .split{ grid-template-columns: 1.15fr 0.85fr; }
}

@media (min-width: 1020px){
  .hero h1{ font-size: 44px; }
  .grid{ grid-template-columns: repeat(2, 1fr); }

  .home-grid{ grid-template-columns: repeat(3, 1fr); }
  .order-shell{ grid-template-columns: 1fr 1fr; }
  .feature-grid{ grid-template-columns: repeat(3, 1fr); }
  .split{ grid-template-columns: 1.2fr 0.8fr; }
}

@media (max-width: 420px){
  .topbar{ padding: 10px 12px; }
  .hero h1{ font-size: 30px; }
  .price{ font-size: 16px; }
  .btn{ width: 100%; } /* prevents half-buttons overflowing on tiny screens */
  .nav{ max-width: 62vw; }

  .rts-modal{
    width: calc(100vw - 18px);
    max-height: 88vh;
  }

  .rts-thumb{
    width: 72px;
    height: 50px;
  }
}

/* Small polish */
hr{
  border: none;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}
code, pre{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 13px;
}


/* ========== RTS: METALLIC DARK THEME + ANIMATED BACKGROUND ========== */
/*
  User request:
  - darker palette (black/gray/white), “metal” feel
  - subtle transparencies + premium motion
  - animated background related to tech/config
*/

:root{
  --bg: #07090d;
  --text: rgba(255,255,255,0.92);
  --muted: rgba(226,232,240,0.68);
  --border: rgba(255,255,255,0.14);
  --shadow: rgba(0,0,0,0.62);
  --surface: rgba(255,255,255,0.055);
  --surface-2: rgba(255,255,255,0.085);

  /* “metal” accent (cool steel) */
  --accent: rgba(226,232,240,0.92);
  --accent-2: rgba(148,163,184,0.95);
}

/* Canvas layer behind the whole site */
#rtsBgCanvas{
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: 0.55;
}

/* Tech grid + vignette overlays */
body{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.0) 38%),
              radial-gradient(900px 520px at 18% 8%, rgba(255,255,255,0.06), rgba(0,0,0,0) 62%),
              radial-gradient(900px 520px at 86% 18%, rgba(255,255,255,0.04), rgba(0,0,0,0) 62%),
              var(--bg);
  position: relative;
  min-height: 100vh;
}

body::before{
  content:"";
  position: fixed;
  inset: -2px;
  z-index: 0;
  pointer-events: none;

  /* subtle “circuit grid” */
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(700px 460px at 30% 22%, rgba(255,255,255,0.05), rgba(0,0,0,0) 62%),
    radial-gradient(640px 420px at 78% 20%, rgba(255,255,255,0.04), rgba(0,0,0,0) 62%);
  background-size: 84px 84px, 84px 84px, auto, auto;
  opacity: 0.22;
  transform: translateZ(0);
  animation: rtsGridMove 26s linear infinite;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1400px 900px at 50% 40%, rgba(0,0,0,0.00), rgba(0,0,0,0.64) 72%),
    radial-gradient(900px 700px at 50% 120%, rgba(0,0,0,0.00), rgba(0,0,0,0.70) 70%);
}

@keyframes rtsGridMove{
  0%{ background-position: 0 0, 0 0, 0 0, 0 0; }
  100%{ background-position: 160px 80px, 160px 80px, 0 0, 0 0; }
}

/* Make sure content sits above background layers */
#siteHeader, #siteFooter, .container{ position: relative; z-index: 1; }

/* Top bar: more “metal/glass” */
.topbar{
  background: rgba(7,9,13,0.70);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

/* Cards / panels: glass-metal with a gentle edge highlight */
.card, .checkout-box, .home-card, .order-card, .feature, .rts-modal{
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.030));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Shadow system (metal/glass):
   Some browsers render big, soft drop-shadows oddly when combined with
   animated fixed backgrounds + backdrop-filter, making shadows look “out of sync”.
   Use a tighter, consistent shadow + a subtle inset highlight instead. */
:root{
  --panel-shadow: 0 10px 26px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.06);
  --panel-shadow-hover: 0 14px 32px rgba(0,0,0,0.56), inset 0 1px 0 rgba(255,255,255,0.08);
}

.card, .checkout-box, .home-card, .order-card, .feature{
  box-shadow: var(--panel-shadow) !important;
  transform: translateZ(0);
}

/* Do NOT override the modal centering transform */
.rts-modal{
  box-shadow: var(--panel-shadow) !important;
  transform: translate(-50%, -50%) !important;
}

.card:hover, .home-card:hover, .order-card:hover, .feature:hover{
  box-shadow: var(--panel-shadow-hover) !important;
  transform: translateY(-2px) !important;
}

.card, .home-card, .order-card, .feature{
  position: relative;
}

.card::before, .home-card::before, .order-card::before, .feature::before{
  content: none;
}

/* shine disabled for consistent hover */

/* Buttons: metallic, clean, with a subtle “shine” on hover */
.btn{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  color: rgba(255,255,255,0.96);
}

.btn::after{
  content:"";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 60%;
  height: 180%;
  background: linear-gradient(120deg, rgba(255,255,255,0.0), rgba(255,255,255,0.24), rgba(255,255,255,0.0));
  transform: rotate(20deg);
  opacity: 0;
  transition: opacity 180ms ease;
}

.btn:hover{
  border-color: rgba(255,255,255,0.28);
  filter: brightness(1.06);
}
.btn:hover::after{
  opacity: 1;
  animation: rtsShine 900ms ease;
}

@keyframes rtsShine{
  0%{ transform: translateX(0) rotate(20deg); }
  100%{ transform: translateX(220%) rotate(20deg); }
}

.btn-ghost{
  background: rgba(255,255,255,0.045);
}

/* Badges/pills: monochrome */
.badge{
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.07));
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}

.hero .kicker::before{
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(148,163,184,0.95));
}

.nav a.active{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
}

input:focus, textarea:focus, select:focus{
  border-color: rgba(226,232,240,0.55);
  box-shadow: 0 0 0 4px rgba(148,163,184,0.14);
}

/* Footer watermark: keep it classy */
.footer-watermark{ opacity: 0.06; filter: grayscale(1) contrast(1.05); }

@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
  .card:hover, .home-card:hover, .order-card:hover, .feature:hover{ transform: none; }
  .card::before, .home-card::before, .order-card::before, .feature::before{
  content: none;
}
  .btn:hover::after{ animation: none; }
}


/* ========== FOOTER WATERMARK ========== */
.footer{
  position: relative;
}

.footer-watermark{
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 86px;
  height: 86px;
  opacity: 0.08;
  pointer-events: none;
  filter: grayscale(1);
}

.footer-links{
  position: relative;
  z-index: 1;
}

/* ========== FOOTER WATERMARK ========== */
.footer{
  position: relative;
  overflow: hidden;
}

.footer-watermark{
  position: absolute;
  right: 14px;
  bottom: 10px;
  width: 96px;
  height: 96px;
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
  filter: grayscale(1);
}

/* ========== BRAND LOGO + FOOTER WATERMARK ========== */
.brand.has-logo::before{ display:none; }
.brand-logo{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(124,58,237,0.12);
}
/* Keep the brand name for accessibility, but hide it visually (logo-only header). */
.brand-text{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.footer{ position:relative; overflow:hidden; }
.footer-watermark{
  position:absolute;
  right: 16px;
  bottom: 10px;
  width: 92px;
  height: auto;
  opacity: 0.08;
  filter: grayscale(100%);
  pointer-events:none;
}


/* ========== RTS FINAL OVERRIDES (keep these LAST) ========== */
:root{
  --bg: #07090d;
  --surface: rgba(255,255,255,0.055);
  --surface-2: rgba(255,255,255,0.085);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(226,232,240,0.70);
  --border: rgba(255,255,255,0.14);
  --shadow: rgba(0,0,0,0.62);
  --accent: #e2e8f0;   /* silver */
  --accent-2: #94a3b8; /* steel */
}

html,body{ background: var(--bg); }

/* Canvas background layer */
#rtsBgCanvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

/* Animated grid + vignette overlays */
body::before{
  content:"";
  position: fixed;
  inset: -2px;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(900px 520px at 18% 12%, rgba(255,255,255,0.09), rgba(7,9,13,0) 62%),
    radial-gradient(820px 520px at 84% 18%, rgba(148,163,184,0.10), rgba(7,9,13,0) 60%);
  background-size: 90px 90px, 90px 90px, auto, auto;
  opacity: 0.18;
  transform: translate3d(0,0,0);
  animation: rtsGridMove 28s linear infinite;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 560px at 50% -10%, rgba(255,255,255,0.08), rgba(7,9,13,0) 65%),
    radial-gradient(900px 560px at 50% 110%, rgba(0,0,0,0.85), rgba(7,9,13,0) 60%);
  opacity: 0.55;
}

@keyframes rtsGridMove{
  0%{ background-position: 0 0, 0 0, 0 0, 0 0; }
  100%{ background-position: 240px 160px, 240px 160px, 0 0, 0 0; }
}

/* Ensure core content sits above background layers (do not touch fixed overlays/modals) */
#siteHeader, #siteFooter, .container{ position: relative; z-index: 2; }

/* Metallic/glass surfaces */
.topbar{
  background: rgba(10,12,16,0.72);
  border-bottom-color: rgba(255,255,255,0.12);
}

.card,
.checkout-box,
.home-card,
.order-card,
.feature,
.rts-modal,
.rts-addon{
  background: linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.028));
  border-color: rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
}

.card:hover,
.home-card:hover,
.order-card:hover,
.feature:hover{
  border-color: rgba(255,255,255,0.22);
}

/* Buttons: brushed-metal style with shimmer */
.btn{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.94);
}

.btn::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-40%;
  width: 40%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: rotate(20deg);
  opacity: 0;
}

.btn:hover{ filter: brightness(1.06); }
.btn:hover::after{ opacity: 1; animation: rtsShine 900ms ease; }

.btn-ghost{ background: rgba(255,255,255,0.045); }

.badge{
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.07));
  border-color: rgba(255,255,255,0.14);
}

.nav a.active{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
}

input:focus, textarea:focus, select:focus{
  border-color: rgba(226,232,240,0.55);
  box-shadow: 0 0 0 4px rgba(148,163,184,0.14);
}

.footer-watermark{ opacity: 0.06; filter: grayscale(1) contrast(1.05); }

@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
  .btn:hover::after{ animation: none; }
}


/* RTS: modal centering safety (prevents late theme overrides from breaking fixed centering) */
.rts-modal{
  transform: translate(-50%, -50%) !important;
}


/* Offline banner (catalog fallback) */
.offline-banner{
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.28);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 12px 0 14px 0;
  box-shadow: var(--panel-shadow);
}
.offline-banner strong{
  color: rgba(255,255,255,0.92);
}


/* ========== ITEM PAGE ========== */
.rts-breadcrumbs{
  margin-top: 8px;
  margin-bottom: 16px;
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}
.rts-breadcrumbs a{
  color: rgba(255,255,255,0.92);
  text-decoration: none;
}
.rts-breadcrumbs a:hover{
  text-decoration: underline;
}

.rts-item-hero{
  margin-top: 6px;
}

.rts-item-layout{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 16px;
  align-items: start;
}

.rts-item-main{
  min-width: 0;
}

.rts-item-details{
  margin-top: 14px;
}

.rts-buybox{
  position: sticky;
  top: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(0,0,0,0.18);
  padding: 14px;
}

.rts-buybox-price{
  font-weight: 950;
  font-size: 26px;
  letter-spacing: -0.4px;
  color: rgba(255,255,255,0.97);
}

@media (max-width: 920px){
  .rts-item-layout{
    grid-template-columns: 1fr;
  }
  .rts-buybox{
    position: static;
  }
}


/* ========== DASHBOARD / CLIENT AREA ENHANCEMENTS ========== */
.stack{
  display: grid;
  gap: 12px;
}

.grid2{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 860px){
  .grid2{ grid-template-columns: 1fr 1fr; }
}

.card-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.card-row:last-child{ border-bottom: none; }

.card-row-title{
  font-weight: 900;
  letter-spacing: 0.2px;
}

.card-row-meta{
  margin-top: 4px;
  font-size: 13px;
}

.card-row-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-shrink: 0;
}

.pill-ok{
  border-color: rgba(34,197,94,0.28);
  background: rgba(34,197,94,0.10);
  color: rgba(187,247,208,0.95);
}

.pill-danger{
  border-color: rgba(248,113,113,0.28);
  background: rgba(248,113,113,0.10);
  color: rgba(254,202,202,0.95);
}

.note{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
}

.note-ok{
  border-color: rgba(34,197,94,0.25);
  background: rgba(34,197,94,0.08);
}

.note-bad{
  border-color: rgba(248,113,113,0.25);
  background: rgba(248,113,113,0.08);
}

.check{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  user-select:none;
}

.check input{
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.btn-danger{
  border-color: rgba(248,113,113,0.35);
  background: linear-gradient(135deg, rgba(248,113,113,0.95), rgba(244,63,94,0.72));
}

.btn-danger:hover{ filter: brightness(1.05); }

.danger-zone{
  border-color: rgba(248,113,113,0.22);
  background: linear-gradient(180deg, rgba(248,113,113,0.08), rgba(255,255,255,0.03));
}


/* Dashboard support tweaks */
#supportCard .actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
#supportMsg{ margin-left: 2px; }
#ticketsList .card-row{ align-items:flex-start; }
#ticketsList .card-row-meta{ font-size: 12px; }



/* ========== RTS HOTFIX: layout spacing + icon sizing (support/dashboard/catalog) ========== */

/* Utility layouts used across dashboard + support */
.stack{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.grid2{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 720px){
  .grid2{ grid-template-columns: repeat(2, 1fr); }
}

/* Dashboard & support sections were missing explicit grid styling, causing panels to “touch/overlap” */
.dashboard-grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

@media (min-width: 1020px){
  .dashboard-grid{ grid-template-columns: 1fr 1fr; }
}

.support-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

@media (min-width: 1020px){
  .support-layout{ grid-template-columns: 1.15fr 0.85fr; }
}

/* Dashboard “actions” row */
.actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}

/* Form microcopy */
.help{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
}

/* Inline notes */
.note{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.18);
  color: var(--muted);
  line-height: 1.55;
}

/* Checkbox rows */
.check{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  user-select: none;
  cursor: pointer;
}
.check input{
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

/* Pills variants used by dashboard */
.pill.pill-ghost{
  background: rgba(255,255,255,0.05);
}
.pill.pill-danger{
  border-color: rgba(248,113,113,0.32);
  color: rgba(248,113,113,0.92);
  background: rgba(248,113,113,0.08);
}

/* Danger button */
.btn.btn-danger{
  background: linear-gradient(135deg, rgba(248,113,113,0.92), rgba(239,68,68,0.70));
  border-color: rgba(248,113,113,0.28);
}
.btn.btn-danger:hover{
  filter: brightness(1.06);
  border-color: rgba(248,113,113,0.40);
}

/* Danger zone card subtle emphasis */
.danger-zone{
  border-color: rgba(248,113,113,0.18);
}

/* Offline banner (catalog fallback) */
.offline-banner{
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(248,113,113,0.22);
  background: rgba(248,113,113,0.08);
  color: rgba(255,255,255,0.86);
}

/* Support form label icons were huge (default SVG sizing). Constrain them. */
.label-row{
  display:flex;
  align-items:center;
  gap: 8px;
}
.label-icon{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,0.72);
}
.label-icon svg{
  width: 18px;
  height: 18px;
  display:block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
}

/* Feature icons (support tips) should be consistent */
.feature .icon{
  color: rgba(255,255,255,0.86);
}
.feature .icon svg{
  width: 18px;
  height: 18px;
  display:block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Catalog controls: give breathing room and keep it compact */
.catalog-controls{
  margin-bottom: 14px;
}
.catalog-controls-row{
  grid-template-columns: 1fr 260px;
}
@media (max-width: 720px){
  .catalog-controls-row{ grid-template-columns: 1fr; }
}

/* Prevent tiny screens from having cramped cards */
@media (max-width: 420px){
  .dashboard-grid, .support-layout{ gap: 16px; }
  .order-card{ padding: 14px; }
  .actions .btn{ width: 100%; }
}

/* ------------------------------------------------------------------ */
/* Custom additions for reorganised layout */

/* Layout for catalog filters (search + categories). Provides spacing and responsive wrapping. */
.rts-catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-top: 8px;
}
.rts-catalog-filters > .rts-filter {
  /* Add a small margin to separate each filter group further when wrapping */
  margin-right: 16px;
  margin-bottom: 16px;
}
.rts-catalog-filters #rtsCategoryFilter {
  /* Categories should wrap nicely and not stick to the search box */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.rts-catalog-filters #rtsCategoryFilter button {
  margin: 0;
}
.rts-filter {
  display: flex;
  flex-direction: column;
}

/* Rating summary on individual item pages. Displays average rating and total count. */
.rts-item-rating-summary {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  line-height: 1;
}
.rts-item-rating-summary span {
  margin-left: 2px;
}
.rts-item-rating-summary span.muted {
  font-size: 14px;
  color: var(--rts-muted-color, #999);
}
.rts-item-rating-summary span[aria-hidden="true"] {
  color: var(--accent);
}

/* Enhance catalog filter labels for clarity */
.rts-filter label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}

/* Style search and sort inputs for a cleaner look */
.rts-filter input[type="search"],
.rts-filter select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: inherit;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 14px;
  appearance: none;
  min-width: 150px;
}
.rts-filter select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-position: right 8px center;
  background-repeat: no-repeat;
  padding-right: 26px;
}
.rts-filter select option {
  background: #0b0f1a;
  color: inherit;
}

/* Generic SVG icon styling to avoid solid black fills */
.icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Apply consistent styling to nested paths so icons never fill black.
   Some inline SVGs specify their own fill on <path>. Override this to
   ensure stroke-only icons using the current text colour. */
.icon svg path {
  fill: none !important;
  stroke: currentColor !important;
}

/* Ensure the paths within icons are not filled. Some SVGs specify a fill
   attribute on their paths; override to keep icons outline-only and
   follow the current text colour. */
.icon svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tabbed details navigation on item pages */
.rts-tabs {
  margin-top: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.rts-tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rts-tabs li {
  margin: 0;
}
.rts-tab-btn {
  padding: 6px 10px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.78);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-size: 14px;
}
.rts-tab-btn:hover {
  color: rgba(255,255,255,0.9);
}
.rts-tab-btn.active {
  border-bottom-color: currentColor;
  color: rgba(255,255,255,1);
}
.rts-tab-content {
  margin-top: 16px;
}

/* ------------------------------------------------------------------ */
/* Reviews section styling */

.rts-reviews {
  margin-top: 24px;
}
.rts-rating-summary {
  margin-bottom: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}
/* Review list now uses card style with subtle background, border and spacing */
.rts-review-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rts-review-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 10px 12px;
}
.rts-review-rating {
  color: #f0c330;
  margin-right: 6px;
  font-size: 18px;
}
.rts-review-author {
  font-weight: 600;
  margin-right: 6px;
}
.rts-review-date {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  margin-left: auto;
}
.rts-review-comment {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
}

/* Align the author row elements and push the date to the right */
.rts-review-item > div:first-child {
  display: flex;
  align-items: center;
}

/* ------------------------------------------------------------------ */
/* Chatbot widget styles */

#rtsChatbot {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
  pointer-events: all;
}
#rtsChatbot .chat-toggle {
  background: rgba(124, 58, 237, 0.85);
  color: #ffffff;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
#rtsChatbot .chat-toggle:hover {
  background: rgba(124, 58, 237, 1);
}
#rtsChatbot .chat-window {
  position: absolute;
  bottom: 56px;
  right: 0;
  width: 280px;
  max-height: 380px;
  background: rgba(7, 12, 24, 0.98);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
#rtsChatbot .chat-window.hidden {
  display: none;
}
#rtsChatbot .chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
#rtsChatbot .chat-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 18px;
  cursor: pointer;
}
#rtsChatbot .chat-close:hover {
  color: #ffffff;
}
#rtsChatbot .chat-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px;
}
#rtsChatbot .chat-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#rtsChatbot .chat-message {
  padding: 6px 10px;
  border-radius: 6px;
  max-width: 80%;
  font-size: 14px;
  line-height: 1.4;
}
#rtsChatbot .chat-message.user {
  align-self: flex-end;
  background: rgba(124, 58, 237, 0.25);
  color: #ffffff;
}
#rtsChatbot .chat-message.bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
#rtsChatbot .chat-input {
  display: flex;
  border-top: 1px solid var(--border);
}
#rtsChatbot .chat-input input {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  padding: 8px;
  color: inherit;
  font-size: 14px;
}
#rtsChatbot .chat-input input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
#rtsChatbot .chat-input button {
  background: rgba(124, 58, 237, 0.85);
  border: none;
  color: #ffffff;
  padding: 0 12px;
  cursor: pointer;
  font-size: 14px;
}
#rtsChatbot .chat-input button:hover {
  background: rgba(124, 58, 237, 1);
}
.rts-review-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rts-review-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}
.rts-review-form select,
.rts-review-form textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: inherit;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 14px;
}
.rts-review-form button {
  width: fit-content;
}

/* ------------------------------------------------------------------ */
/* Home Top picks list styling */

/* Give the top picks list some breathing space */
.home-top-list {
  margin-top: 12px;
}

/* Override panel borders for home top list to be slightly lighter */
.home-top-list .catalog-item {
  border-color: rgba(255, 255, 255, 0.12);
}

/* Rating display in catalog panels and home top picks */
.card-rating {
  margin-top: 4px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #f0c330;
}
.card-rating .stars {
  margin-right: 4px;
}
.card-rating .rating-count {
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
}

/* Rating display on catalog list cards */
.card-rating {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  color: #f0c330;
  font-size: 14px;
}
.card-rating span {
  margin-right: 1px;
}

/* ================================================== */
/* Guides page styles */

/* Layout grid for guides on guides.html */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

/* Individual guide card */
.guide-card {
  background-color: #141414;
  border: 1px solid #262626;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.guide-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.guide-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.guide-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.guide-body h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}

.guide-body p {
  flex-grow: 1;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.4;
}

.guide-body .btn {
  align-self: flex-start;
  margin-top: 12px;
}

/* Testimonials styles */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.testimonial-card {
  background-color: #141414;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: box-shadow 0.2s ease;
}
.testimonial-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.testimonial-content {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 16px;
  line-height: 1.4;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.testimonial-author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* Community clients grid */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.client-card {
  background-color: #141414;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: box-shadow 0.2s ease;
}

.client-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.client-avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.client-info h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
}

/* Profile page styles */
.profile-card {
  background-color: #141414;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.profile-avatar img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-info {
  flex: 1;
  min-width: 200px;
}

.profile-name {
  margin: 0 0 4px 0;
  font-size: 24px;
  font-weight: 700;
}

.profile-info p {
  margin: 6px 0;
}

.client-info p {
  margin: 2px 0;
}

.client-info .small {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

/* ========== DASHBOARD SECTIONS ========== */
/* Each major dashboard section is separated by margin and has its own heading. */
.dashboard-section {
  margin-top: 40px;
}

.dashboard-section h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

/* Form select elements in dashboard use a dark theme */
.dashboard-section select,
.dashboard-section .field select,
#testimonialRating {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: inherit;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 14px;
  appearance: none;
  min-width: 150px;
}

.dashboard-section select option,
#testimonialRating option {
  background: #0b0f1a;
  color: inherit;
}

/* Dashboard tabs navigation */
.dash-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 1rem 0 2rem 0;
}

.dash-tab {
  background: #1a1a1a;
  border: 1px solid #262626;
  color: #ccc;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dash-tab:hover {
  background-color: #262626;
  color: #fff;
}

.dash-tab.active {
  /* Give the active tab a lighter grey background to improve contrast */
  background-color: #404040;
  border-color: #404040;
  color: var(--text);
}

/* Author links inside reviews */
.review-author-link {
  color: var(--accent);
  text-decoration: none;
}

.review-author-link:hover {
  text-decoration: underline;
}

/* Custom dropdown arrow for selects (testimonial rating uses this) */
#testimonialRating {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-position: right 8px center;
  background-repeat: no-repeat;
  padding-right: 26px;
}