/* ---------------------------------------
   Base & Variables
-----------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root {
  --white-color:                  #ffffff;
  --primary-color:                #520014;
  --secondary-color:              #A1A147;
  --section-bg-color:             #f8f6f4;
  --custom-btn-bg-color:          #A1A147;
  --custom-btn-bg-hover-color:    #520014;
  --dark-color:                   #000000;
  --p-color:                      #717275;
  --border-color:                 #A1A147;
  --link-hover-color:             #520014;

  --body-font-family:             'Poppins','Inter', sans-serif;
  --title-font-family:            'Poppins','Inter', sans-serif;

  --h1-font-size:                 44px;
  --h2-font-size:                 38px;
  --h3-font-size:                 26px;
  --h4-font-size:                 22px;
  --h5-font-size:                 18px;
  --h6-font-size:                 16px;
  --p-font-size:                  12px;
  --menu-font-size:               12px;
  --btn-font-size:                12px;
  --copyright-font-size:          12px;

  --border-radius-large:          100px;
  --border-radius-medium:         20px;
  --border-radius-small:          10px;

  --font-weight-light:            300;
  --font-weight-normal:           400;
  --font-weight-medium:           500;
  --font-weight-semibold:         600;
  --font-weight-bold:             700;

  --shadow-soft:                  0 2px 8px rgba(0,0,0,0.08);
  --shadow-hover:                 0 4px 12px rgba(0,0,0,0.12);
}

/* ---------------------------------------
   Layout Resets
-----------------------------------------*/
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

body {
  background-color: var(--white-color);
  font-family: var(--body-font-family);
  font-size: 12px;
  color: #4c5258;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.page-wrapper { flex: 1; }
footer { margin-top: auto; }

a { text-decoration: none; transition: all 0.25s ease; color: var(--primary-color); }
a:hover { color: var(--link-hover-color); }

/* ---------------------------------------
   Typography
-----------------------------------------*/
h1, h2, h3, h4, h6 {
  font-family: var(--title-font-family);
  font-weight: var(--font-weight-semibold);
  color: var(--dark-color);
}

h5, h6 {
  font-family: var(--title-font-family);
  font-weight: var(--font-weight-light);
  color: var(--secondary-color);
}

h1 { font-size: var(--h1-font-size); font-weight: var(--font-weight-bold); }
h2 { font-size: var(--h2-font-size); font-weight: var(--font-weight-bold); }
h3 { font-size: var(--h3-font-size); }
h4 { font-size: var(--h4-font-size); }
h5 { font-size: var(--h5-font-size); }
h6 { font-size: var(--h6-font-size); color: var(--primary-color); }

p, ul li {
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-normal);
  color: var(--p-color);
}

tr { font-size: var(--p-font-size); color: var(--p-color); }  

/* ---------------------------------------
   Buttons
-----------------------------------------*/
.custom-btn, .custom-btn2, .custom-border-btn {
  display: inline-block;
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius-large);
  padding: 10px 25px;
  border: none;
  box-shadow: var(--shadow-soft);
}

.custom-btn {
  background-color: var(--custom-btn-bg-color);
  color: var(--white-color);
}

.custom-btn2 {
  background-color: var(--primary-color);
  color: var(--white-color);
}

