/* ===================================================================
   Digital Solution Premium UI (Single Combined File)
   =================================================================== */

/* ====== Tokens ====== */
:root{
  /* Base */
  --ds-bg: #070a13;

  /* Surfaces */
  --ds-glass: rgba(255,255,255,.06);
  --ds-glass-2: rgba(255,255,255,.08);
  --ds-card: rgba(10, 16, 28, .78);

  /* Borders */
  --ds-border: rgba(255,255,255,.12);
  --ds-soft-border: rgba(255,255,255,.10);

  /* Text */
  --ds-text: rgba(255,255,255,.92);
  --ds-muted: rgba(255,255,255,.72);
  --ds-muted-2: rgba(255,255,255,.78);

  /* Brand */
  --ds-primary: rgba(99,102,241,1);
  --ds-primary-soft: rgba(99,102,241,.18);
  --ds-success: rgba(34,197,94,1);
  --ds-danger: rgba(239,68,68,1);
  --ds-accent: #6366f1;     /* alias */
  --ds-accent2: #22c55e;    /* alias */

  /* Shape / shadow */
  --ds-radius: 22px;
  --ds-shadow: 0 18px 60px rgba(0,0,0,.35);
}

html{ scroll-behavior: smooth; }
.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.offcanvas-body{
  background: #0A182C;
  overflow-y: scroll;
  min-height: 90dvh;
}
/* ===================== Page background wrapper ===================== */
.page-wrap{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 15% -10%, rgba(99,102,241,.40), transparent 55%),
    radial-gradient(800px 420px at 85% 0%, rgba(56,189,248,.28), transparent 60%),
    radial-gradient(900px 600px at 70% 90%, rgba(16,185,129,.18), transparent 60%),
    linear-gradient(180deg, #050816 0%, #070b18 40%, #0b1022 100%);
  color: white;
}
.page-wrap::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(600px 200px at 30% 20%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(700px 260px at 80% 30%, rgba(255,255,255,.08), transparent 60%);
  pointer-events:none;
}

.ds-page-wrap{
  position: relative;
  overflow: hidden;
  min-height: 100%;
  background:
    radial-gradient(900px 420px at 15% -10%, rgba(99,102,241,.40), transparent 55%),
    radial-gradient(800px 420px at 85% 0%, rgba(56,189,248,.28), transparent 60%),
    radial-gradient(900px 600px at 70% 90%, rgba(16,185,129,.18), transparent 60%),
    linear-gradient(180deg, #050816 0%, #070b18 40%, #0b1022 100%);
  color: var(--ds-text);
}

.ds-page-wrap::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(600px 200px at 30% 20%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(700px 260px at 80% 30%, rgba(255,255,255,.08), transparent 60%);
  pointer-events:none;
}

/* ===================== Hero ===================== */
.ds-hero{
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 6.5vw, 86px) 0 26px;
  text-align: center;
}

.ds-hero--legal::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 320px at 20% 10%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(650px 280px at 80% 0%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent);
  pointer-events:none;
}

.ds-hero .container{ position: relative; z-index: 1; }

.ds-hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}

.ds-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.40rem .70rem;
  border-radius: 999px;
  border:1px solid var(--ds-border);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font-weight: 900;
  letter-spacing:.2px;
  font-size:.88rem;
}

.ds-hero-title{
  font-weight: 900;
  letter-spacing: -.6px;
  line-height: 1.05;
  margin: 14px 0 10px;
  font-size: clamp(1.9rem, 4vw, 3rem);
  color: var(--ds-text);
}

.ds-hero-subtitle{
  max-width: 860px;
  margin: 0 auto;
  color: var(--ds-muted-2);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.6;
}

.ds-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:center;
  margin-top: 12px;
}

.ds-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .70rem;
  border-radius: 999px;
  border:1px solid var(--ds-border);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.84);
  font-weight: 800;
  font-size: .9rem;
}

.ds-hero-actions{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:center;
}

.ds-btn-pill{
  border-radius: 999px !important;
  font-weight: 900;
  padding: .55rem 1rem;
}

