/* ========================================================================== */
/* Sekula Electric — Cassiopeia colour layer                                  */
/* Joomla 6 / Bootstrap 5                                                     */
/* File: media/templates/site/cassiopeia/css/user.css                         */
/* ========================================================================== */

:root {
  /* Shared palette — also used by the Sekula theme for DJ-Classifieds. */
  --sekula-primary: #315cf6;
  --sekula-primary-hover: #2448d8;
  --sekula-primary-soft: #edf3ff;
  --sekula-secondary: #7047eb;
  --sekula-accent: #0c9dc8;
  --sekula-success: #0f9b7a;
  --sekula-warning: #c87914;
  --sekula-danger: #e05264;
  --sekula-page: #f4f7fb;
  --sekula-surface: #ffffff;
  --sekula-surface-muted: #f7f9fc;
  --sekula-text: #273447;
  --sekula-heading: #111827;
  --sekula-muted: #687789;
  --sekula-border: #dbe4ef;
  --sekula-border-light: #eaf0f7;

  /* Native Cassiopeia variables. */
  --cassiopeia-color-primary: var(--sekula-primary);
  --cassiopeia-color-link: var(--sekula-primary);
  --cassiopeia-color-hover: var(--sekula-primary-hover);

  /* Bootstrap 5 variables used by Joomla and extensions. */
  --bs-primary: var(--sekula-primary);
  --bs-primary-rgb: 49, 92, 246;
  --bs-secondary: var(--sekula-secondary);
  --bs-secondary-rgb: 112, 71, 235;
  --bs-success: var(--sekula-success);
  --bs-success-rgb: 15, 155, 122;
  --bs-info: var(--sekula-accent);
  --bs-info-rgb: 12, 157, 200;
  --bs-warning: var(--sekula-warning);
  --bs-warning-rgb: 200, 121, 20;
  --bs-danger: var(--sekula-danger);
  --bs-danger-rgb: 224, 82, 100;
  --bs-body-color: var(--sekula-text);
  --bs-body-color-rgb: 39, 52, 71;
  --bs-body-bg: var(--sekula-page);
  --bs-body-bg-rgb: 244, 247, 251;
  --bs-emphasis-color: var(--sekula-heading);
  --bs-emphasis-color-rgb: 17, 24, 39;
  --bs-secondary-color: var(--sekula-muted);
  --bs-border-color: var(--sekula-border);
  --bs-border-color-translucent: rgba(39, 52, 71, .14);
  --bs-link-color: var(--sekula-primary);
  --bs-link-color-rgb: 49, 92, 246;
  --bs-link-hover-color: var(--sekula-primary-hover);
  --bs-link-hover-color-rgb: 36, 72, 216;
}

/* Page */
body.site {
  background-color: var(--sekula-page);
  color: var(--sekula-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--sekula-heading);
}

a {
  color: var(--sekula-primary);
}

a:hover,
a:focus {
  color: var(--sekula-primary-hover);
}

/* Header and navigation */
.container-header-disabled {
  background-color: var(--sekula-primary);
  background-image: linear-gradient(135deg, var(--sekula-primary) 0%, var(--sekula-secondary) 100%);
  box-shadow: 0 8px 24px rgba(49, 92, 246, .18);
}
.container-header {
  box-shadow: 0 8px 24px rgba(49, 92, 246, .18);
  background-image: linear-gradient(135deg, var(--sekula-primary) 0%, var(--sekula-secondary) 100%);
  background-color: var(--sekula-primary);
  --background-image: url(https://images.pexels.com/photos/14764071/pexels-photo-14764071.jpeg?auto=compress&w=1260&h=750&dpr=1);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: center;
  background-position-y: 50%;
  height: 100px;
}
.container-header .navbar-brand,
.container-header .site-description,
.container-header .mod-menu,
.container-header .mod-menu > li > a,
.container-header .metismenu > li > a,
.container-header .navbar-toggler {
  color: #ffffff;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus,
.container-header .metismenu > li > a:hover,
.container-header .metismenu > li > a:focus,
.container-header .metismenu > li.active > a,
.container-header .metismenu > li.current > a {
  color: #ffffff;
  background-color: rgba(255, 255, 255, .13);
}

.container-header .metismenu.mod-menu .mm-collapse,
.container-header .metismenu.mod-menu .metismenu-item > ul {
  background-color: var(--sekula-surface);
  color: var(--sekula-text);
  border-color: var(--sekula-border);
  box-shadow: 0 12px 30px rgba(31, 49, 82, .14);
}

.container-header .metismenu.mod-menu .mm-collapse a,
.container-header .metismenu.mod-menu .metismenu-item > ul a {
  color: var(--sekula-text);
}

.container-header .metismenu.mod-menu .mm-collapse a:hover,
.container-header .metismenu.mod-menu .mm-collapse a:focus,
.container-header .metismenu.mod-menu .metismenu-item > ul a:hover,
.container-header .metismenu.mod-menu .metismenu-item > ul a:focus {
  background-color: var(--sekula-primary-soft);
  color: var(--sekula-primary);
}

/* Main surfaces and modules */
.card,
.blog-item,
.com-content-article,
.com-contact__container,
.login,
.registration,
.profile,
.remind,
.reset {
  background-color: var(--sekula-surface);
  color: var(--sekula-text);
  border-color: var(--sekula-border-light);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 4px 12px rgba(49, 92, 246, .05);
}

.card_padding_0 .card-body {
  padding: 0px;
}

.card-header,
.card-footer,
.blog-item .item-content,
.list-group-item {
  background-color: var(--sekula-surface);
  color: var(--sekula-text);
  border-color: var(--sekula-border-light);
}

.card-header {
  color: var(--sekula-heading);
}
.card_header_primary .card-header {
  background-image: linear-gradient(135deg, var(--sekula-primary) 0%, var(--sekula-secondary) 100%);
  color: #fff !important;
}
.bg-light,
.table-light,
.breadcrumb,
.pagination,
.com-tags-tag__category {
  --bs-bg-opacity: 1;
  background-color: var(--sekula-surface-muted) !important;
}

.text-muted,
.form-text,
.article-info,
.article-info dd,
.category-desc {
  color: var(--sekula-muted) !important;
}

/* Forms */
.form-control,
.form-select,
.choices__inner,
.input-group-text {
  background-color: var(--sekula-surface);
  color: var(--sekula-text);
  border-color: var(--sekula-border);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.choices.is-focused .choices__inner {
  color: var(--sekula-text);
  background-color: var(--sekula-surface);
  border-color: var(--sekula-primary);
  box-shadow: 0 0 0 .25rem rgba(49, 92, 246, .16);
}

.form-check-input:checked {
  background-color: var(--sekula-primary);
  border-color: var(--sekula-primary);
}

.form-control::placeholder {
  color: #9aa8b8;
}

/* Buttons */
.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--sekula-primary);
  --bs-btn-border-color: var(--sekula-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--sekula-primary-hover);
  --bs-btn-hover-border-color: var(--sekula-primary-hover);
  --bs-btn-focus-shadow-rgb: 49, 92, 246;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #1f3fbd;
  --bs-btn-active-border-color: #1f3fbd;
}

.btn-secondary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--sekula-secondary);
  --bs-btn-border-color: var(--sekula-secondary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #5e36d5;
  --bs-btn-hover-border-color: #5e36d5;
  --bs-btn-focus-shadow-rgb: 112, 71, 235;
}

