/* =====================================================================
   HOSPITALITY — G7Bill template · core design system
   ---------------------------------------------------------------------
   Built for hotels, lodges, safari operators and recreation venues.
   Language: warm "lodge" editorial — forest green, sand & copper;
   serif display type, hairline borders, squared boutique buttons.

   Load order:  hospitality.css        tokens · base · system components
                hospitality-pages.css  page-level components
                hospitality-lodge.css  shells (public / member / auth) + home
                custom.css             per-property overrides
   Bootstrap 3 grid/JS and the plugin CSS stay underneath for function.
   ===================================================================== */

:root {
  /* brand */
  --hs-royal:       #1F4D3F;   /* forest — primary */
  --hs-royal-600:   #2A6552;
  --hs-royal-dark:  #163A30;
  --hs-royal-deep:  #10291F;
  --hs-night:       #0B1F18;
  --hs-gold:        #C8803A;   /* copper — accent */
  --hs-gold-600:    #AE6A28;
  --hs-gold-soft:   #F8EBDA;
  --hs-azure:       #2A7A63;   /* link green */
  --hs-sky:         #5FA896;
  --hs-cardinal:    #B8412F;
  --hs-cranberry:   #9C3560;
  --hs-turquoise:   #2D8F93;
  --hs-violet:      #6E5A8C;
  --hs-orange:      #D9822B;
  --hs-grass:       #4C8A4B;
  --hs-slate:       #7A8A7F;
  --hs-sand:        #E9DFC9;
  --hs-clay:        #A5502F;
  --hs-sunset:      linear-gradient(120deg, #B8412F 0%, #C8803A 55%, #E2B15C 100%);

  /* neutrals — warm */
  --hs-ink:     #1B2622;
  --hs-ink-2:   #44504A;
  --hs-muted:   #75807A;
  --hs-line:    #E8E1D3;
  --hs-line-2:  #D8CFBD;
  --hs-surface: #FFFFFF;
  --hs-canvas:  #FBF8F2;
  --hs-tint:    #F3EEE3;

  /* shape: squared boutique */
  --hs-r-xs: 2px;
  --hs-r-sm: 4px;
  --hs-r:    6px;
  --hs-r-lg: 8px;
  --hs-r-xl: 14px;
  --hs-pill: 999px;

  /* depth: soft, warm, low */
  --hs-sh-1: 0 1px 0 rgba(27, 38, 34, .04);
  --hs-sh-2: 0 6px 18px -8px rgba(27, 38, 34, .16);
  --hs-sh-3: 0 20px 40px -20px rgba(27, 38, 34, .30);
  --hs-sh-4: 0 34px 70px -26px rgba(11, 31, 24, .50);
  --hs-ring: 0 0 0 3px rgba(200, 128, 58, .28);

  --hs-ease: cubic-bezier(.22, .7, .2, 1);
  --hs-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hs-font-head: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --hs-font-ui: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --hs-top-h: 38px;
  --hs-mast-h: 108px;
  --hs-nav-h: 58px;
  --hs-side-w: 264px;
  --hs-side-w-mini: 76px;
}

/* =====================================================================
   1. BASE
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--hs-font);
  font-size: 15px;
  line-height: 1.65;
  color: var(--hs-ink);
  background: var(--hs-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  font-family: var(--hs-font-head);
  color: var(--hs-ink);
  letter-spacing: -.012em;
  line-height: 1.18;
  font-optical-sizing: auto;
}
h1, .h1 { font-weight: 600; }
h2, .h2, h3, .h3 { font-weight: 600; }
h4, h5, h6 { font-weight: 600; }
h5, h6 { font-family: var(--hs-font-ui); letter-spacing: .02em; }
p { color: var(--hs-ink-2); }
a { color: var(--hs-azure); transition: color .2s var(--hs-ease); }
a:hover, a:focus { color: var(--hs-gold-600); text-decoration: none; }
img { max-width: 100%; height: auto; }
hr { border-top-color: var(--hs-line); }
::selection { background: var(--hs-gold); color: #fff; }
:focus-visible { outline: 2px solid var(--hs-gold); outline-offset: 2px; }
.container { padding-left: 20px; padding-right: 20px; }
@media (min-width: 1300px) { .container { width: 1240px; } }

::-webkit-scrollbar { width: 11px; height: 11px; background: #EFE9DB; }
::-webkit-scrollbar-thumb { background: #B9AD91; border-radius: 11px; border: 3px solid #EFE9DB; }
::-webkit-scrollbar-thumb:hover { background: var(--hs-royal); }
html { scrollbar-color: #B9AD91 #EFE9DB; scrollbar-width: thin; }

.hs-skip {
  position: absolute; left: 12px; top: -60px; z-index: 100000;
  background: var(--hs-gold); color: #fff; font-weight: 700;
  padding: 10px 16px; border-radius: var(--hs-r-sm); transition: top .2s var(--hs-ease);
}
.hs-skip:focus { top: 12px; color: #fff; }

/* small-caps label with an ornament */
.hs-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--hs-font-ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--hs-gold-600);
}
.hs-eyebrow::before, .hs-eyebrow::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7; }
.hs-eyebrow.hs-noline::before, .hs-eyebrow.hs-noline::after { display: none; }
.hs-left .hs-eyebrow::before { display: none; }