/* ===================== Premium card ===================== */
.ds-card{
  position: relative;
  border: 1px solid var(--ds-soft-border);
  border-radius: var(--ds-radius);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

.ds-card-body{ padding: 18px; }
@media (min-width: 992px){
  .ds-card-body{ padding: 20px; }
}

/* Optional hover lift */
.ds-card-hover{
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.ds-card-hover:hover{
  transform: translateY(-4px);
  background: var(--ds-glass-2);
  border-color: rgba(99,102,241,.28);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}

/* Decorative glow (use on ads or special cards) */
.ds-card-glow::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(500px 220px at 20% 10%, rgba(99,102,241,.28), transparent 60%),
    radial-gradient(420px 220px at 80% 30%, rgba(56,189,248,.18), transparent 60%);
  pointer-events:none;
  opacity:.9;
}

/* Sticky helper (use on right side cards) */
.ds-sticky{
  position: sticky;
  top: 92px;
}
@media (max-width: 991.98px){
  .ds-sticky{ position: static; top:auto; }
}

/* ===================== Section / Doc spacing ===================== */
.ds-section{ position: relative; }

.ds-doc{ overflow: hidden; }
.ds-doc-pad{ padding: 20px; }
@media (min-width: 992px){
  .ds-doc-pad{ padding: 24px; }
}

/* Lead paragraph */
.ds-lead{
  font-size: 1.02rem;
  color: rgba(255,255,255,.82);
  line-height: 1.7;
}

/* Pretty divider */
.ds-divider{
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  margin: 18px 0;
}

/* Doc typography */
.ds-doc h3{
  font-weight: 900;
  letter-spacing: -.3px;
  margin-bottom: 12px;
  color: var(--ds-text);
}
.ds-doc h5,
.ds-h{
  font-weight: 900;
  letter-spacing: -.2px;
  color: var(--ds-text);
}
.ds-doc h5{
  margin-top: 18px;
  margin-bottom: 8px;
}

.ds-doc p,
.ds-doc li{
  color: var(--ds-muted-2);
  line-height: 1.75;
}

.ds-doc hr{
  border-color: rgba(255,255,255,.12);
  opacity: 1;
  margin: 18px 0;
}

.ds-doc a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.28);
}
.ds-doc a:hover{ border-bottom-color: rgba(255,255,255,.60); }

.ds-doc ul{ padding-left: 1.1rem; }

/* Doc section spacing + anchor offset */
.ds-doc-section{ scroll-margin-top: 110px; }

/* Section header row (number badge + title) */
.ds-section-head{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}

.ds-section-badge{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(99,102,241,.22), rgba(255,255,255,.05));
}

/* Lists */
.ds-list{
  padding-left: 1.15rem;
  margin-bottom: 0;
}
.ds-list li{
  margin: .45rem 0;
  color: rgba(255,255,255,.82);
}
.ds-list li::marker{
  color: rgba(99,102,241,.9);
}

/* Link helper class */
.ds-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-weight: 900;
  text-decoration: none;
  color: rgba(255,255,255,.92);
  border-bottom: 1px dashed rgba(255,255,255,.30);
  padding-bottom: 2px;
}
.ds-link:hover{ border-bottom-color: rgba(255,255,255,.65); }

.ds-title{
  font-weight: 900;
  letter-spacing: -.2px;
  color: var(--ds-text);
}

.ds-text-muted{ color: var(--ds-muted) !important; }

/* ===================== Callout ===================== */
.ds-callout{
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  padding: 14px;
  color: rgba(255,255,255,.78);
}

.ds-callout-info{
  border: 1px dashed rgba(99,102,241,.35);
  background: rgba(99,102,241,.10);
}

.ds-callout-icon{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95);
  flex: 0 0 auto;
}

/* ===================== TOC ===================== */
.ds-toc{ }

.ds-toc-title{
  font-weight: 950;
  margin-bottom: 10px;
  color: var(--ds-text);
}