.btn-outline-primary {
  --bs-btn-color: var(--sekula-primary);
  --bs-btn-border-color: var(--sekula-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--sekula-primary);
  --bs-btn-hover-border-color: var(--sekula-primary);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--sekula-primary-hover);
  --bs-btn-active-border-color: var(--sekula-primary-hover);
}

/* Tables */
.table {
  --bs-table-color: var(--sekula-text);
  --bs-table-bg: var(--sekula-surface);
  --bs-table-border-color: var(--sekula-border-light);
  --bs-table-striped-bg: var(--sekula-surface-muted);
  --bs-table-hover-bg: var(--sekula-primary-soft);
  color: var(--sekula-text);
  border-color: var(--sekula-border-light);
}

.table > thead {
  background-color: var(--sekula-surface-muted);
  color: var(--sekula-heading);
}

/* Breadcrumbs and pagination */
.breadcrumb-item,
.breadcrumb-item.active {
  color: var(--sekula-muted);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #9aa8b8;
}

.page-link {
  background-color: var(--sekula-surface);
  color: var(--sekula-primary);
  border-color: var(--sekula-border);
}

.page-link:hover,
.page-link:focus {
  background-color: var(--sekula-primary-soft);
  color: var(--sekula-primary-hover);
  border-color: #c7d5fb;
}

.active > .page-link,
.page-link.active {
  background-color: var(--sekula-primary);
  color: #ffffff;
  border-color: var(--sekula-primary);
}

/* Messages and badges */
.alert-info {
  --bs-alert-color: #075c75;
  --bs-alert-bg: #ddf4fb;
  --bs-alert-border-color: #bcebf7;
}

.alert-success {
  --bs-alert-color: #08705a;
  --bs-alert-bg: #dff8f0;
  --bs-alert-border-color: #b9eddf;
}

.alert-warning {
  --bs-alert-color: #84500d;
  --bs-alert-bg: #fff0d7;
  --bs-alert-border-color: #f7ddb2;
}

.alert-danger {
  --bs-alert-color: #9f2f40;
  --bs-alert-bg: #fde5ea;
  --bs-alert-border-color: #f8c8d1;
}

.badge.bg-primary,
.badge.text-bg-primary {
  background-color: var(--sekula-primary) !important;
  color: #ffffff !important;
}

.badge.bg-secondary,
.badge.text-bg-secondary {
  background-color: var(--sekula-secondary) !important;
  color: #ffffff !important;
}

/* Footer and utility controls */
.container-footer {
  background-color: var(--sekula-heading);
  background-image: linear-gradient(135deg, #111827 0%, #273447 100%);
  color: #d8e0e7;
}

.container-footer a {
  color: #ffffff;
}

.container-footer a:hover,
.container-footer a:focus {
  color: #b9c8ff;
}

.back-to-top-link {
  background-color: var(--sekula-primary);
  color: #ffffff;
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 8px 20px rgba(49, 92, 246, .24);
}

.back-to-top-link:hover,
.back-to-top-link:focus {
  background-color: var(--sekula-primary-hover);
  color: #ffffff;
}

/* Native browser selection. */
::selection {
  background-color: var(--sekula-primary);
  color: #ffffff;
}

.navbar-brand a.brand-logo img {
  color: #fff;
  width: 100px;
  height: auto;
  display: inline-block !important;
}

/* breadcrumb */
.mod-breadcrumbs.breadcrumb.px-3.py-2 {
  padding: 0px 0px !important;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  width: max-content;
  font-size: 12px;
}