/* brand strip (earth tones) */
.hs-ribbon {
  height: 3px;
  background: linear-gradient(90deg, var(--hs-royal) 0 40%, var(--hs-gold) 40% 62%, var(--hs-clay) 62% 78%, var(--hs-sand) 78% 100%);
}

/* hospitality-specific tiny ornament: ✦ divider */
.hs-orn { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--hs-gold); margin: 14px 0 0; }
.hs-orn::before, .hs-orn::after { content: ""; height: 1px; width: 60px; background: linear-gradient(90deg, transparent, currentColor); }
.hs-orn::after { background: linear-gradient(270deg, transparent, currentColor); }
.hs-orn i { font-size: 11px; }

/* =====================================================================
   4. SYSTEM COMPONENTS (shared views)
   ===================================================================== */
/* portlets → cards */
.portlet {
  border-radius: var(--hs-r-lg) !important; margin-bottom: 26px; background: #fff;
  box-shadow: var(--hs-sh-1); border: 1px solid var(--hs-line) !important;
}
.portlet.light, .portlet.light.bordered { padding: 18px 24px 22px; border: 1px solid var(--hs-line) !important; }
.portlet > .portlet-title { border-bottom: 1px solid var(--hs-line); margin-bottom: 0; }
.portlet > .portlet-title > .caption { font-family: var(--hs-font-head); font-weight: 700; font-size: 17px; color: var(--hs-ink); }
.portlet > .portlet-title > .caption > i, .portlet.light > .portlet-title > .caption > i {
  width: 34px; height: 34px; border-radius: 10px; display: inline-flex !important; align-items: center; justify-content: center;
  background: var(--hs-tint); color: var(--hs-royal) !important; font-size: 14px !important; margin-right: 8px; vertical-align: middle;
}
.portlet.light > .portlet-title > .caption > .caption-subject { font-weight: 700; }
.portlet.box { overflow: hidden; border: 1px solid var(--hs-line) !important; padding: 0; }
.portlet.box > .portlet-title {
  background: #fff !important; color: var(--hs-ink) !important; border-radius: var(--hs-r-lg) var(--hs-r-lg) 0 0;
  padding: 0 22px; min-height: 64px; border-bottom: 1px solid var(--hs-line) !important; position: relative;
}
.portlet.box > .portlet-title::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--hs-royal); }
.portlet.box > .portlet-title > .caption { padding: 20px 0 16px; color: var(--hs-ink) !important; }
.portlet.box > .portlet-title > .caption > i { color: var(--hs-royal) !important; }
.portlet.box > .portlet-title > .tools { padding: 22px 0 14px; }
.portlet.box > .portlet-title > .tools > a { opacity: .55; }
.portlet.box > .portlet-title > .tools > a:hover { opacity: 1; }
.portlet.box > .portlet-body { background: #fff !important; padding: 22px; border-radius: 0 0 var(--hs-r-lg) var(--hs-r-lg); }
.portlet.box > .portlet-body.form { padding: 0; }
.portlet.box.green > .portlet-title::before, .portlet.box.green-jungle > .portlet-title::before, .portlet.box.green-meadow > .portlet-title::before { background: var(--hs-turquoise); }
.portlet.box.yellow > .portlet-title::before, .portlet.box.yellow-crusta > .portlet-title::before { background: var(--hs-gold); }
.portlet.box.red > .portlet-title::before, .portlet.box.red-thunderbird > .portlet-title::before, .portlet.box.red-sunglo > .portlet-title::before { background: var(--hs-cardinal); }
.portlet.box.purple > .portlet-title::before { background: var(--hs-violet); }
.portlet.box.grey-cascade > .portlet-title::before, .portlet.box.default > .portlet-title::before, .portlet.box.dark > .portlet-title::before { background: var(--hs-slate); }
.portlet.box.green > .portlet-title > .caption > i, .portlet.box.green-jungle > .portlet-title > .caption > i { background: #e5f6f6; color: #0b7a83 !important; }
.portlet.box.yellow > .portlet-title > .caption > i { background: var(--hs-gold-soft); color: var(--hs-gold-600) !important; }
.portlet.box.red > .portlet-title > .caption > i, .portlet.box.red-thunderbird > .portlet-title > .caption > i { background: #fdecec; color: var(--hs-cardinal) !important; }
.portlet.box.purple > .portlet-title > .caption > i { background: #f5e9f6; color: var(--hs-violet) !important; }
.portlet.box.grey-cascade > .portlet-title > .caption > i { background: #eef5f3; color: var(--hs-slate) !important; }
.form .form-body, .portlet-form .form-body { padding: 22px; }
.form .form-actions, .portlet-form .form-actions {
  padding: 18px 22px; background: #f9fcfb !important; border-top: 1px solid var(--hs-line) !important;
  border-radius: 0 0 var(--hs-r-lg) var(--hs-r-lg);
}
.form-section { font-family: var(--hs-font-head); font-weight: 700; color: var(--hs-royal); border-bottom: 1px solid var(--hs-line); padding-bottom: 8px; }

/* thumbnails → cards */
.thumbnail {
  padding: 0; border: 1px solid var(--hs-line); border-radius: var(--hs-r-lg); overflow: hidden; background: #fff;
  box-shadow: var(--hs-sh-1); transition: transform .35s var(--hs-ease), box-shadow .35s var(--hs-ease);
}
.thumbnail:hover { transform: translateY(-4px); box-shadow: var(--hs-sh-3); }
.thumbnail > img, .thumbnail > a > img { width: 100%; }
.thumbnail .caption { padding: 20px 22px 22px; color: var(--hs-ink-2); }
.thumbnail .caption h3, .thumbnail .caption h4 { color: var(--hs-ink); }

/* buttons */
.btn {
  border-radius: 12px; padding: 9px 18px; font-family: var(--hs-font-head); font-weight: 700; font-size: 14px;
  letter-spacing: .005em; border-width: 1.5px;
  transition: background-color .2s var(--hs-ease), border-color .2s var(--hs-ease), color .2s var(--hs-ease), box-shadow .2s var(--hs-ease), transform .12s var(--hs-ease);
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 13px 26px; font-size: 15.5px; border-radius: 14px; }
.btn-sm { padding: 6px 13px; font-size: 13px; border-radius: 10px; }
.btn-xs { padding: 3px 9px; font-size: 12px; border-radius: 8px; }
.btn.btn-circle, .btn.ntn-circle { border-radius: var(--hs-pill) !important; }
.btn i { margin-right: 2px; }

.btn.blue:not(.btn-outline), .btn.blue-madison:not(.btn-outline), .btn.blue-hoki:not(.btn-outline), .btn.blue-steel:not(.btn-outline),
.btn.blue-sharp:not(.btn-outline), .btn.btn-primary, .btn.dark:not(.btn-outline), .btn.hs-btn-primary {
  background: var(--hs-royal); border-color: var(--hs-royal); color: #fff;
}
.btn.blue:not(.btn-outline):hover, .btn.blue-madison:not(.btn-outline):hover, .btn.blue-hoki:not(.btn-outline):hover, .btn.blue-steel:not(.btn-outline):hover,
.btn.blue-sharp:not(.btn-outline):hover, .btn.btn-primary:hover, .btn.dark:not(.btn-outline):hover, .btn.hs-btn-primary:hover,
.btn.blue:not(.btn-outline):focus, .btn.btn-primary:focus {
  background: var(--hs-royal-dark); border-color: var(--hs-royal-dark); color: #fff; box-shadow: 0 10px 22px -12px rgba(36, 130, 103, .9);
}
.btn.yellow:not(.btn-outline), .btn.yellow-crusta:not(.btn-outline), .btn.yellow-gold:not(.btn-outline), .btn.btn-warning, .btn.hs-btn-gold {
  background: var(--hs-gold); border-color: var(--hs-gold); color: var(--hs-night);
}
.btn.yellow:not(.btn-outline):hover, .btn.yellow-crusta:not(.btn-outline):hover, .btn.yellow-gold:not(.btn-outline):hover, .btn.btn-warning:hover, .btn.hs-btn-gold:hover {
  background: var(--hs-gold-600); border-color: var(--hs-gold-600); color: var(--hs-night); box-shadow: 0 10px 22px -12px rgba(218, 122, 19, .9);
}
.btn.green:not(.btn-outline), .btn.green-jungle:not(.btn-outline), .btn.green-meadow:not(.btn-outline), .btn.green-seagreen:not(.btn-outline),
.btn.green-haze:not(.btn-outline), .btn.btn-success {
  background: var(--hs-turquoise); border-color: var(--hs-turquoise); color: #fff;
}
.btn.green:not(.btn-outline):hover, .btn.green-jungle:not(.btn-outline):hover, .btn.green-meadow:not(.btn-outline):hover, .btn.green-seagreen:not(.btn-outline):hover,
.btn.green-haze:not(.btn-outline):hover, .btn.btn-success:hover { background: #0c8690; border-color: #0c8690; color: #fff; }
.btn.red:not(.btn-outline), .btn.red-thunderbird:not(.btn-outline), .btn.red-intense:not(.btn-outline), .btn.red-sunglo:not(.btn-outline), .btn.red-mint:not(.btn-outline), .btn.btn-danger {
  background: var(--hs-cardinal); border-color: var(--hs-cardinal); color: #fff;
}
.btn.red:not(.btn-outline):hover, .btn.red-thunderbird:not(.btn-outline):hover, .btn.red-intense:not(.btn-outline):hover, .btn.red-sunglo:not(.btn-outline):hover,
.btn.red-mint:not(.btn-outline):hover, .btn.btn-danger:hover { background: #bf1f1d; border-color: #bf1f1d; color: #fff; }
.btn.purple:not(.btn-outline), .btn.purple-seance:not(.btn-outline) { background: var(--hs-violet); border-color: var(--hs-violet); color: #fff; }
.btn.purple:not(.btn-outline):hover, .btn.purple-seance:not(.btn-outline):hover { background: #761979; border-color: #761979; color: #fff; }
.btn.btn-info { background: var(--hs-sky); border-color: var(--hs-sky); color: #fff; }
.btn.default, .btn.btn-default, .btn.grey-cascade:not(.btn-outline) { background: #fff; color: var(--hs-ink); border-color: var(--hs-line-2); }
.btn.default:hover, .btn.btn-default:hover, .btn.grey-cascade:not(.btn-outline):hover { background: var(--hs-tint); color: var(--hs-royal); border-color: #bbdbd2; }
.btn.red-stripe, .btn.default.red-stripe, .btn.green-stripe { border-left: 1.5px solid var(--hs-line-2) !important; box-shadow: inset 3px 0 0 var(--hs-gold); }
.btn.btn-outline { background: transparent; }
.btn.btn-outline.blue { border-color: var(--hs-royal); color: var(--hs-royal); }
.btn.btn-outline.blue:hover { background: var(--hs-royal); color: #fff; }
.btn.btn-outline.red, .btn.btn-outline.font-red-thunderbird { border-color: var(--hs-cardinal); color: var(--hs-cardinal) !important; }
.btn.btn-outline.red:hover { background: var(--hs-cardinal); color: #fff !important; }
.btn.btn-outline.green { border-color: var(--hs-turquoise); color: #0b7a83; }
.btn.btn-outline.green:hover { background: var(--hs-turquoise); color: #fff; }
.btn.btn-outline.yellow { border-color: var(--hs-gold-600); color: var(--hs-gold-600); }
.btn.btn-outline.yellow:hover { background: var(--hs-gold); color: var(--hs-night); }
.btn.hs-btn-ghost { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn.hs-btn-ghost:hover { background: #fff; color: var(--hs-royal); border-color: #fff; }
.btn.hs-btn-soft { background: var(--hs-tint); border-color: var(--hs-tint); color: var(--hs-royal); }
.btn.hs-btn-soft:hover { background: var(--hs-royal); border-color: var(--hs-royal); color: #fff; }
.btn-group-justified { border-radius: 12px; overflow: hidden; display: flex; gap: 8px; table-layout: auto; border-collapse: separate; }
.btn-group-justified > .btn, .btn-group-justified > .btn-group { flex: 1 1 0; display: block; float: none; width: auto; border-radius: 12px !important; }
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0; }

/* forms */
.form-control,
.select2-container--bootstrap .select2-selection,
.input-group-addon {
  border: 1.5px solid var(--hs-line-2); border-radius: 12px; min-height: 44px; font-size: 14.5px; color: var(--hs-ink);
  background-color: #fff; box-shadow: none;
  transition: border-color .2s var(--hs-ease), box-shadow .2s var(--hs-ease), background-color .2s;
}
.form-control { padding: 10px 14px; height: auto; }
select.form-control { height: 44px; }
.input-sm.form-control { min-height: 34px; padding: 5px 10px; font-size: 13px; border-radius: 9px; }
.form-control:hover { border-color: #bbdbd2; }
.form-control:focus,
.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection { border-color: var(--hs-azure); box-shadow: var(--hs-ring); outline: 0; }
.form-control::placeholder { color: #c0b196; }
.form-control[disabled], .form-control[readonly] { background: #f5f9f8; }
.form-control-solid { background: #f5fbf9; border-color: #f5fbf9; }
textarea.form-control { min-height: 110px; }
.input-group .form-control:not(:first-child), .input-group-addon:not(:first-child), .input-group-btn:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group .form-control:not(:last-child), .input-group-addon:not(:last-child), .input-group-btn:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-addon { background: var(--hs-tint); color: var(--hs-royal); font-weight: 600; min-height: 0; }
.input-group-btn > .btn { min-height: 44px; }
.control-label, label { font-weight: 600; color: var(--hs-ink); font-size: 14px; }
.control-label h4 { font-size: 15px; margin: 0; }
.help-block { color: var(--hs-muted); font-size: 13px; }
.input-icon > i { color: var(--hs-slate); margin-top: 15px; }
.has-error .form-control { border-color: var(--hs-cardinal); }
.has-error .help-block, .has-error .control-label { color: var(--hs-cardinal); }
.has-success .form-control { border-color: var(--hs-turquoise); }
.required { color: var(--hs-cardinal); }
.select2-container--bootstrap .select2-selection--single { height: 44px; padding: 10px 14px; }
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] { background: var(--hs-royal); }
.select2-dropdown { border-color: var(--hs-line-2); border-radius: 12px; box-shadow: var(--hs-sh-3); overflow: hidden; }
.form-md-line-input .form-control { border-radius: 0; border-width: 0 0 1.5px; padding-left: 0; box-shadow: none !important; }
.form-md-line-input .form-control:focus ~ label:after, .form-md-line-input .form-control:focus ~ .form-control-focus:after { background: var(--hs-gold); }
.form-md-line-input .form-control.edited ~ label, .form-md-line-input .form-control:focus ~ label { color: var(--hs-azure); }
.mt-checkbox > span, .mt-radio > span { border-color: var(--hs-line-2) !important; border-radius: 6px; background: #fff; }
.mt-radio > span { border-radius: 50%; }
.mt-checkbox > input:checked ~ span, .mt-radio > input:checked ~ span { border-color: var(--hs-royal) !important; background: var(--hs-tint); }
.mt-checkbox > span:after { border-color: var(--hs-royal); }
.mt-radio > span:after { background: var(--hs-royal); }
.md-checkbox label > .check, .md-radio label > .check { border-color: var(--hs-royal); }
.md-radio label > .check { background: var(--hs-royal); }
.bootstrap-switch { border-radius: var(--hs-pill); border-color: var(--hs-line-2); }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary { background: var(--hs-royal); }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success { background: var(--hs-turquoise); }

/* tables */
.table { color: var(--hs-ink); margin-bottom: 18px; }
.table > thead > tr > th {
  background: #f7fbfa; color: var(--hs-muted); font-family: var(--hs-font-head); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--hs-line) !important; padding: 12px 14px; white-space: nowrap;
}
.table > tbody > tr > td, .table > tfoot > tr > td { padding: 12px 14px; vertical-align: middle; border-top: 1px solid var(--hs-line); }
.table-striped > tbody > tr:nth-of-type(odd) { background: #fbfcfe; }
.table-hover > tbody > tr:hover { background: #fef4ea; }
.table-bordered { border: 1px solid var(--hs-line); border-radius: var(--hs-r); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border-color: var(--hs-line); }
.table-bordered > thead > tr > th:first-child { border-top-left-radius: var(--hs-r); }
.table-bordered > thead > tr > th:last-child { border-top-right-radius: var(--hs-r); }
.table-scrollable, .table-responsive { border: 1px solid var(--hs-line); border-radius: var(--hs-r); margin: 12px 0 !important; }
.table-scrollable > .table, .table-responsive > .table { margin: 0 !important; border: 0; }
.static-info { margin-bottom: 10px; }
.static-info .name { color: var(--hs-muted); font-weight: 600; }
.static-info .value { color: var(--hs-ink); font-weight: 700; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border-radius: 10px; border: 1.5px solid var(--hs-line-2); min-height: 36px; }
.pagination > li > a, .pagination > li > span { color: var(--hs-royal); border-color: var(--hs-line); margin: 0 2px; border-radius: 10px !important; }
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > span { background: var(--hs-royal); border-color: var(--hs-royal); color: #fff; }

/* notes / alerts */
.note {
  border: 1px solid transparent; border-left: 0 !important; border-radius: var(--hs-r) !important; padding: 16px 20px 16px 22px;
  position: relative; overflow: hidden; margin: 0 0 22px;
}
.note::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: currentColor; opacity: .9; }
.note.note-info    { background: #f2faf8 !important; color: #1f6853; border-color: #d7f4ec; }
.note.note-success { background: #e9f7f8 !important; color: #10545a; border-color: #cceaec; }
.note.note-warning { background: #fef1e4 !important; color: #663909; border-color: #f8d9b7; }
.note.note-danger  { background: #fdeeee !important; color: #7a1514; border-color: #f7d0cf; }
.note h1, .note h2, .note h3, .note h4, .note p, .note .block { color: inherit; }
.note h2 { font-size: 22px; }
.alert { border-radius: var(--hs-r); border: 1px solid transparent; padding: 14px 18px; }
.alert-info    { background: #f2faf8; color: #1f6853; border-color: #d7f4ec; }
.alert-success { background: #e9f7f8; color: #10545a; border-color: #cceaec; }
.alert-warning { background: #fef1e4; color: #663909; border-color: #f8d9b7; }
.alert-danger  { background: #fdeeee; color: #7a1514; border-color: #f7d0cf; }

/* badges, labels, progress */
.badge { font-weight: 700; border-radius: var(--hs-pill); padding: 3px 8px; font-size: 11.5px; }
.badge-default { background: #e5f1ee; color: var(--hs-ink-2); }
.badge-primary, .label-primary { background: var(--hs-royal); }
.badge-success, .label-success { background: var(--hs-turquoise); }
.badge-warning, .label-warning { background: var(--hs-gold); color: var(--hs-night); }
.badge-danger, .label-danger { background: var(--hs-cardinal); }
.badge-info, .label-info { background: var(--hs-sky); }
.label { border-radius: var(--hs-pill); padding: 4px 10px; font-weight: 700; font-size: 11.5px; letter-spacing: .02em; }
.label-default { background: #e5f1ee; color: var(--hs-ink-2); }
.progress { height: 10px; border-radius: var(--hs-pill); background: #e9f3f0; box-shadow: none; overflow: hidden; }
.progress-bar, .progress-bar-primary { background: linear-gradient(90deg, var(--hs-royal), var(--hs-azure)); box-shadow: none; }
.progress-bar-warning { background: var(--hs-gold); }
.progress-bar-success { background: var(--hs-turquoise); }
.progress-bar-danger { background: var(--hs-cardinal); }

/* colour helpers (semantics kept, brand-tuned) */
.font-blue, .font-blue-madison, .font-blue-hoki, .font-blue-steel, .font-blue-dark, .font-blue-chambray, .theme-font { color: var(--hs-royal) !important; }
.font-blue-sharp, .font-blue-soft, .text-primary { color: var(--hs-azure) !important; }
.font-yellow, .font-yellow-gold, .font-yellow-crusta, .font-yellow-casablanca { color: var(--hs-gold-600) !important; }
.font-green, .font-green-jungle, .font-green-meadow, .font-green-seagreen, .font-green-haze, .font-green-sharp { color: #0b7a83 !important; }
.font-red, .font-red-thunderbird, .font-red-intense, .font-red-sunglo, .font-red-mint { color: var(--hs-cardinal) !important; }
.font-purple, .font-purple-seance, .font-purple-wisteria { color: var(--hs-violet) !important; }
.font-dark { color: var(--hs-ink) !important; }
.font-grey-cascade { color: var(--hs-slate) !important; }
.bg-blue, .bg-blue-madison, .bg-blue-hoki { background: var(--hs-royal) !important; }
.bg-yellow, .bg-yellow-gold { background: var(--hs-gold) !important; }
.bg-red, .bg-red-thunderbird { background: var(--hs-cardinal) !important; }
.bg-green, .bg-green-jungle { background: var(--hs-turquoise) !important; }
.bg-dark { background: var(--hs-night) !important; }

/* KPI tiles (dashboard-stat) */
.dashboard-stat, .dashboard-stat2 {
  position: relative; overflow: hidden; border-radius: var(--hs-r-lg) !important; margin-bottom: 24px;
  background: #fff !important; border: 1px solid var(--hs-line); box-shadow: var(--hs-sh-1);
  min-height: 128px; transition: transform .3s var(--hs-ease), box-shadow .3s var(--hs-ease);
}
.dashboard-stat:hover { transform: translateY(-3px); box-shadow: var(--hs-sh-3); }
.dashboard-stat .visual {
  position: absolute; left: 20px; top: 22px; width: 52px; height: 52px; padding: 0; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; background: var(--c, var(--hs-royal)); float: none;
  box-shadow: 0 12px 22px -12px var(--c, var(--hs-royal));
}
.dashboard-stat .visual > i { font-size: 22px !important; line-height: 1 !important; margin: 0 !important; color: #fff !important; opacity: 1 !important; }
.dashboard-stat .details { position: static !important; padding: 22px 22px 18px 90px; text-align: left; right: auto; }
.dashboard-stat .details .number { padding: 0 !important; font-family: var(--hs-font-head); font-size: 27px !important; font-weight: 800 !important; color: var(--hs-ink) !important; line-height: 1.15 !important; letter-spacing: -.02em; text-align: left; }
.dashboard-stat .details .desc { color: var(--hs-muted) !important; font-size: 14px !important; font-weight: 600; opacity: 1 !important; text-align: left; letter-spacing: 0; }
.dashboard-stat .more { background: #f8fcfb !important; color: var(--hs-royal) !important; border-top: 1px solid var(--hs-line); opacity: 1 !important; padding: 8px 22px; font-weight: 700; text-transform: none; font-size: 13px; }
.dashboard-stat::after { content: ""; position: absolute; right: -36px; bottom: -36px; width: 110px; height: 110px; border-radius: 50%; background: var(--c, var(--hs-royal)); opacity: .07; }
.dashboard-stat.blue, .dashboard-stat.blue-madison, .dashboard-stat.blue-steel { --c: var(--hs-royal); }
.dashboard-stat.green, .dashboard-stat.green-jungle, .dashboard-stat.green-meadow { --c: var(--hs-turquoise); }
.dashboard-stat.red, .dashboard-stat.red-thunderbird, .dashboard-stat.red-intense { --c: var(--hs-cardinal); }
.dashboard-stat.purple, .dashboard-stat.purple-seance { --c: var(--hs-violet); }
.dashboard-stat.yellow, .dashboard-stat.yellow-crusta { --c: var(--hs-gold-600); }
.dashboard-stat.grey-cascade, .dashboard-stat.dark { --c: var(--hs-slate); }
.widget-thumb { border-radius: var(--hs-r-lg) !important; border: 1px solid var(--hs-line); box-shadow: var(--hs-sh-1); }
.widget-thumb .widget-thumb-heading { font-family: var(--hs-font-head); color: var(--hs-muted); }
.widget-thumb .widget-thumb-body .widget-thumb-body-stat { font-family: var(--hs-font-head); color: var(--hs-ink); font-weight: 800; }
.widget-thumb .widget-thumb-icon { border-radius: 14px; }

/* tabs, panels, lists */
.nav-tabs { border-bottom: 1px solid var(--hs-line); }
.nav-tabs > li > a { border: 0 !important; border-radius: 0; margin-right: 6px; padding: 12px 16px; color: var(--hs-muted); font-weight: 700; font-family: var(--hs-font-head); background: transparent !important; box-shadow: inset 0 -2px 0 transparent; }
.nav-tabs > li > a:hover { color: var(--hs-royal); box-shadow: inset 0 -2px 0 var(--hs-line-2); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: var(--hs-royal); box-shadow: inset 0 -3px 0 var(--hs-gold); }
.tabbable-line > .nav-tabs > li.active { border-bottom-color: var(--hs-gold); }
.nav-pills > li > a { border-radius: var(--hs-pill); font-weight: 600; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background: var(--hs-royal); }
.panel { border-radius: var(--hs-r) !important; border-color: var(--hs-line); box-shadow: none; overflow: hidden; }
.panel-group .panel + .panel { margin-top: 10px; }
.panel-default > .panel-heading { background: #fff; border-color: var(--hs-line); padding: 14px 18px; }
.panel-title, .panel-title > a { font-family: var(--hs-font-head); font-weight: 700; color: var(--hs-ink); font-size: 15.5px; }
.panel-title > a.accordion-toggle:hover { color: var(--hs-royal); }
.list-group-item { border-color: var(--hs-line); }
.list-group-item:first-child { border-radius: var(--hs-r) var(--hs-r) 0 0; }
.list-group-item:last-child { border-radius: 0 0 var(--hs-r) var(--hs-r); }
.list-group-item.active, .list-group-item.active:hover { background: var(--hs-royal); border-color: var(--hs-royal); }
.breadcrumb, .page-breadcrumb { background: transparent; padding: 0; margin: 0; list-style: none; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.page-breadcrumb > li { display: inline-flex; align-items: center; gap: 6px; color: var(--hs-muted); }
.page-breadcrumb > li > a { color: var(--hs-muted); font-weight: 600; }
.page-breadcrumb > li > a:hover { color: var(--hs-royal); }
.page-breadcrumb > li > span { color: var(--hs-ink); font-weight: 700; }
.page-breadcrumb > li > i.fa-angle-right { color: #dbccb3; font-size: 12px; }

/* modals, tooltips, popovers */
.modal-content { border: 0; border-radius: var(--hs-r-lg); box-shadow: var(--hs-sh-4); overflow: hidden; }
.modal-header { background: #fff; border-bottom: 1px solid var(--hs-line); padding: 18px 22px; position: relative; }
.modal-header::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--hs-royal), var(--hs-azure) 60%, var(--hs-gold)); }
.modal-title, .modal-header h4 { font-family: var(--hs-font-head); font-weight: 700; color: var(--hs-ink); }
.modal-body { padding: 22px; }
.modal-footer { background: #f9fcfb; border-top: 1px solid var(--hs-line); padding: 14px 22px; }
.modal-backdrop.in { opacity: .6; background: var(--hs-night); }
.tooltip-inner { max-width: 700px; background: var(--hs-night); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; }
.tooltip.top .tooltip-arrow { border-top-color: var(--hs-night); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--hs-night); }
.tooltip.left .tooltip-arrow { border-left-color: var(--hs-night); }
.tooltip.right .tooltip-arrow { border-right-color: var(--hs-night); }
.popover { border-radius: var(--hs-r); border-color: var(--hs-line); box-shadow: var(--hs-sh-3); }
.popover-title { font-family: var(--hs-font-head); font-weight: 700; background: #f7fbfa; border-color: var(--hs-line); }

/* ribbons, steps, blog, pricing */
.mt-element-ribbon .ribbon.ribbon-color-primary, .mt-element-ribbon .ribbon.ribbon-color-primary > .ribbon-sub { background: var(--hs-gold); color: var(--hs-night); }
.mt-element-ribbon .ribbon.ribbon-color-primary:after { border-color: var(--hs-gold-600) !important; }
.mt-element-ribbon .ribbon.ribbon-color-success, .mt-element-ribbon .ribbon.ribbon-color-success > .ribbon-sub { background: var(--hs-royal); color: #fff; }
.mt-element-step .mt-step-col.active .mt-step-number, .mt-element-step .mt-step-col.done .mt-step-number { background: var(--hs-royal) !important; border-color: var(--hs-royal) !important; color: #fff !important; }
.mt-element-step .mt-step-col.active .mt-step-title, .mt-element-step .mt-step-col.done .mt-step-title { color: var(--hs-royal) !important; }
.blog-page .blog-container, .blog-container { border-radius: var(--hs-r-lg); overflow: hidden; box-shadow: var(--hs-sh-1); border: 1px solid var(--hs-line); background: #fff; }
.blog-post-title a, .blog-title a, .blog-post-lg .blog-post-title a { color: var(--hs-ink); font-family: var(--hs-font-head); }
.blog-post-title a:hover, .blog-title a:hover { color: var(--hs-royal); }
.blog-img-thumb img { border-radius: var(--hs-r) var(--hs-r) 0 0; }
.pricing-content-1 .price-column-container { border-radius: var(--hs-r-lg); overflow: hidden; box-shadow: var(--hs-sh-2); }
.pricing-content-1 .price-table-head { background: var(--hs-royal) !important; }
.mt-element-list .list-news.mt-list-head { background: var(--hs-royal) !important; border-radius: var(--hs-r) var(--hs-r) 0 0; }
.cbp-l-filters-button .cbp-filter-item-active { background: var(--hs-royal); border-color: var(--hs-royal); }
.m-badge { background: var(--hs-tint); color: var(--hs-royal); border-radius: var(--hs-pill); }

/* legacy Metronic quick nav: retired in this template */
.quick-nav, .quick-nav-overlay { display: none !important; }

/* =====================================================================
   8. MOTION & PRINT
   ===================================================================== */
.hs-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--hs-ease), transform .7s var(--hs-ease); }
.hs-reveal.hs-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hs-reveal { opacity: 1; transform: none; }
}
@media print {
  .hs-utility, .hs-header, .hs-footer, .hs-totop, .hs-side, .hs-appbar, .hs-app-footer, .hs-chips { display: none !important; }
  .hs-app-main { margin: 0 !important; }
  body, .hs-main, .hs-app-content { background: #fff !important; padding: 0 !important; }
  .portlet, .thumbnail, .dashboard-stat, .hs-card { box-shadow: none !important; }
}



/* KPI tile fixes over Metronic v2 spacing */
.dashboard-stat.dashboard-stat-v2 .visual, .dashboard-stat .visual { padding: 0 !important; margin: 0 !important; height: 52px !important; width: 52px !important; }
.dashboard-stat .visual > i { display: block; position: static !important; }
.dashboard-stat, .dashboard-stat2 { min-height: 104px; }
.dashboard-stat.dashboard-stat-v2 .details { margin: 0 !important; }

/* boxed portlets: remove Metronic coloured outlines */
.portlet.box.blue, .portlet.box.blue-hoki, .portlet.box.blue-madison, .portlet.box.blue-steel, .portlet.box.blue-sharp,
.portlet.box.green, .portlet.box.green-jungle, .portlet.box.green-meadow, .portlet.box.yellow, .portlet.box.red,
.portlet.box.red-thunderbird, .portlet.box.red-sunglo, .portlet.box.purple, .portlet.box.grey-cascade, .portlet.box.dark, .portlet.box.default {
  border: 1px solid var(--hs-line) !important;
}
.portlet.box > .portlet-title { border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; }


/* boxed portlets: Metronic paints the box itself — keep it white */
.portlet.box, .portlet.blue, .portlet.green, .portlet.yellow, .portlet.red, .portlet.purple, .portlet.grey-cascade, .portlet.dark { background: #fff !important; }