.ds-toc-nav{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.ds-toc-link{
  display:block;
  padding: .55rem .75rem;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
  text-decoration:none;
  font-weight: 850;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.ds-toc-link:hover{
  transform: translateX(2px);
  border-color: rgba(99,102,241,.35);
  background: rgba(99,102,241,.10);
  color: rgba(255,255,255,.94);
}

.ds-toc-link.is-active{
  border-color: rgba(99,102,241,.65);
  background: rgba(99,102,241,.12);
  color: rgba(255,255,255,.94);
}

/* ===================== Contact box ===================== */
.ds-contact-box{
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.ds-contact-row{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 6px 2px;
  color: rgba(255,255,255,.82);
}
.ds-contact-row i{
  color: rgba(99,102,241,.95);
  font-size: 18px;
}

/* ===================== Ads card helpers ===================== */
.ds-ads-icon{
  width: 58px;
  height: 58px;
  border-radius: 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.92);
  font-size: 26px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

/* ===================== File Converter type cards ===================== */
.ds-select-card{
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  border-radius: 18px;
  padding: 14px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.ds-select-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.07);
  border-color: rgba(99,102,241,.45);
}
.ds-select-card.active{
  border-color: rgba(99,102,241,.75);
  background: rgba(99,102,241,.12);
}


/* Inputs on DS pages */
.ds-page-wrap .form-label{ color: rgba(255,255,255,.74); font-weight: 800; }
.ds-page-wrap .form-control{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  border-radius: 16px;
}
.ds-page-wrap .form-control:focus{
  background: rgba(255,255,255,.08);
  border-color: rgba(99,102,241,.55);
  box-shadow: 0 0 0 .2rem rgba(99,102,241,.15);
  color: rgba(255,255,255,.95);
}
.ds-page-wrap input[type="file"]::file-selector-button{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  padding: .45rem .75rem;
  border-radius: 12px;
  margin-right: .75rem;
}
.ds-page-wrap input[type="file"]::file-selector-button:hover{
  background: rgba(255,255,255,.12);
}

/* Preview blocks for image tools */
.ds-preview{ width:100%; }
.ds-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.ds-preview-box{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  overflow:hidden;
  min-height: 220px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.ds-preview-box img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
  padding: 10px;
}

/* CMS rich text (editor output) */
.ds-richtext h1, .ds-richtext h2, .ds-richtext h3, .ds-richtext h4, .ds-richtext h5{
  color: var(--ds-text);
  font-weight: 950;
  letter-spacing: -.2px;
  margin-top: 16px;
  margin-bottom: 10px;
}

.ds-richtext p{
  color: rgba(255,255,255,.82);
  line-height: 1.8;
  margin-bottom: 12px;
}

.ds-richtext ul, .ds-richtext ol{
  padding-left: 1.15rem;
  margin-bottom: 14px;
}

.ds-richtext li{
  color: rgba(255,255,255,.82);
  margin: .4rem 0;
}

.ds-richtext a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.28);
  padding-bottom: 2px;
}
.ds-richtext a:hover{
  border-bottom-color: rgba(99,102,241,.70);
}

.ds-richtext img{
  max-width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 45px rgba(0,0,0,.35);
  margin: 12px 0;
}

.ds-richtext blockquote{
  border-left: 3px solid rgba(99,102,241,.65);
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(99,102,241,.10);
  color: rgba(255,255,255,.82);
  margin: 14px 0;
}

.ds-richtext table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  margin: 14px 0;
}
.ds-richtext table th,
.ds-richtext table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
}
.ds-richtext table th{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 900;
}
/*json view */
/* ===== DS Tabs (premium) ===== */
.ds-tabs{
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.ds-tabs .nav-link{
  border: 1px solid transparent;
  border-bottom: none;
  color: rgba(255,255,255,.78);
  font-weight: 900;
  padding: .6rem .9rem;
  border-radius: 16px 16px 0 0;
  background: transparent;
}
.ds-tabs .nav-link:hover{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.04);
}
.ds-tabs .nav-link.active{
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

/* ===== Tool header / status ===== */
.ds-tool-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ds-status{
  display:inline-flex;
  align-items:center;
  padding: .35rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.82);
  font-weight: 900;
  font-size: .85rem;
}
.ds-status.is-ok{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10); }
.ds-status.is-warn{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12); }
.ds-status.is-err{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12); }

/* ===== Inputs ===== */
.ds-form-label{ font-weight: 900; color: rgba(255,255,255,.88); }
.ds-input, .ds-textarea{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
}
.ds-input:focus, .ds-textarea:focus{
  box-shadow: none;
  border-color: rgba(99,102,241,.55);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
}
.ds-textarea{ min-height: 260px; }

/* ===== Buttons (premium pill feel) ===== */
.ds-btn{
  border-radius: 999px !important;
  font-weight: 900;
  padding: .55rem 1rem;
}
.ds-btn-sm{
  border-radius: 999px !important;
  font-weight: 900;
  padding: .45rem .8rem;
}

/* ===== Output area ===== */
.ds-subcard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.ds-subcard-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.ds-subcard-body{
  padding: 14px 16px;
  max-height: 520px;
  overflow: auto;
}

/* Pretty code block */
.ds-pre{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.65;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.90);
  white-space: pre-wrap;
  word-wrap: break-word;
  outline: none;
  margin: 0;
}