.custom-btn:hover, .custom-btn2:hover {
  background-color: var(--custom-btn-bg-hover-color);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.custom-border-btn {
  background: transparent;
  border: 2px solid var(--custom-btn-bg-color);
  color: var(--custom-btn-bg-color);
}
.custom-border-btn:hover {
  background: var(--custom-btn-bg-color);
  color: var(--white-color);
}

/* Inverse/utility buttons (kept from dashboard styles, colors unchanged) */
.btn i { vertical-align: middle; font-size: 1.3rem; margin: -1em 5px -1em 0; }
.btn-inverse-primary { color:#520014;background-color:rgba(0,140,255,0.18);border-color:rgb(209,234,255); }
.btn-inverse-primary:hover,
.btn-inverse-primary:focus { color:#520014;background-color:rgba(0,140,255,0.18);border-color:rgba(0,140,255,0.18); box-shadow:0 0 0 .25rem rgba(49,132,253,.3); }

.btn-inverse-secondary{color:#75808a;background-color:rgba(117,128,138,.18);border-color:rgb(230,232,234);}
.btn-inverse-success{color:#15ca20;background-color:rgba(21,202,32,.18);border-color:rgb(212,246,214);}
.btn-inverse-success:focus{box-shadow:0 0 0 .25rem rgb(23 160 14 / 32%);}
.btn-inverse-danger{color:#fd3550;background-color:rgba(253,53,80,.18);border-color:rgb(255,218,223);}
.btn-inverse-danger:focus{box-shadow:0 0 0 .25rem rgba(225,83,97,.3);}
.btn-inverse-warning{color:#ff9700;background-color:rgba(255,151,0,.18);border-color:rgb(255,236,209);}
.btn-inverse-warning:focus{box-shadow:0 0 0 .25rem rgba(217,164,6,.3);}
.btn-inverse-info{color:#0dceec;background-color:rgba(13,206,236,.18);border-color:rgb(211,246,252);}
.btn-inverse-light{color:#a7aaaa;background-color:rgba(233,234,234,.2);border-color:rgb(251,251,251);}
.btn-inverse-dark{color:#223035;background-color:rgba(34,48,53,.2);border-color:#d7d9da;}
.btn-facebook,.btn-facebook:hover{background:#3b5998;border-color:#3b5998;color:#fff;box-shadow:0 2px 2px rgba(59,89,152,.14),0 3px 1px -2px rgba(59,89,152,.2),0 1px 5px rgba(59,89,152,.12); }
.btn-white{background:#fff;border-color:#e7eaf3}

/* ---------------------------------------
   Sections / Hero / Footer
-----------------------------------------*/
.section-padding { padding-top: 100px; padding-bottom: 100px; }
.section-bg { background-color: var(--section-bg-color); }
.section-overlay {
  background-image: linear-gradient(15deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  /* opacity: 0.85; */
}

  .brand-form__header{
    background: linear-gradient(90deg, var(--primary-color,#520014), var(--secondary-color,#7a3b42));
    border-top-left-radius:.75rem;border-top-right-radius:.75rem;padding:1rem 1.25rem;
  }
  .brand-form__icon{width:34px;height:34px;border-radius:.65rem;display:inline-flex;align-items:center;justify-content:center;background:rgba(0, 0, 0, 0.22);color:#fff;font-size:1.2rem;}
  .brand-form .info-label{font-weight:400 !important;color:#87824eff !important;}
  .brand-form .info-label.required::after{content:" *";color:#d9480f;}
  .btn-brand{background:linear-gradient(90deg,var(--primary-color,#520014),var(--secondary-color,#7a3b42));color:#fff;border:0;}
  .btn-brand:hover{filter:brightness(.96);color:#fff;}
  .mobile-progress{background:#fff;padding:.75rem 1rem;border-radius:.5rem;margin-bottom:1rem;z-index:1030;}
  .progress-card__header{background:linear-gradient(90deg,var(--primary-color,#520014),var(--secondary-color,#7a3b42));color:#fff;border-top-left-radius:.5rem;border-top-right-radius:.5rem;}
  .progress-card .list-group-item{border:0;border-bottom:1px solid #f1f5f9;}
  .progress-card .list-group-item:last-child{border-bottom:0;}
  .progress-card .bx-check-circle{color:#16a34a;}
  .progress-card .bx-x-circle{color:#9ca3af;}
  .brand-subcard{border:1px solid var(--border-color,#ececec);border-radius:.8rem;padding:1rem;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.05);}
  .table-brand{border:1px solid #eef2f7;border-radius:.6rem;overflow:hidden;}
  .table-brand-head{background:#520014 !important; color:#ffffff;}
  .table-brand thead th{font-weight:600;letter-spacing:.02em;}
  .table-brand tbody tr:hover{background:#fbfdff;}

.hero-section {
  position: relative;
  background: linear-gradient(15deg, var(--primary-color), var(--secondary-color));
  padding: 150px 0;
  color: var(--white-color);
  text-align: center;
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-soft);
}

.site-footer {
  background-color: var(--primary-color);
  padding: 50px 0;
  color: var(--white-color);
}
.site-footer a { color: var(--secondary-color); }
.site-footer a:hover { color: var(--white-color); }

/* ---------------------------------------
   Navbar / Topbar
-----------------------------------------*/
.navbar {
  background-color: var(--secondary-color);
  padding: 1rem 2rem;
  box-shadow: var(--shadow-soft);
}

.navbar-nav .nav-link {
  font-size: var(--menu-font-size);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  margin-right: 15px;
  padding: 8px 12px;
  border-radius: var(--border-radius-large);
  transition: background .25s ease, color .25s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--primary-color);
  background-color: rgba(255,255,255,0.15);
}

/* Topbar from dashboard */
.topbar {
  position: fixed; top: 0; left: 250px; right: 0; height: 60px;
  background: #fff; border-bottom: 1px solid rgb(228 228 228 / 0%);
  z-index: 10;
  box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 0px 6px 0 rgb(206 206 238 / 54%);
}
.topbar .navbar { width: 100%; height: 60px; padding-left: 1.5rem; padding-right: 1.5rem; }
.topbar .navbar .navbar-nav .nav-item { display:flex; align-items:center; justify-content:center; width:auto; height:60px; }
.topbar .navbar .navbar-nav .nav-link {
  color:#212529; font-size:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; transition:.3s cubic-bezier(0.075,.82,.165,1);
}
.topbar .navbar .navbar-nav .nav-link:hover,
.topbar .navbar .navbar-nav .nav-link:focus { background-color:#f2f9ff; color:#520014; }

/* ---------------------------------------
   Sidebar (dashboard)
-----------------------------------------*/
.wrapper { width: 100%; position: relative; }
.sidebar-wrapper {
  width: 250px; height: 100%; position: fixed; top:0; bottom:0; left:0;
  background:#fff; border-right:0 solid #fff; z-index:11;
  box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%)!important;
  transition: all .2s ease-out;
}
.sidebar-header {
  width:250px; height:68px; display:flex; align-items:center; position:fixed; top:0; bottom:0;
  padding:0 15px; z-index:5; background:#fff; border-bottom:1px solid #e4e4e4;
}
.logo-icon { width:45px; }
.logo-text { font-size:22px; margin-left:10px; margin-bottom:0; letter-spacing:1px; color:#520014; }
.toggle-icon { font-size:22px; cursor:pointer; color:#520014; }

.page-wrapper { height:100%; margin-top:60px; margin-bottom:30px; margin-left:250px; }
.page-content { padding: 1.5rem 1.5rem 0.7rem 1.5rem; }

.page-footer {
  background:#fff; left:250px; right:0; bottom:0; position:fixed; text-align:center; padding:7px; font-size:14px;
  border-top:1px solid #e4e4e4; z-index:3;
}

/* Sidebar collapse */
.wrapper.toggled .topbar { left:70px; }
.wrapper.toggled .page-wrapper { margin-left:70px; }
.wrapper.toggled .page-footer { left:70px; }

.sidebar-wrapper ul { padding:0; margin:0; list-style:none; background:0 0; }
.sidebar-wrapper .metismenu {
  background:0 0; display:flex; padding:10px; margin-top:60px; flex-direction:column;
}
.sidebar-wrapper .metismenu li+li { margin-top:5px; }
.sidebar-wrapper .metismenu li:first-child { margin-top:5px; }
.sidebar-wrapper .metismenu li:last-child { margin-bottom:5px; }
.sidebar-wrapper .metismenu>li { display:flex; flex-direction:column; position:relative; }
.sidebar-wrapper .metismenu a {
  position:relative; display:flex; align-items:center; justify-content:left; padding:6px 16px; font-size:14px; color:#211e1e;
  text-overflow:ellipsis; overflow:hidden; letter-spacing:.5px; border-radius:.25rem; transition:all .3s ease-out;
}
.sidebar-wrapper .metismenu a .parent-icon { font-size:13px; line-height:1; }
.sidebar-wrapper .metismenu a .menu-title { margin-left:10px; }
.sidebar-wrapper .metismenu ul a { padding:6px 15px 6px 20px; font-size:12px; border:0; }
.sidebar-wrapper .metismenu ul a i { margin-right:14px; }
.sidebar-wrapper .metismenu ul { background:#fff; }
.sidebar-wrapper .metismenu ul ul a { padding:8px 15px 8px 30px; }
.sidebar-wrapper .metismenu ul ul ul a { padding:8px 15px 8px 45px; }

.sidebar-wrapper .metismenu .mm-active>a,
.sidebar-wrapper .metismenu a:active,
.sidebar-wrapper .metismenu a:focus,
.sidebar-wrapper .metismenu a:hover {
  color:#520014; text-decoration:none; background-color: rgba(195,160,4,0.5);
}

.info-label{ font-size:14px; margin-bottom:5px; display:block; font-weight:600; text-transform:uppercase; color:#8d5e00; }

.menu-label { padding:20px 15px 5px 5px; color:#b0afaf; text-transform:uppercase; font-size:12px; letter-spacing:.5px; }

.metismenu .has-arrow:after {
  position:absolute; content:""; width:.5em; height:.5em; border-style:solid; border-width:1.2px 0 0 1.2px; right:15px;
  transform: rotate(-45deg) translateY(-50%); transform-origin: top; top:50%; transition: all .3s ease-out;
}

/* Desktop collapsed behavior
@media screen and (min-width:1025px){
  .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper { width:70px; }
  .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header { width:70px; justify-content:center; }
  .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .logo-text,
  .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .menu-title,
  .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu li ul,
  .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu li.menu-label,
  .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .has-arrow:after { display:none; }
  .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a { justify-content:center; }
  .email-toggle-btn, .chat-toggle-btn { display:none!important; }
} */

/* ---------------------------------------
   Forms
-----------------------------------------*/
input.form-control,
textarea.form-control,
select.form-control,
.form-control,
.form-select {
  border-radius: 0.5rem;
  padding: 10px 20px;
  border: 1px solid var(--border-color);
  font-size: var(--p-font-size);
  transition: border-color .2s ease, box-shadow .2s ease;
}

input:focus, textarea:focus, select:focus, .form-control:focus, .form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(78,35,40,0.2);
}

input::placeholder { color:#000!important; opacity:.3!important; }
.form-floating>.form-control::placeholder,
.form-floating>.form-control::-moz-placeholder { color: transparent!important; }

.error { color:#dc3545; }
form select.error, form textarea.error, form input.error,
form input.error:focus, form textarea.error:focus, form select.error:focus { border-color:#ea5455 !important; }

/* ---------------------------------------
   Cards / Modals
-----------------------------------------*/
.card { border-radius: 1rem; box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,0.05); }
.card-header {
  background: linear-gradient(to right, #520014, #a1a147);
  color:#fff; font-weight:bold; font-size:1.1rem;
  border-top-left-radius:1rem; border-top-right-radius:1rem;
}

.modal-header { background: linear-gradient(to right, #520014, #a1a147); color:#fff; }

/* ---------------------------------------
   Utilities (from both)
-----------------------------------------*/
.primary-bg { background-color: var(--primary-color); }
.secondary-bg { background-color: var(--secondary-color); }
.gradient-bg { background: linear-gradient(to right, #520014, #a1a147) !important; }

/* Back to top */
.back-to-top {
  display:none; width:40px; height:40px; line-height:40px; text-align:center; font-size:26px; color:#fff;
  position:fixed; border-radius:10px; bottom:20px; right:12px; background-color:#520014; z-index:5;
}
.back-to-top:hover { color:#fff; background-color:#000; transition: all .5s; }

/* Lots of dashboard helpers retained (unchanged colors) */
.product-show{font-size:18px;left:15px}
.product-discount{width:2.5rem;height:2.5rem;font-size:14px;background:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%}
.color-indigator-item{width:1.2rem;height:1.2rem;background:#e6e0e0;border-radius:50%;cursor:pointer}
.product-grid .card{transition:all .2s}
@media(min-width:992px){.product-grid .card:hover{margin-top:-.25rem;margin-bottom:.25rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.3)}}

.breadcrumb-title{font-size:20px;border-right:1.5px solid #aaa4a4}
.page-breadcrumb .breadcrumb li.breadcrumb-item{font-size:16px}
.page-breadcrumb .breadcrumb-item+.breadcrumb-item::before{display:inline-block;padding-right:.5rem;color:#6c757d;font-family:LineIcons;content:"\ea5c"}

.icon-badge{width:45px;height:45px;background:#f2f2f2;display:flex;align-items:center;justify-content:center;border-radius:50%}
.widgets-icons{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:#ededed;font-size:26px;border-radius:10px}
.widgets-icons-2{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:#ededed;font-size:27px;border-radius:10px}

.product-img{width:60px;height:60px;background:#fff;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid #e6e6e6}
.product-img img{width:60px;height:60px;padding:6px}
.product-img-2{width:45px;height:45px;background:#fff;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid #e6e6e6}
.product-img-2 img{width:45px;height:45px;padding:1px}

.border-light-2{border-color:rgb(255 255 255 / 12%)!important}
.product-list{position:relative;height:380px}
.product-list .row{background:#f8f9fa;transition:all .2s}
@media(min-width:992px){.product-list .row:hover{background:#fff;margin-top:-.25rem;margin-bottom:.25rem;box-shadow:0 .25rem .5rem rgba(0,0,0,.2)}}

.recent-product-img{width:40px;height:40px;background:#fbfbfb;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid #e6e6e6}
.recent-product-img img{width:40px;height:40px;padding:6px}

.theme-icons{background:#fff}
.lead-table .table{border-collapse:separate;border-spacing:0 10px}

/* File manager bits */
.fm-menu .list-group a{font-size:16px;color:#5f5f5f;display:flex;align-items:center}
.fm-menu .list-group a i{font-size:23px}
.fm-menu .list-group a:hover{background:#520014;color:#fff;transition:all .2s ease-out}
.fm-file-box{font-size:25px;background:#e9ecef;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:.25rem}
.fm-icon-box{font-size:32px;background:#fff;width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:.25rem}

/* Chips */
.chip{display:inline-block;height:32px;padding:0 12px;margin-right:1rem;margin-bottom:1rem;font-size:14px;font-weight:500;line-height:32px;color:rgba(0,0,0,.7);cursor:pointer;background:#f1f1f1;border:1px solid rgba(0,0,0,.15);border-radius:16px;transition:all .3s linear}
.chip img{float:left;width:32px;height:32px;margin:0 8px 0 -12px;border-radius:50%}
.chip .closebtn{padding-left:10px;font-weight:700;float:right;font-size:16px;cursor:pointer}
.chip.chip-md{height:42px;line-height:42px;border-radius:21px}
.chip.chip-md img{height:42px;width:42px}

/* Invoice (kept colors) */
#invoice{padding:0}
.invoice{position:relative;background:#fff;min-height:680px;padding:15px}
.invoice header{padding:10px 0;margin-bottom:20px;border-bottom:1px solid #520014}
.invoice .company-details{text-align:right}
.invoice .contacts{margin-bottom:20px}
.invoice .invoice-to{text-align:left}
.invoice .invoice-details{text-align:right}
.invoice .invoice-details .invoice-id{margin-top:0;color:#520014}
.invoice main{padding-bottom:50px}
.invoice main .thanks{margin-top:-100px;font-size:2em;margin-bottom:50px}
.invoice main .notices{padding-left:6px;border-left:6px solid #520014;background:#e7f2ff;padding:10px}
.invoice table{width:100%;border-collapse:collapse;margin-bottom:20px}
.invoice table td,.invoice table th{padding:15px;background:#eee;border-bottom:1px solid #fff}
.invoice table th{white-space:nowrap;font-weight:400;font-size:16px}
.invoice table td h3{margin:0;font-weight:400;color:#520014;font-size:1.2em}
.invoice table .qty,.invoice table .total,.invoice table .unit{text-align:right;font-size:1.2em}
.invoice table .no{color:#fff;font-size:1.6em;background:#520014}
.invoice table .unit{background:#ddd}
.invoice table .total{background:#520014;color:#fff}
.invoice table tbody tr:last-child td{border:none}
.invoice table tfoot td{background:0 0;border-bottom:none;white-space:nowrap;text-align:right;padding:10px 20px;font-size:1.2em;border-top:1px solid #aaa}
.invoice table tfoot tr:last-child td{color:#520014;font-size:1.4em;border-top:1px solid #520014}
.invoice footer{width:100%;text-align:center;color:#777;border-top:1px solid #aaa;padding:8px 0}
@media print{
  .invoice{font-size:11px!important;overflow:hidden!important}
  .invoice footer{position:absolute;bottom:10px;page-break-after:always}
  .invoice>div:last-child{page-break-before:always}
}

/* Chat & Email wrappers (unchanged but tidied) */
.chat-wrapper{width:auto;height:600px;border-radius:.25rem;position:relative;background:#fff;box-shadow:0 .1rem .7rem rgba(0,0,0,.1)}
.chat-sidebar{width:340px;height:100%;position:absolute;background:#fff;left:0;top:0;bottom:0;z-index:2;overflow:hidden;border-right:1px solid rgba(0,0,0,.125);border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}
.chat-sidebar-header{background:#fff;border-bottom:1px solid rgba(0,0,0,.125);padding:15px}
.chat-user-online{position:relative}
.chat-sidebar-header .chat-user-online:before{content:'';position:absolute;bottom:7px;left:40px;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 2px #fff;background:#16e15e}
.chat-list .chat-user-online:before{content:'';position:absolute;bottom:7px;left:36px;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 2px #fff;background:#16e15e}
.chat-content{margin-left:340px;padding:85px 15px 15px 15px;position:relative;width:auto;height:520px}
.chat-header{position:absolute;height:70px;left:340px;right:0;top:0;padding:15px;background:#fff;border-bottom:1px solid rgba(0,0,0,.125);border-top-right-radius:.25rem;z-index:1}
.chat-footer{position:absolute;height:70px;left:340px;right:0;bottom:0;padding:15px;background:#f8f9fa;border-top:1px solid rgba(0,0,0,.125);border-bottom-right-radius:.25rem}
.chat-footer-menu a,.chat-top-header-menu a{display:inline-block;width:40px;height:40px;line-height:40px;font-size:18px;color:#6c757d;text-align:center;border-radius:50%;margin:3px;background:#fff;border:1px solid rgb(0 0 0 / 15%)}
.chat-title{font-size:14px;color:#272b2f}
.chat-msg,.chat-time{font-size:13px;color:#6c757d}
.chat-list{position:relative;height:300px}
.chat-list .list-group-item{border:1px solid transparent;background:transparent}
.chat-list .list-group-item:hover{background-color:rgb(13 110 253 / .12)}
.chat-list .list-group-item.active{background-color:rgb(13 110 253 / .12)}
.chart-online{color:#16e15e}
.chat-content-leftside .chat-left-msg{width:fit-content;background:#eff2f5;padding:.8rem;border-radius:12px;max-width:480px;text-align:left;border-top-left-radius:0}
.chat-content-rightside .chat-right-msg{width:fit-content;background:#dcedff;padding:.8rem;border-radius:12px;float:right;max-width:480px;text-align:left;border-bottom-right-radius:0}
.chat-toggle-btn{width:40px;height:40px;line-height:40px;margin-right:15px;text-align:center;font-size:24px;color:#6c757d;border-radius:50%;cursor:pointer;background:#fff;border:1px solid rgb(0 0 0 / 15%)}

/* Email */
.email-wrapper{width:auto;height:600px;overflow:hidden;border-radius:.25rem;position:relative;background:#fff;box-shadow:0 .1rem .7rem rgba(0,0,0,.1)}
.email-sidebar{width:250px;height:100%;position:absolute;background:#fff;left:0;top:0;bottom:0;z-index:2;overflow:hidden;border-right:1px solid rgba(0,0,0,.125);border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}
.email-sidebar-header{background:#fff;border-bottom:1px solid rgba(0,0,0,.125);padding:15px}
.email-navigation{position:relative;padding:0;height:345px;border-bottom:1px solid rgba(0,0,0,.125)}
.email-header{position:absolute;height:70px;left:250px;right:0;top:0;padding:15px;background:#fff;border-bottom:1px solid rgba(0,0,0,.125);border-top-right-radius:.25rem;z-index:1}
.email-content{position:absolute;left:0;right:0;width:auto;top:70px;height:auto;margin-left:250px;padding:0;background:#fff;border-top-left-radius:.25rem;border-top-right-radius:.25rem}
.email-navigation a.list-group-item{color:#404142;padding:.35rem 1.25rem;background:#fff;border-bottom:1px solid transparent;transition:all .3s ease-out}
.email-navigation a.list-group-item:hover{background-color:rgb(13 110 253 / .12)}
.email-navigation a.list-group-item.active{color:#0b5ed7;font-weight:600;background-color:rgb(13 110 253 / .12)}
.email-meeting{position:absolute;left:0;right:0;bottom:0}
.email-meeting a.list-group-item{color:#404142;padding:.35rem 1.25rem;background:#fff;border-bottom:1px solid transparent}
.email-meeting a.list-group-item:hover{background-color:rgb(0 123 255 / 15%)}

/* Dropdowns / header widgets */
.dropdown-toggle-nocaret:after{display:none}
.alert-count{position:absolute;top:2px;left:22px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:12px;font-weight:500;color:#fff;background:#f62718}
.user-img{width:42px;height:42px;border-radius:50%;border:0;padding:0;}
.user-info .user-name{font-size:14px;font-weight:500;color:#ffffff}
.user-info .designattion{font-size:12px;color:#ffffff}
.user-box{display:flex;align-items:center;height:60px;border-left:2px solid #f0f0f0;border-right:2px solid #f0f0f0}

.topbar .navbar .dropdown-app .dropdown-menu{width:270px;border:1px solid #dee2e6;padding:.5rem;border-radius:16px;box-shadow:0 .5rem 1rem rgb(0 0 0 / 15%)}
.topbar .navbar .dropdown-app .dropdown-menu .app-container{position:relative;height:370px}
.topbar .navbar .dropdown-app .dropdown-menu .app-box{padding:.5rem;border-radius:1rem;transition:.2s}
.topbar .navbar .dropdown-app .dropdown-menu .app-box:hover{background:#edf0f3}
.topbar .navbar .dropdown-app .dropdown-menu .app-name{color:#212529;font-size:.64rem;text-decoration:none;font-weight:500}

.dropdown-large .dropdown-menu{width:360px;border:0;padding:0;border-radius:10px;box-shadow:0 .5rem 1rem rgba(0,0,0,.15)}
.topbar .navbar .dropdown-large .dropdown-menu::after,
.topbar .navbar .dropdown-menu::after{content:'';width:13px;height:13px;background:#fff;position:absolute;top:-6px;right:16px;transform:rotate(45deg);border-top:1px solid #ddd;border-left:1px solid #ddd}
.dropdown-large .msg-header{padding:.8rem 1rem;border-bottom:1px solid #ededed;background:#ffffff;display:flex;align-items:center;justify-content:space-between;border-top-left-radius:10px;border-top-right-radius:10px}
.dropdown-large .msg-header-badge{background-color:rgb(0 140 255 / 12%);color:#520014;padding:2px 8px;margin-bottom:0;border-radius:4px}
.dropdown-large .msg-header .msg-header-title{font-size:16px;color:#1c1b1b;margin-bottom:0;font-weight:500}
.dropdown-large .msg-footer{padding:.8rem 1rem;color:#1c1b1b;border-top:1px solid #ededed;background:0 0;font-size:14px;font-weight:500;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}
.dropdown-large .user-online:after{content:'';position:absolute;bottom:1px;right:17px;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 2px #fff;background:#16e15e}
.dropdown-large .notify{width:45px;height:45px;font-size:20px;text-align:center;border-radius:50%;background:#f1f1f1;margin-right:15px;display:flex;align-items:center;justify-content:center}
.dropdown-large .cart-product{width:50px;height:50px;display:flex;align-items:center;border:1px solid rgb(231 231 231);padding:4px;background:#fff}
.dropdown-large .cart-product img{width:100%}
.dropdown-menu{box-shadow:0 .5rem 1rem rgba(0,0,0,.15);border:0;border-radius:10px;font-size:14px}
.topbar .navbar .dropdown-menu{animation:.6s cubic-bezier(.25,.8,.25,1) animdropdown forwards}
@keyframes animdropdown{from{transform:translate3d(0,6px,0);opacity:0}to{transform:translate3d(0,0,0);opacity:1}}

/* Search bar */
.search-bar{width:30%;cursor:pointer}
.search-bar a.btn,.search-bar a.btn:focus{color:#7b8288;background:#f7f7ff;border:0}

/* Mobile toggle & switcher */
.mobile-toggle-menu{display:none;font-size:26px;color:#404142;cursor:pointer}
.switcher-wrapper{width:280px;height:100%;position:fixed;right:-280px;top:0;bottom:0;z-index:16;background:#fff;box-shadow:0 .3rem .6rem rgba(0,0,0,.13);transition:all .2s ease-out}
.switcher-btn{width:40px;height:40px;line-height:40px;font-size:24px;background:#520014;box-shadow:0 .3rem .6rem rgba(0,0,0,.13);color:#fff;text-align:center;border-top-left-radius:10px;border-bottom-left-radius:10px;position:absolute;top:40%;right:100%;cursor:pointer}
.switcher-wrapper.switcher-toggled{right:0}
.switcher-body{padding:1.25rem}
.header-colors-indigators .indigator{width:45px;height:45px;background:#f4f2f2;border-radius:10px;cursor:pointer}

/* Auth / Errors / Background helpers */
.section-authentication-signin,.authentication-forgot,.authentication-reset-password,.authentication-lock-screen,.error-404{height:100vh}
.bg-body{background-color:#f7f7ff!important}
.bg-light-primary{background-color:rgb(13 110 253 / .11)!important}
.bg-light-success{background-color:rgb(23 160 14 / .11)!important}
.bg-light-danger{background-color:rgb(244 17 39 / .11)!important}
.bg-light-warning{background-color:rgb(255 193 7 / .11)!important}
.bg-light-info{background-color:rgb(13 202 240 / 18%)!important}
.bg-light-transparent{background-color:rgb(0 0 0 / 15%)!important}

/* Gradients (unchanged) */
.bg-gradient-deepblue{background:#6a11cb;background:linear-gradient(45deg,#6a11cb,#2575fc)!important}
.bg-gradient-orange{background:#fc4a1a;background:linear-gradient(45deg,#fc4a1a,#f7b733)!important}
.bg-gradient-ohhappiness{background:#00b09b;background:linear-gradient(45deg,#00b09b,#96c93d)!important}
.bg-gradient-ibiza{background:#ee0979;background:linear-gradient(45deg,#ee0979,#ff6a00)!important}
.bg-gradient-scooter{background:#17ead9;background:linear-gradient(45deg,#17ead9,#6078ea)!important}
.bg-gradient-bloody{background:#f54ea2;background:linear-gradient(45deg,#f54ea2,#ff7676)!important}
.bg-gradient-quepal{background:#42e695;background:linear-gradient(45deg,#42e695,#3bb2b8)!important}
.bg-gradient-blooker{background:#ffdf40;background:linear-gradient(45deg,#ffdf40,#ff8359)!important}
.bg-gradient-cosmic{background:linear-gradient(to right,#8e2de2,#4a00e0)!important}
.bg-gradient-burning{background:linear-gradient(to right,#ff416c,#ff4b2b)!important}
.bg-gradient-lush{background:linear-gradient(to right,#56ab2f,#a8e063)!important}
.bg-gradient-kyoto{background:linear-gradient(to right,#f7971e,#ffd200)!important}
.bg-gradient-blues{background:linear-gradient(to right,#56ccf2,#2f80ed)!important}
.bg-gradient-moonlit{background:linear-gradient(to right,#0f2027,#203a43,#2c5364)!important}

/* Split backgrounds */
.split-bg-primary{background-color:#0c62e0;border-color:#0c62e0}
.split-bg-secondary{background-color:#515a62;border-color:#515a62}
.split-bg-success{background-color:#128e0a;border-color:#128e0a}
.split-bg-info{background-color:#0bb2d3;border-color:#0bb2d3}
.split-bg-warning{background-color:#e4ad07;border-color:#e4ad07}
.split-bg-danger{background-color:#e20e22;border-color:#e20e22}

/* Social bgs & text helpers */
.bg-facebook{background-color:#3b5998!important}
.bg-twitter{background-color:#55acee!important}
.bg-google{background-color:#e52d27!important}
.bg-linkedin{background-color:#0976b4!important}
.text-option{color:#32393f!important}
.text-facebook{color:#3b5998!important}
.text-twitter{color:#55acee!important}
.text-youtube{color:#e52d27!important}
.text-sky-light{color:#b4d2ff}

/* Spacing, radius, font-size utils */
.right-15{right:15px!important}
.font-13{font-size:13px}
.font-14{font-size:14px}
.font-18{font-size:18px}
.font-20{font-size:20px}
.font-22{font-size:22px}
.font-24{font-size:24px}
.font-30{font-size:30px}
.font-35{font-size:35px}
.font-50{font-size:50px}
.font-60{font-size:60px}
.radius-30{border-radius:30px}
.radius-10{border-radius:10px}
.radius-15{border-radius:15px}
.cursor-pointer{cursor:pointer}

/* Charts height helpers (kept) */
.chart-container-0{position:relative;height:320px}
.chart-container-1{position:relative;height:260px}
.chart-container-2{position:relative;height:220px}
.chart-container-3{position:relative;height:188px}
.chart-container-4{position:relative;height:162px}
.chart-container-5{position:relative;height:110px}
.chart-container-6{position:relative;height:205px}
.chart-container-7{position:relative;height:60px}
.chart-container-8{position:relative;height:260px}
.chart-container-9{position:relative;height:280px}
.chart-container-10{position:relative;height:300px;top:20px}
.chart-container-11{position:relative;height:280px}
.chart-container-12{position:relative;height:160px}
.chart-container-13{position:relative;height:240px}
.chart-container-14{position:relative;height:40px}

/* Tiny donut widget */
.w_chart{position:relative;display:inline-block;width:65px!important;height:65px!important;text-align:center;color:#32393f}
.w_chart canvas{position:absolute;top:0;left:0;width:65px!important;height:65px!important}
.w_percent{display:inline-block;line-height:65px!important;z-index:2}
.w_percent:after{content:'%';margin-left:.1em;font-size:.8em}

/* Page groups divider */
.row.row-group>div{border-right:1px solid rgba(0,0,0,0.12)}
.row.row-group>div:last-child{border-right:none}

/* Dash wrapper paddings */
.dash-wrapper{margin:-1.5rem -1.5rem -3.5rem -1.5rem;padding:1.5rem 1.5rem 3.5rem 1.5rem}
.dash-array-chart-box{width:105px;height:90px;position:relative;top:-15px;right:30px}

/* Forms with icon */
.input-icon .form-control{padding-left:2.5rem}
.input-icon span{font-size:16px;left:15px}

/* ---------------------------------------
   Responsive
-----------------------------------------*/
@media screen and (max-width:1280px) {
  .email-content { padding: 100px 0 0 0; }
}

@media only screen and (max-width:1199px){
  .row.row-group>div{border-right:0;border-bottom:1px solid rgba(0,0,0,.12)}
  .row.row-group>div:last-child{border-bottom:0}
}

@media screen and (max-width:1024px){
  .topbar{left:0!important}
  .mobile-toggle-menu{display:block}
  .sidebar-wrapper{left:-300px; box-shadow:none}
  .page-wrapper{margin-left:0}
  .page-footer{left:0}
  .wrapper.toggled .sidebar-wrapper{left:0}
  .wrapper.toggled .page-wrapper{margin-left:0}
  .wrapper.toggled .overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;opacity:.6;z-index:10;display:block;cursor:move;transition:all .2s ease-out}

  .chat-header{left:0;border-top-left-radius:.25rem}
  .chat-footer{left:0;border-bottom-left-radius:.25rem}
  .chat-sidebar{left:-370px}
  .chat-content{margin-left:0}
  .chat-toggled .chat-sidebar{left:0}
  .chat-toggled .overlay{position:absolute;top:0;right:0;bottom:0;left:340px;background:#000;opacity:.5;z-index:11;display:block;cursor:move;transition:all .3s ease-out}

  .email-sidebar{left:-280px}
  .email-content{margin-left:0}
  .email-header{left:0;border-top-left-radius:.25rem}
  .email-toggled .email-sidebar{left:0}
  .email-toggled .overlay{position:absolute;top:0;right:0;bottom:0;left:250px;background:#000;opacity:.5;z-index:9;display:block;cursor:move;transition:all .3s ease-out}
}

@media screen and (max-width:991px){
  .section-authentication-signin{height:100%;margin-top:6rem;margin-bottom:2rem}
  .authentication-reset-password,
  .authentication-lock-screen{height:auto;padding:2rem 1rem}
  .compose-mail-popup{width:auto;position:fixed;bottom:-30px;right:0;left:0}
}

@media screen and (max-width:767px){
  /* .user-box .user-info{display:none} */
  .authentication-forgot{height:auto;padding:2.5rem 1rem}
}

@media screen and (max-width:620px){
  /* .topbar .navbar .dropdown-menu::after{display:none} */
  .topbar .navbar .dropdown{position:static!important}
  .topbar .navbar .dropdown-menu{width:100%!important}
}

@media screen and (max-width:520px){
  .chat-footer-menu, .chat-top-header-menu{display:none}
}

/* ---------------------------------------
   Extra from your earlier file
-----------------------------------------*/
.section-padding { padding-top:100px; padding-bottom:100px; }
.custom-sidebar {
  position:fixed; top:0; left:0; width:250px; height:100%; background-color:#520014; color:white; padding:20px; z-index:1000;
}
.custom-footer {
  position:fixed; bottom:0; left:0; width:250px; background-color:#520014; color:white; text-align:center; padding:12px 10px; z-index:1000; font-size:.85rem; border-top-right-radius:.5rem;
}
body { padding-bottom:50px; } /* prevent overlap with fixed footer */

/* Profile steps bar */
.profile-steps {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-soft);
}

.profile-steps-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
}

.profile-steps-nav .nav-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .9rem;
  border-radius: var(--border-radius-large);
  background: rgba(154,149,94,.10);              /* secondary tint */
  color: var(--primary-color);
  border: 1px solid rgba(0,0,0,.06);
  transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
}

.profile-steps-nav .nav-link:hover {
  background: rgba(154,149,94,.18);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.profile-steps-nav .nav-link.active {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-hover);
}

.profile-steps-nav .nav-link i { font-size: 1rem; opacity: .9; }

/* circular index badge */
.profile-steps-nav .step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  background: var(--secondary-color);
  box-shadow: var(--shadow-soft);
}

.profile-steps-nav .nav-link.active .step-index {
  background: #ffffff;
  color: var(--primary-color);
}

/* label */
.profile-steps-nav .step-label {
  line-height: 1.1;
  font-weight: 600;
  font-size: var(--menu-font-size);
}

/* small screens: horizontal scroll pills */
@media (max-width: 992px) {
  .profile-steps-nav {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: .5rem;
    scrollbar-width: thin;
  }
  .profile-steps-nav .nav-item { flex: 0 0 auto; }
}


/* Profile steps bar */
.profile-steps {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-soft);
}

.profile-steps-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
}

.profile-steps-nav .nav-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .9rem;
  border-radius: var(--border-radius-large);
  background: rgba(154,149,94,.10);              /* secondary tint */
  color: var(--primary-color);
  border: 1px solid rgba(0,0,0,.06);
  transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
}

.profile-steps-nav .nav-link:hover {
  background: rgba(154,149,94,.18);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.profile-steps-nav .nav-link.active {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-hover);
}

.profile-steps-nav .nav-link i { font-size: 1rem; opacity: .9; }

/* circular index badge */
.profile-steps-nav .step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  background: var(--secondary-color);
  box-shadow: var(--shadow-soft);
}

.profile-steps-nav .nav-link.active .step-index {
  background: #ffffff;
  color: var(--primary-color);
}

/* label */
.profile-steps-nav .step-label {
  line-height: 1.1;
  font-weight: 600;
  font-size: var(--menu-font-size);
}

/* small screens: horizontal scroll pills */
@media (max-width: 992px) {
  .profile-steps-nav {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: .5rem;
    scrollbar-width: thin;
  }
  .profile-steps-nav .nav-item { flex: 0 0 auto; }
}
  .brand-form__header{
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-top-left-radius: .75rem; border-top-right-radius: .75rem;
    padding: 1rem 1.25rem;
  }
  .brand-form__icon{
    width:38px; height:38px; border-radius:.75rem;
    display:inline-flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,.22); color:#fff; font-size:1.2rem;
  }
  .brand-form .info-label{ font-weight:600; color:#374151; display:block; }
  .brand-form .info-label.required::after{ content:" *"; color:#d9480f; }
  .brand-form .form-control, .brand-form .form-select{
    border-radius:.6rem; border-color:#e5e7eb;
  }
  .brand-form .form-control:focus, .brand-form .form-select:focus{
    border-color: color-mix(in srgb, var(--primary-color) 55%, #fff);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary-color) 18%, transparent);
  }
  .btn-brand{
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    color:#fff; border:0;
  }
  .btn-brand:hover{ filter:brightness(.96); color:#fff; }
  .brand-subcard{
    border:1px solid var(--border-color, #ececec);
    border-radius:.8rem; padding:1rem; background:#fff;
    box-shadow: var(--shadow-soft, 0 4px 14px rgba(0,0,0,.05));
  }

  /* Hide the steps component on small screens app-wide */
@media (max-width: 767.98px) {  /* Bootstrap's md breakpoint */
  .steps-wrapper {
    display: none !important;
  }
}
.steps-wrapper {
  top: 50px; /* Adjust based on your header height */
  align-self: start; /* Align to the top of the container */
  border: 1px solid var(--border-color, #ececec);
  border-radius: var(--border-radius-medium, .5rem);
  box-shadow: var(--shadow-soft, 0 4px 14px rgba(0,0,0,.05));
  background: #fff;
  padding: 1rem;
  max-height: calc(100vh - 120px); /* Adjust based on your header height + some margin */
  overflow-y: auto; /* Enable vertical scrolling if content overflows */
}

  :root{
    --ssc-primary:#520014; --ssc-accent:#A1A147;
    --ssc-grey:#f8f6f4; --ssc-grey-2:#e9e4dc; --ssc-text:#717275;
  }
  .ssc-card{background:var(--ssc-grey);border:1px solid var(--ssc-grey-2);border-radius:16px;box-shadow:0 8px 26px rgba(78,35,40,.08);overflow:hidden}
  .ssc-card .card-header{background:linear-gradient(135deg,var(--ssc-primary),var(--ssc-accent));color:#fff;padding:1rem 1.25rem}
  .brand-form__header{background:linear-gradient(90deg,var(--ssc-primary),var(--ssc-accent));padding:1rem 1.25rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem}
  .brand-form__icon{width:38px;height:38px;border-radius:.75rem;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.22);color:#fff;font-size:1.2rem}
  .brand-form .form-control,.brand-form .form-select{background:#fff!important;color:#0f172a;border:1.5px solid #94a3b8;border-radius:.6rem;padding:.55rem .75rem}
  .brand-form .form-control:focus,.brand-form .form-select:focus{border-color:var(--ssc-primary);box-shadow:0 0 0 .18rem rgba(78,35,40,.18)}
  .info-label{font-weight:600;color:#87824eff}
  .info-label.required::after{content:" *";color:#d9480f}
  .btn-brand{background:#A1A147;border:1px solid #A1A147;color:#fff}
  .btn-brand:hover{background:#520014;border-color:#520014;color:#fff}
  .btn-outline-muted{border:1px solid var(--ssc-grey-2);color:#520014;background:#fff}
  .section-title{margin:.75rem 0 .5rem;color:#334155;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em}
  .tips-box{background:#f8fafc;border:1px solid #e5e7eb;border-radius:.5rem;padding:.75rem 1rem}

  /* === Ribbon/Chip section tag (like “Identity”) === */
  .ssc-section{background:#fff;border:1px solid var(--ssc-grey-2);border-radius:12px;padding:1rem;position:relative}
  .ssc-section.badge-title>.ssc-chip{
    position:absolute;top:-14px;left:-1px;background:#fff;
    border-left:.45rem solid var(--ssc-primary);
    border-top-right-radius:.65rem;padding:.35rem .7rem;font-weight:600;
    box-shadow:0 2px 6px rgba(0,0,0,.06)
  }
  .ssc-section.badge-title::before{
    /* content:"";position:absolute;left:.6rem;top:.7rem;bottom:.7rem;width:6px; */
    background:var(--ssc-primary);border-radius:6px;opacity:.95
  }
  .ssc-section.alt>.ssc-chip{border-left-color:var(--ssc-accent)}
  .ssc-section.alt::before{background:var(--ssc-accent)}

  /* Sticky Section Progress */
  .sticky-progress{position:sticky;top:72px;z-index:10;background:#fff;border:1px solid var(--ssc-grey-2);border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.05)}
  .sticky-progress__header{background:linear-gradient(135deg,var(--ssc-primary),var(--ssc-accent));color:#fff;padding:.75rem 1rem}
  .sticky-progress__header h6{margin:0;font-size:.95rem}
  .progress{height:.7rem;background:#efe9e7}
  .progress-bar{background:linear-gradient(90deg,var(--ssc-accent),var(--ssc-primary))}
  .list-group.small .bx-check-circle{color:#16a34a}
  .list-group.small .bx-x-circle{color:#9ca3af}
  .list-group.small .list-group-item{border:0;border-bottom:1px solid #f1f5f9}
  .list-group.small .list-group-item:last-child{border-bottom:0}

  /* @media (max-width:576px){ .navbar,.topbar,header[role="banner"]{display:none!important} } */

  :root{
    --ssc-primary:#520014; --ssc-accent:#A1A147;
    --ssc-grey:#f8f6f4; --ssc-grey-2:#e9e4dc; --ssc-text:#717275;
  }
  .ssc-card{background:var(--ssc-grey);border:1px solid var(--ssc-grey-2);border-radius:16px;box-shadow:0 8px 26px rgba(78,35,40,.08);overflow:hidden}
  .ssc-card .card-header{background:linear-gradient(135deg,var(--ssc-primary),var(--ssc-accent));color:#fff;padding:1rem 1.25rem}
  .ssc-section{background:#fff;border-radius:12px;border:1px solid var(--ssc-grey-2);padding:1rem}
  .ssc-section.badge-title{position:relative}
  .ssc-section.badge-title>.ssc-chip{position:absolute;top:-14px;left:-1px;background:#fff;border-left:.45rem solid var(--ssc-primary);border-top-right-radius:.65rem;padding:.35rem .7rem;font-weight:600;box-shadow:0 2px 6px rgba(0,0,0,.06)}
  .ssc-section.alt .ssc-chip{border-left-color:var(--ssc-accent)}
  .form-hint{font-size:.86rem;color:var(--ssc-text)}
  .tips-box{background:#f8fafc;border:1px solid #e5e7eb;border-radius:.5rem;padding:.75rem 1rem;}
  .tips-box ul{margin:0;padding-left:1.15rem}
  .input-group-text{background:#f3eceb;color:#520014;border-color:var(--ssc-grey-2)}
  .form-control,.form-select{border-color:var(--ssc-grey-2)}
  .form-control:focus,.form-select:focus{border-color:var(--ssc-accent);box-shadow:0 0 0 .2rem rgba(154,149,94,.18)}
  .btn-brand{background:#A1A147;border:1px solid #A1A147;color:#fff}
  .btn-brand:hover{background:#520014;border-color:#520014;color:#fff}
  .btn-outline-muted{border:1px solid var(--ssc-grey-2);color:#520014;background:#fff}

  /* Sticky progress (same placement & look; with checklist) */
  .sticky-progress{position:sticky;top:72px;z-index:10;background:#fff;border:1px solid var(--ssc-grey-2);border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.05)}
  .sticky-progress__header{background:linear-gradient(135deg,var(--ssc-primary),var(--ssc-accent));color:#fff;padding:.75rem 1rem}
  .sticky-progress__header h6{margin:0;font-size:.95rem}
  .progress{height:.7rem;background:#efe9e7}
  .progress-bar{background:linear-gradient(90deg,var(--ssc-accent),var(--ssc-primary))}
  .list-group.small .bx-check-circle{color:#16a34a}
  .list-group.small .bx-x-circle{color:#9ca3af}
  .list-group.small .list-group-item{border:0;border-bottom:1px solid #f1f5f9}
  .list-group.small .list-group-item:last-child{border-bottom:0}

  .existing-file i{vertical-align:middle;margin-right:.25rem}
  .existing-file .badge{vertical-align:middle}
  /* hidden groups (toggled via JS) */
  .disability-group,.employment-group,.marginalized-wrap,.marginalized-other,.marginalized-letter{display:none}
  :root{
    --ssc-primary:#520014; --ssc-accent:#A1A147;
    --ssc-grey:#f8f6f4; --ssc-grey-2:#e9e4dc; --ssc-text:#717275;
  }
  .ssc-card{background:var(--ssc-grey);border:1px solid var(--ssc-grey-2);border-radius:16px;box-shadow:0 8px 26px rgba(78,35,40,.08);overflow:hidden}
  .ssc-card .card-header{background:linear-gradient(135deg,var(--ssc-primary),var(--ssc-accent));color:#fff;padding:1rem 1.25rem}
  .brand-form__header{background:linear-gradient(90deg,var(--ssc-primary),var(--ssc-accent));padding:1rem 1.25rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem}
  .brand-form__icon{width:38px;height:38px;border-radius:.75rem;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.22);color:#fff;font-size:1.2rem}
  .brand-form .form-control,.brand-form .form-select{background:#fff!important;color:#0f172a;border:1.5px solid #94a3b8;border-radius:.6rem;padding:.55rem .75rem}
  .brand-form .form-control:focus,.brand-form .form-select:focus{border-color:var(--ssc-primary);box-shadow:0 0 0 .18rem rgba(78,35,40,.18)}
  .info-label {font-weight:600;color:#87824eff}
  tr {font-weight:600;color:#87824eff}
  .info-label.required::after{content:" *";color:#d9480f}
  .btn-brand{background:#A1A147;border:1px solid #A1A147;color:#fff}
  .btn-brand:hover{background:#520014;border-color:#520014;color:#fff}
  .btn-outline-muted{border:1px solid var(--ssc-grey-2);color:#520014;background:#fff}
  .section-title{margin:.75rem 0 .5rem;color:#334155;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em}
  .tips-box{background:#f8fafc;border:1px solid #e5e7eb;border-radius:.5rem;padding:.75rem 1rem}

  /* === Ribbon/Chip section tag (like “Identity”) === */
  .ssc-section{background:#fff;border:1px solid var(--ssc-grey-2);border-radius:12px;padding:1rem;position:relative}
  .ssc-section.badge-title>.ssc-chip{
    position:absolute;top:-14px;left:-1px;background:#fff;
    border-left:.45rem solid var(--ssc-primary);
    border-top-right-radius:.65rem;padding:.35rem .7rem;font-weight:600;
    box-shadow:0 2px 6px rgba(0,0,0,.06)
  }
  .ssc-section.badge-title::before{
    /* content:"";position:absolute;left:.6rem;top:.7rem;bottom:.7rem;width:6px; */
    background:var(--ssc-primary);border-radius:6px;opacity:.95
  }
  .ssc-section.alt>.ssc-chip{border-left-color:var(--ssc-accent)}
  .ssc-section.alt::before{background:var(--ssc-accent)}

  /* Sticky Section Progress */
  .sticky-progress{position:sticky;top:72px;z-index:10;background:#fff;border:1px solid var(--ssc-grey-2);border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.05)}
  .sticky-progress__header{background:linear-gradient(135deg,var(--ssc-primary),var(--ssc-accent));color:#fff;padding:.75rem 1rem}
  .sticky-progress__header h6{margin:0;font-size:.95rem}
  .progress{height:.7rem;background:#efe9e7}
  .progress-bar{background:linear-gradient(90deg,var(--ssc-accent),var(--ssc-primary))}
  .list-group.small .bx-check-circle{color:#16a34a}
  .list-group.small .bx-x-circle{color:#9ca3af}
  .list-group.small .list-group-item{border:0;border-bottom:1px solid #f1f5f9}
  .list-group.small .list-group-item:last-child{border-bottom:0}
     .mobile-progress{background:#fff;border:1px solid var(--ssc-grey-2);border-radius:.5rem;padding:.75rem 1rem;z-index:1030}
      .mobile-progress .progress{height:.6rem;background:#efe9e7 !important}
  /* @media (max-width:576px){ .navbar,.topbar,header[role="banner"]{display:none!important} } */