/* Syntax colors */
.json-key{ color: #ff79c6; }
.json-string{ color: #f1fa8c; }
.json-number{ color: #8be9fd; }
.json-bool{ color: #bd93f9; }
.json-value{ color: rgba(255,255,255,.85); }

/* Tree view */
.ds-tree ul{ padding-left: 1.1rem; margin: 0; }
.ds-tree li{ margin: .35rem 0; color: rgba(255,255,255,.82); }
.ds-tree .tree-key{ color: #ff79c6; cursor: pointer; font-weight: 900; }
.ds-tree .tree-value{ color: #8be9fd; }
.ds-tree .tree-brace{ color: rgba(255,255,255,.55); }
.collapsed > ul{ display:none; }

/* DS Dark Mode (scoped) */
.ds-dark .ds-pre,
.ds-dark .ds-tree{
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.14);
}

/*end json viewer*/


/*start  password generator*/
/* Checks (premium) */
.ds-checks{ display:flex; flex-direction:column; gap:10px; }
.ds-check{
  display:flex;
  align-items:center;
  gap:10px;
  padding: .65rem .8rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.86);
  font-weight: 800;
}
.ds-check input{
  width: 18px; height: 18px;
  accent-color: rgba(99,102,241,1);
}
.ds-check:hover{
  border-color: rgba(99,102,241,.30);
  background: rgba(255,255,255,.05);
}

/* Monospace password look */
.ds-input-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 900;
  letter-spacing: .3px;
}

/* Input group tweaks */
.ds-input-group .btn{
  border-radius: 999px !important;
}

/* Optional pill variant */
.ds-pill-soft{
  border-color: rgba(99,102,241,.35) !important;
  background: rgba(99,102,241,.10) !important;
}
/*end password generator*/
/*property tax calculator*/
/* Tool header row */
.ds-tool-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}

/* Status pill */
.ds-status{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.82);
  font-weight: 900;
  font-size: .84rem;
}
.ds-status.is-ok{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10); }
.ds-status.is-warn{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10); }
.ds-status.is-err{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); }

/* Inputs (premium) */
.ds-input{
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.90) !important;
}
.ds-input:focus{
  border-color: rgba(99,102,241,.55) !important;
  box-shadow: 0 0 0 .2rem rgba(99,102,241,.18) !important;
  background: rgba(255,255,255,.06) !important;
}
.ds-input::placeholder{ color: rgba(255,255,255,.55); }

/* Button */
.ds-btn{
  border-radius: 999px !important;
  font-weight: 900;
  padding: .60rem 1.05rem;
}

/* Subcards */
.ds-subcard{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: none;
}
.ds-subcard-head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.ds-subcard-body{ padding: 16px; }

/* Key-value rows */
.ds-kv{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: .55rem .2rem;
  gap: 12px;
  color: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ds-kv:last-child{ border-bottom: none; }
.ds-kv-val{
  font-weight: 950;
  color: rgba(255,255,255,.92);
}

/* mini label */
.ds-mini{
  font-size: .82rem;
  font-weight: 900;
  color: rgba(255,255,255,.70);
  margin-left: 6px;
}

/* Totals */
.ds-total-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: .65rem .2rem;
  font-weight: 950;
  color: rgba(34,197,94,.92);
}
.ds-total-row--danger{
  color: rgba(239,68,68,.92);
}

/* Premium radio buttons group */
.ds-radio-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.ds-radio{
  display:flex;
  align-items:center;
  gap:10px;
  padding: .65rem .8rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  cursor:pointer;
}
.ds-radio input{
  width: 18px; height: 18px;
  accent-color: rgba(99,102,241,1);
}
.ds-radio:hover{
  border-color: rgba(99,102,241,.30);
  background: rgba(255,255,255,.05);
}

/* Soft pill variant (if not already in your common file) */
.ds-pill-soft{
  border-color: rgba(99,102,241,.35) !important;
  background: rgba(99,102,241,.10) !important;
}
/*QR Code */

/* Tabs (premium pills) */
.ds-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.ds-tab-btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .9rem;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  font-weight: 900;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.ds-tab-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(99,102,241,.35);
  background: rgba(99,102,241,.10);
  color: rgba(255,255,255,.95);
}
.ds-tab-btn.is-active,
.ds-tabs .nav-link.active{
  border-color: rgba(99,102,241,.60);
  background: rgba(99,102,241,.14);
  color: rgba(255,255,255,.96);
}

/* QR canvas box */
.ds-qr-canvas{
  width: 260px;
  height: 260px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  overflow:hidden;
}
.ds-qr-canvas img,
.ds-qr-canvas canvas{
  max-width: 250px !important;
  max-height: 250px !important;
}

/* Scanner box */
.ds-qr-reader{
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 10px;
  overflow:hidden;
}

/* QR type cards (reuse ds-select-card, just tune) */
.qr-type-card{
  user-select:none;
  font-weight: 900;
  font-size: .85rem;
  padding: 14px !important;
}
.qr-type-card.active{
  border-color: rgba(99,102,241,.75) !important;
  background: rgba(99,102,241,.12) !important;
}
.tab-pane-custom{ display:none; }
.tab-pane-custom.is-active{ display:block; }