/* Global overrides — loaded on all outlines */

/* @font-face for FA6 — required on pages where Joomla doesn't load joomla-fontawesome.min.css */
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2") format("woff2"),
         url("../../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.ttf") format("truetype");
}
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../../../../media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2") format("woff2"),
         url("../../../../media/vendor/fontawesome-free/webfonts/fa-solid-900.ttf") format("truetype");
}
@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../../../../media/vendor/fontawesome-free/webfonts/fa-brands-400.woff2") format("woff2"),
         url("../../../../media/vendor/fontawesome-free/webfonts/fa-brands-400.ttf") format("truetype");
}

/* 2px breathing room so frames never touch the viewport edges */
body {
    padding: 2px !important;
}

/* Centered contact form (ConvertForms module) */
.convertforms {
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px !important;
    overflow: hidden;
}

/* Push footer to bottom of viewport */
#g-page-surround {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#g-features,
#g-container-main {
    flex: 1 0 auto;
}

/* Compact footer */
#g-footer {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}
#g-footer .g-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
#g-footer .g-grid {
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
}
#g-footer .g-content {
    margin: 0 !important;
    padding: 0 !important;
}
#g-footer .spacer {
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
#g-footer .g-logo img {
    max-height: 30px !important;
}
#g-footer .g-copyright {
    font-size: 0.75rem;
    line-height: 1.2;
    margin: 0;
}
#g-footer .g-totop {
    padding: 0 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#g-footer .g-totop.g-totop--visible {
    opacity: 1;
    pointer-events: auto;
}
#g-footer .g-totop a {
    font-size: 0.75rem;
}

/* Center main menu in navigation bar */
#g-navigation .g-grid {
    align-items: center;
}
/* Active menu underline: yellow instead of grey */
#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container > .g-menu-item-content,
#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container > .g-selected {
    box-shadow: 0 2px 0 #ffd900 !important;
}
#g-navigation .g-main-nav .g-toplevel > li > a {
    font-size: 1.3rem !important;
}
#menu-6409-particle .g-main-nav .g-toplevel {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Yellow pill LOGIN / LOGOUT button in user menu */
#menu-3538-particle .g-toplevel > .g-menu-item > .g-menu-item-container,
#menu-3538-particle .g-toplevel > .g-menu-item > .g-menu-item-container .g-menu-item-title,
#menu-7123-particle .g-toplevel > .g-menu-item > .g-menu-item-container,
#menu-7123-particle .g-toplevel > .g-menu-item > .g-menu-item-container .g-menu-item-title,
#menu-6296-particle .g-toplevel > .g-menu-item > .g-menu-item-container,
#menu-6296-particle .g-toplevel > .g-menu-item > .g-menu-item-container .g-menu-item-title {
    font-size: 1.2rem !important;
}
.g-menu-item-318 > .g-menu-item-container,
.g-menu-item-342 > .g-menu-item-container {
    background: #ffd900 !important;
    color: #1a1a2e !important;
    border-radius: 20px;
    padding: 0.3rem 0.75rem 0.15rem !important;
    font-size: 0.85rem;
    font-weight: 700;
    transition: background 0.25s ease, transform 0.2s ease;
}
.g-menu-item-318 > .g-menu-item-container:hover,
.g-menu-item-342 > .g-menu-item-container:hover {
    background: #e6c300 !important;
    transform: scale(1.05);
}
.g-menu-item-318 > .g-menu-item-container .g-menu-item-title,
.g-menu-item-342 > .g-menu-item-container .g-menu-item-title,
.g-menu-item-318 > .g-menu-item-container i,
.g-menu-item-342 > .g-menu-item-container i {
    color: #1a1a2e !important;
}

/* Force consistent social icons (prevent Joomla FA6 shim from overriding Gantry FA4) */
#g-navigation .g-social .fa.fa-facebook::before {
    content: "\f39e" !important;
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}
#g-navigation .g-social .fa.fa-instagram::before {
    content: "\f16d" !important;
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}
#g-navigation .g-social .fa.fa-youtube-play::before {
    content: "\f167" !important;
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* Fix Gantry menu icons broken by FA version mismatch */
#g-navigation .g-menu-parent-indicator::after,
#g-offcanvas .g-menu-parent-indicator::after {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}
.g-main-nav .g-menu-item-icon,
.g-main-nav .fa,
.g-main-nav [class*="fa-"] {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}
#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container .g-menu-parent-indicator::after {
    content: "\f107" !important;
}
.g-main-nav .g-sublevel > li.g-parent .g-menu-parent-indicator::after {
    content: "\f0da" !important;
}
/* Social icons in navigation — brand font */
#g-navigation .g-social .fa::before {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* Boxed CB Login Form */
.cbLoginForm {
    max-width: 420px;
    margin: 2rem auto;
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.cbLoginForm,
.cbLoginForm a,
.cbLoginForm label,
.cbLoginForm span,
.cbLoginForm p,
.cbLoginForm .btn,
.cbLoginForm button,
.cbLoginForm input::placeholder {
    color: #000 !important;
}
.cbLoginForm a:hover {
    color: #333 !important;
}
.cbLoginForm .form-group {
    margin-bottom: 1rem;
}
.cbLoginForm .mod-login__submit .btn-primary {
    width: 100%;
    padding: 0.6rem;
    font-weight: 600;
}
.cbLoginForm .mod-login__options {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    list-style: none;
    padding-left: 0;
}
.cbLoginForm .mod-login__options li {
    padding: 0.25rem 0;
    font-size: 0.85rem;
}
.cbLoginForm .form-login-options-register a {
    display: block;
    text-align: center;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f5f5f5;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

/* HikaShop Out of Stock — red price text */
.hikashop_out_of_stock .hikashop_product_price,
.hikashop_out_of_stock .hikashop_product_price_per_unit {
    color: #dc3545 !important;
}

/* ================================================
   HIKASHOP PRODUCT DETAIL — image above, flat cart bar below
   ================================================ */

/* Product name — centered */
#hikashop_product_top_part {
    max-width: none !important;
    margin-bottom: 0 !important;
    text-align: center;
}
#hikashop_product_top_part h1 {
    width: 100% !important;
    text-align: center !important;
    font-family: 'Viga', sans-serif;
    font-size: 1.8em;
    margin-bottom: 10px;
}

/* Main container: stack image above cart bar */
.hikashop_product_page > form > .hk-row-fluid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    max-width: 720px;
    margin: 0 auto;
}

/* Image area — full width, centered, clean */
div#hikashop_product_left_part {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Main product image — generous size */
.hikashop_product_main_image {
    margin: 0 auto !important;
    padding: 0 !important;
}
.hikashop_product_main_image img {
    max-height: 520px !important;
    border-radius: 10px 10px 0 0 !important;
    box-shadow: none !important;
}

/* Thumbnail gallery */
#hikashop_small_image_div {
    background: transparent !important;
    padding: 8px 0 !important;
    gap: 6px !important;
    margin-top: 6px !important;
}

/* Hide mini description under image */
#hikashop_product_description_main_mini {
    display: none !important;
}

/* ---- Flat horizontal cart bar below image ---- */
div#hikashop_product_right_part {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 12px 20px !important;
    background: #f5f5f2 !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: none !important;
    border: 1px solid #e8e8e4 !important;
    border-top: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
}

/* Remove stray <br> that break the horizontal flow */
#hikashop_product_right_part > br {
    display: none !important;
}

/* Price — inline */
#hikashop_product_right_part .hikashop_product_price_main {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
}
#hikashop_product_right_part .hikashop_product_price {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 1.25em !important;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
}
#hikashop_product_right_part .hikashop_product_price_per_unit {
    font-size: 0.8em !important;
    color: #888;
    margin-left: 4px;
}

/* Stock count — inline */
.hikashop_product_stock_count {
    display: inline-block !important;
    font-size: 0.85em;
    color: #666;
    white-space: nowrap;
    margin: 0 !important;
}

/* Vote mini — inline, compact */
#hikashop_product_vote_mini {
    display: inline-block;
    margin: 0;
}
/* Hide empty vote div */
#hikashop_product_vote_mini:empty {
    display: none !important;
}

/* Add-to-cart area — horizontal inline layout */
#hikashop_product_quantity_main {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 0 !important;
    width: auto !important;
}

/* Quantity form wrapper — inline, no extra spacing */
#hikashop_product_quantity_main .hikashop_quantity_form {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide the quantity div when it's just a hidden input */
.hikashop_product_quantity_div.hikashop_product_quantity_add_to_cart_div_simple {
    display: none !important;
}

/* Cart button — compact pill */
#hikashop_product_right_part .hikabtn.hikacart,
#hikashop_product_right_part button.hikashop_cart_button {
    width: auto !important;
    max-width: none !important;
    padding: 10px 28px !important;
    font-size: 0.9em !important;
    font-family: 'Viga', sans-serif !important;
    border-radius: 8px !important;
    white-space: nowrap;
}

/* Hide empty/invisible elements that add gaps */
#hikashop_product_contact_main:empty,
#hikashop_product_price_with_options_main:empty {
    display: none !important;
}
#hikashop_product_id_main {
    display: none !important;
}

/* ---- Description tabs ---- */
.hikashop_product_bottom_part {
    margin-top: 24px !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Hide specifications tab */
#hikashop_show_tabular_specification_li,
#hikashop_show_tabular_specification {
    display: none !important;
}

/* Tab bar */
.hikashop_product_page ul.hikashop_tabs_ul {
    border-bottom: 2px solid #e8e8e4 !important;
}
.hikashop_product_page ul.hikashop_tabs_ul li.hikashop_tabs_li {
    font-family: 'Viga', sans-serif;
}
.hikashop_product_page ul.hikashop_tabs_ul li.hikashop_tabs_li.hikashop_tabs_li_selected {
    border-color: #ffd900 !important;
    border-bottom-color: #fff !important;
}

/* Tab content */
.hikashop_product_page div#hikashop_show_tabular_description {
    border: 1px solid #e8e8e4 !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    padding: 20px !important;
    background: #fff !important;
}

/* Responsive — narrower screens */
@media only screen and (max-width: 600px) {
    div#hikashop_product_right_part {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 10px 14px !important;
    }
}

/* ================================================
   COMMUNITY BUILDER PROFILE — constrained & themed
   ================================================ */

/* Frame around left-side module position (matches right_side in sidebar.css) */
.g-block:has(.left-side) > .g-content {
    border: 1px solid #000;
    border-radius: 8px;
    padding: 1px;
}

/* Frame around right-side module position */
.g-block:has(.right-side) > .g-content {
    border: 1px solid #000;
    border-radius: 8px;
    padding: 1px;
}

/* Force right-side menu to render vertically, centered, compact */
.right-side .nav,
.right-side ul.mod-menu {
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
}
.right-side .nav li,
.right-side ul.mod-menu li {
    width: 100%;
    margin: 0;
    padding: 0;
}
.right-side .nav li a,
.right-side ul.mod-menu li a {
    display: block;
    padding: 4px 12px;
    text-align: center;
    line-height: 1.4;
    background: #ffd900;
    color: #333;
    font-weight: 600;
    border-radius: 6px;
    margin: 2px 4px;
    transition: background 0.2s ease;
    text-decoration: none;
}
.right-side .nav li a:hover,
.right-side ul.mod-menu li a:hover {
    background: #e6c300;
    color: #333;
    text-decoration: none;
}
.right-side .nav li a.active,
.right-side ul.mod-menu li a.active {
    background: #333;
    color: #ffd900;
}

/* Profile fills the available mainbar width */
.cb_template.cbProfile {
    max-width: 100%;
    box-sizing: border-box;
}

/* Centre the grid columns when aside/sidebar blocks collapse (empty positions) */
#g-container-main > .g-container > .g-grid {
    justify-content: center;
}

/* ---- Edit Profile (userdetails) — centered layout ---- */

/* Centre the edit profile form within its column */
.view-userdetails .cb_template {
    max-width: 700px;
    margin: 0 auto;
}

/* Hide "Edit Your Details" page header */
.view-userdetails .cb_template .cb-page-header {
    display: none;
}

/* Centre tab navigation — tabbed layout uses nav-tabs, not cbEditLayoutNav */
.view-userdetails .cbTabsNav.nav-tabs {
    justify-content: center;
}

/* Stack labels above inputs for proper centering (removes col-sm-3 / col-sm-9 side-by-side) */
.view-userdetails .cb_form .form-group.row > label.col-sm-3 {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 0 !important;
    margin-bottom: 0.15rem;
}
.view-userdetails .cb_form .form-group.row > .col-sm-9,
.view-userdetails .cb_form .form-group.row > .cb_field,
.view-userdetails .cb_form .form-group.row > div[class*="col-sm-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Remove offset that pushes unlabelled fields right */
.view-userdetails .cb_form .form-group.row > .offset-sm-3,
.view-userdetails .cb_form .cbProfileEditButtons .offset-sm-3 {
    margin-left: 0 !important;
}

/* Make inputs and selects fill their container */
.view-userdetails .cb_form .form-control,
.view-userdetails .cb_form select,
.view-userdetails .cb_form textarea,
.view-userdetails .cb_form input[type="text"],
.view-userdetails .cb_form input[type="url"],
.view-userdetails .cb_form input[type="email"],
.view-userdetails .cb_form input[type="password"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Module name / URL compound fields — stack vertically */
.view-userdetails .cb_form .form-group.row .form-group.row {
    flex-wrap: wrap;
}
.view-userdetails .cb_form .form-group.row .form-group.row > label {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 0 !important;
    margin-bottom: 0.15rem;
}
.view-userdetails .cb_form .form-group.row .form-group.row > .cb_field,
.view-userdetails .cb_form .form-group.row .form-group.row > div[class*="col-sm-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Centre the save / cancel buttons */
.view-userdetails .cbProfileEditButtons > div {
    margin-left: 0 !important;
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
}

/* Hide "visible on profile" eye icons on edit page */
.view-userdetails .cbFieldIcons,
.view-userdetails .cbFieldIconsLabels {
    display: none !important;
}

/* ---- Edit Profile Picture tab — centered image preview ---- */

/* Centre the current avatar image above its controls */
.view-userdetails .cbImageFieldImage {
    text-align: center;
    margin-bottom: 1rem;
}

/* Match profile page avatar size (160×160 with yellow ring) */
.view-userdetails .cbImageFieldImage .cbImgPict {
    width: 160px;
    height: 160px;
    object-fit: cover;
}

/* Centre upload controls and gallery */
.view-userdetails .cbImageFieldUpload,
.view-userdetails .cbImageFieldGallery {
    text-align: center;
}
.view-userdetails .cbImageFieldGallery {
    justify-content: center;
}

/* Centre the "Delete" / action links below the image */
.view-userdetails .cb_field .cbImageFieldImage + div,
.view-userdetails .cb_field .form-control-plaintext {
    text-align: center;
}

/* "Remove image" button injected by avatar-edit.js */
.view-userdetails .cbAvatarRemoveBtn {
    display: block;
    margin: 8px auto 12px;
    font-size: 0.85rem;
    border-radius: 6px;
}
/* Faded preview when marked for removal */
.view-userdetails .cbImageFieldImage.cbAvatarMarkedRemoval {
    opacity: 0.3;
    filter: grayscale(100%);
    transition: opacity 0.3s, filter 0.3s;
}
/* "Will be removed" banner */
.view-userdetails .cbAvatarRemovedBanner {
    text-align: center;
    margin: 8px auto 12px;
    padding: 8px 16px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #856404;
}

/* ── Inline image cropper (avatar-edit.js + Cropper.js) ── */
.view-userdetails .cbCropperWrap {
    margin: 16px auto;
    max-width: 420px;
    text-align: center;
}
.view-userdetails .cbCropperContainer {
    max-height: 350px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #ddd;
}
.view-userdetails .cbCropperImage {
    display: block;
    max-width: 100%;
}
/* Circular crop mask for avatar (1:1) */
.view-userdetails .cbCropperCircle .cropper-view-box,
.view-userdetails .cbCropperCircle .cropper-face {
    border-radius: 50%;
}

/* ---- Canvas Home Layout (own profile) ---- */

/* User card: yellow accent top strip, clean white card */
.cb_template .cbCanvasHomeLayoutUser {
    background: #fff !important;
    border: 1px solid #e0e0e5 !important;
    border-radius: 8px !important;
    overflow: hidden;
}
.cb_template .cbCanvasHomeLayoutCanvas {
    background: linear-gradient(135deg, #ffd900 0%, #ffcc00 100%) !important;
    border-radius: 8px 8px 0 0 !important;
}
/* Username / display name */
.cb_template .cbCanvasHomeLayoutName,
.cb_template .cbCanvasLayoutTitle {
    text-align: center !important;
    padding-top: 8px;
}
/* Buttons: right-align (positioned absolutely in template) */
.cbProfile .cbCanvasLayoutInfo {
    text-align: right;
}
/* Canvas bottom needs min-height for the absolutely-positioned avatar */
.cb_template .cbCanvasLayoutBottom {
    min-height: 50px;
}
.cb_template .cbCanvasHomeLayoutUser {
    text-align: center !important;
}
.cb_template .cbProfileTitle {
    border-bottom: none !important;
    display: flex;
    justify-content: center;
    margin-bottom: 0 !important;
}
.cb_template .cbProfileTitle > h3,
.cb_template .cbProfileTitle > .cb-page-header-title,
.cb_template .cbCanvasLayout .cbCanvasLayoutBottom .cbCanvasLayoutTitle .cbProfileTitle > h3 {
    color: #333 !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1;
    background: #ffd900 !important;
    padding: 14px 48px !important;
    border-radius: 28px !important;
    margin-top: 5px !important;
    margin-bottom: 0 !important;
    text-align: center;
    overflow: visible !important;
}

/* ---- Canvas/Banner layout (viewing others) ---- */

.cb_template .cbCanvasLayout {
    border: 1px solid #e0e0e5;
    border-radius: 8px;
    overflow: hidden;
}
.cb_template .cbCanvasLayout .cbCanvasLayoutTop {
    background: #fafafa;
}
.cb_template .cbCanvasLayout .cbCanvasLayoutBottom {
    background: #fff;
}

/* ---- Tab navigation bar ---- */

.cb_template .cbTabsMenuNavBar,
.cb_template .cbMenuNavBar {
    background: #f8f8f8 !important;
    border: 1px solid #e0e0e5 !important;
    border-radius: 6px !important;
}
.cb_template .cbNavBarLink {
    color: #333 !important;
    transition: color 0.2s ease, background 0.2s ease;
}
.cb_template .cbNavBarLink:hover,
.cb_template .cbNavBarItem.active .cbNavBarLink,
.cb_template .cbNavBarItem.cbNavBarLinkActive .cbNavBarLink {
    color: #333 !important;
    background: linear-gradient(135deg, #ffd900 0%, #ffcc00 100%) !important;
    border-radius: 4px;
}

/* ---- Profile menu bar: stack buttons vertically ---- */
.cbProfile .pmMessageQuick > .d-flex {
    flex-direction: column !important;
    gap: 2px !important;
}

/* ---- Buttons ---- */

.cb_template .btn-primary,
.cb_template .hikabtn,
.cb_template .cbProfileEditLink,
.cb_template .btn-success {
    background: linear-gradient(135deg, #ffd900 0%, #ffcc00 100%) !important;
    border: none !important;
    color: #333 !important;
    font-weight: 600;
    border-radius: 6px !important;
    transition: all 0.3s ease;
}
.cb_template .btn-primary:hover,
.cb_template .hikabtn:hover,
.cb_template .cbProfileEditLink:hover,
.cb_template .btn-success:hover {
    background: linear-gradient(135deg, #ffcc00 0%, #ffb700 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 217, 0, 0.4);
}

/* Secondary / outline buttons */
.cb_template .btn-secondary,
.cb_template .btn-outline-secondary {
    background: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
    border-radius: 6px !important;
}
.cb_template .btn-secondary:hover,
.cb_template .btn-outline-secondary:hover {
    background: #eee !important;
    border-color: #bbb !important;
}

/* ---- Form fields on profile ---- */

.cb_template .form-control,
.cb_template .form-select {
    border: 1px solid #ccc;
    border-radius: 6px;
    color: #333;
}
.cb_template .form-control:focus,
.cb_template .form-select:focus {
    border-color: #ffd900;
    box-shadow: 0 0 0 0.2rem rgba(255, 217, 0, 0.25);
}

/* ---- Field labels and values ---- */

.cb_template .col-form-label {
    color: #666;
    font-weight: 600;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cb_template .form-control-plaintext {
    color: #333;
}

/* ---- Tab content cards ---- */

.cb_template .cb_tab_container {
    background: #fff;
    border: 1px solid #e0e0e5;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

/* ---- Stats counters ---- */

.cb_template .cbCanvasHomeLayoutStats .cb_form_line {
    border-color: #e0e0e5 !important;
    border-radius: 6px !important;
}
.cb_template .cbCanvasHomeLayoutStats .col-form-label {
    background-color: #fafafa !important;
    border-radius: 6px 6px 0 0 !important;
}

/* ---- Links matching page theme ---- */

.cb_template a {
    color: #000;
    transition: color 0.2s ease;
}
.cb_template a:hover {
    color: #ffbb00;
}

/* ---- Info / status badges ---- */

.cb_template .badge.bg-primary,
.cb_template .badge.bg-success {
    background: #ffd900 !important;
    color: #333 !important;
}

/* ---- User avatar ---- */

.cb_template .cbImgPict {
    border-radius: 50%;
    border: 3px solid #ffd900;
    width: 160px;
    height: 160px;
    object-fit: cover;
    image-rendering: auto;
}
.cb_template .cbCanvasLayoutBackground .cbImgPict,
.cb_template .cbCanvasLayoutBackground .cbImgCanvas,
.cb_template .cbCanvasHomeLayoutCanvas .cbImgCanvas {
    border-radius: 0;
    border: none;
}
/* Default canvas color only when no custom banner is uploaded (initial gradient) */
.cb_template .cbCanvasLayoutBackground .cbImgCanvasInitial,
.cb_template .cbCanvasHomeLayoutCanvas .cbImgCanvasInitial {
    background: linear-gradient(135deg, #ffd900 0%, #ffcc00 100%) !important;
}

/* ---- Dropdown menus (profile actions) ---- */

.cb_template .dropdown-menu {
    border: 1px solid #e0e0e5;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.cb_template .dropdown-item:hover {
    background: #fff8d6;
    color: #333;
}

/* ---- Left sidebar within profile (CanvasHome) ---- */

.cb_template .cbCanvasHomeLayoutLeft {
    background: #fafafa;
    border: 1px solid #e0e0e5;
    border-radius: 8px;
    padding: 0.5rem;
}
.cb_template .cbCanvasHomeLayoutLeft .cbCanvasHomeLayoutUser {
    border: none !important;
    background: transparent !important;
}

/* ---- Middle content area ---- */

.cb_template .cbCanvasHomeLayoutMiddle {
    background: #fff;
    border: 1px solid #e0e0e5;
    border-radius: 8px;
    padding: 0.75rem;
}

/* ---- Hide CB "Powered by" footer ---- */
.cbPoweredBy {
    display: none;
}

/* ========================================
   CB Wall — Social Wall Styling
   ======================================== */

/* Post form */
.cbWallPostForm {
    margin-bottom: 1.25rem;
}
.cbWallForm {
    background: #fff;
    border: 1px solid #e0e0e5;
    border-radius: 8px;
    padding: 1rem;
}
.cbWallInput {
    width: 100%;
    border: 1px solid #e0e0e5;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
    transition: border-color 0.2s;
}
.cbWallInput:focus {
    outline: none;
    border-color: #ffd900;
    box-shadow: 0 0 0 2px rgba(255, 217, 0, 0.18);
}
.cbWallFormActions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.6rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.cbWallFormOptions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}
.cbWallFileLabel {
    cursor: pointer;
    font-size: 1.2rem;
    color: #888;
    transition: color 0.2s;
    padding: 0.25rem;
}
.cbWallFileLabel:hover {
    color: #ffd900;
}
.cbWallFileInput {
    display: none;
}
.cbWallLinkInput {
    border: 1px solid #e0e0e5;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
    flex: 1;
    min-width: 140px;
    max-width: 280px;
    transition: border-color 0.2s;
}
.cbWallLinkInput:focus {
    outline: none;
    border-color: #ffd900;
    box-shadow: 0 0 0 2px rgba(255, 217, 0, 0.18);
}
.cbWallSubmitBtn {
    background: linear-gradient(135deg, #ffd900, #ffcc00) !important;
    border: none !important;
    color: #333 !important;
    font-weight: 600;
    padding: 0.4rem 1.2rem;
    border-radius: 6px;
    cursor: pointer;
    transition: filter 0.2s;
}
.cbWallSubmitBtn:hover {
    filter: brightness(1.05);
}

/* Individual post */
.cbWallPosts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.cbWallPost {
    background: #fff;
    border: 1px solid #e0e0e5;
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s;
    max-height: 400px;
    overflow: hidden;
}
.cbWallPost:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}
.cbWallPostHeader {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #f0f0f0;
}
.cbWallAuthorAvatar img,
.cbWallAvatarPlaceholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffd900;
}
.cbWallAvatarPlaceholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    color: #bbb;
    font-size: 1rem;
}
.cbWallAuthorInfo {
    flex: 1;
    line-height: 1.3;
}
.cbWallAuthorName {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
    text-decoration: none;
    letter-spacing: 0.01em;
}
.cbWallAuthorName:hover {
    color: #ffbb00;
}
.cbWallPostTime {
    display: block;
    font-size: 0.78rem;
    color: #999;
}
.cbWallDeleteBtn {
    color: #ccc;
    font-size: 0.85rem;
    text-decoration: none;
    padding: 0.25rem;
    transition: color 0.2s;
}
.cbWallDeleteBtn:hover {
    color: #e44;
}

/* Post content */
.cbWallText {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 0.5rem;
    word-break: break-word;
    text-align: left;
}
.cbWallText a {
    color: #000;
    text-decoration: underline;
}
.cbWallText a:hover {
    color: #ffbb00;
}
.cbWallImage {
    margin-top: 0.5rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: 6px;
    overflow: hidden;
    max-width: 420px;
}
.cbWallImage img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}
.cbWallEmbed {
    margin-top: 0.5rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: 6px;
    overflow: hidden;
    max-width: 520px;
}
.cbWallEmbed iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: 6px;
}
.cbWallLink {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f8f8f8;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
}
.cbWallLink a {
    color: #333;
    text-decoration: none;
    font-size: 0.88rem;
}
.cbWallLink a:hover {
    color: #ffbb00;
}
.cbWallLink .fa-link {
    color: #ffd900;
    margin-right: 0.3rem;
}

/* Empty state */
.cbWallEmpty {
    text-align: center;
    padding: 2rem 1rem;
    color: #999;
    font-size: 0.93rem;
}

/* Pagination */
.cbWallPaging {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ================================================
   FAVORITE TRACKS — Edit Profile Form
   ================================================ */

.cbFavTracksEdit {
    margin-top: 0.5rem;
    background: #f8f8f8;
    border: 1px solid #e0e0e5;
    border-radius: 8px;
    padding: 1rem;
}
.cbFavTracksHint {
    color: #555;
    font-size: 0.82rem;
    margin-bottom: 1rem;
    text-align: center;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid #ffd900;
}
.cbFavTracksTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.3rem;
}
.cbFavTracksTable th {
    text-align: left;
    font-weight: 700;
    font-size: 0.75rem;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.4rem 0.5rem;
    border-bottom: none;
}
.cbFavTracksColNum {
    width: 2rem;
    text-align: center !important;
    color: #ffd900;
    font-weight: 700;
    font-size: 0.85rem;
}
.cbFavTracksColTitle {
    width: 35%;
}
.cbFavTracksColUrl {
    width: auto;
}
.cbFavTracksTable td {
    padding: 0.3rem 0.4rem;
    border-bottom: none;
    vertical-align: middle;
    background: #fff;
}
.cbFavTracksTable tbody tr:first-child td:first-child { border-radius: 6px 0 0 0; }
.cbFavTracksTable tbody tr:first-child td:last-child  { border-radius: 0 6px 0 0; }
.cbFavTracksTable tbody tr:last-child td:first-child   { border-radius: 0 0 0 6px; }
.cbFavTracksTable tbody tr:last-child td:last-child    { border-radius: 0 0 6px 0; }
.cbFavTrackInput {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid #e0e0e5;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #333;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}
.cbFavTrackInput:focus {
    outline: none;
    border-color: #ffd900;
    box-shadow: 0 0 0 3px rgba(255, 217, 0, 0.25);
}
.cbFavTrackInput::placeholder {
    color: #bbb;
    font-style: italic;
}

/* ================================================
   FAVORITE TRACKS — Aside Module (left sidebar)
   ================================================ */

.mod-favtracks {
    padding: 0.5rem;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.mod-favtracks__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #ffd900;
    white-space: nowrap;
}
.mod-favtracks__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: track-counter;
}
.mod-favtracks__item {
    counter-increment: track-counter;
    margin-bottom: 0.35rem;
}
.mod-favtracks__link {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.4rem;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 0.78rem;
    line-height: 1.3;
    transition: background 0.2s ease, color 0.2s ease;
    overflow: hidden;
}
.mod-favtracks__link:hover {
    background: #fff8d6;
    color: #000;
}
.mod-favtracks__icon {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: #999;
}
.mod-favtracks__link:hover .mod-favtracks__icon {
    color: #e62117;
}
.mod-favtracks__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* ================================================
   FAVORITE EURORACK MODULES — Edit Profile Form
   ================================================ */

.cbFavModulesEdit {
    margin-top: 0.5rem;
    background: #f8f8f8;
    border: 1px solid #e0e0e5;
    border-radius: 8px;
    padding: 1rem;
}
.cbFavModulesHint {
    color: #555;
    font-size: 0.82rem;
    margin-bottom: 1rem;
    text-align: center;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid #ffd900;
}
.cbFavModulesTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.3rem;
}
.cbFavModulesTable th {
    text-align: left;
    font-weight: 700;
    font-size: 0.75rem;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.4rem 0.5rem;
    border-bottom: none;
}
.cbFavModulesColNum {
    width: 2rem;
    text-align: center !important;
    color: #ffd900;
    font-weight: 700;
    font-size: 0.85rem;
}
.cbFavModulesColTitle {
    width: 35%;
}
.cbFavModulesColUrl {
    width: auto;
}
.cbFavModulesTable td {
    padding: 0.3rem 0.4rem;
    border-bottom: none;
    vertical-align: middle;
    background: #fff;
}
.cbFavModulesTable tbody tr:first-child td:first-child { border-radius: 6px 0 0 0; }
.cbFavModulesTable tbody tr:first-child td:last-child  { border-radius: 0 6px 0 0; }
.cbFavModulesTable tbody tr:last-child td:first-child   { border-radius: 0 0 0 6px; }
.cbFavModulesTable tbody tr:last-child td:last-child    { border-radius: 0 0 6px 0; }
.cbFavModuleInput {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid #e0e0e5;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #333;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}
.cbFavModuleInput:focus {
    outline: none;
    border-color: #ffd900;
    box-shadow: 0 0 0 3px rgba(255, 217, 0, 0.25);
}
.cbFavModuleInput::placeholder {
    color: #bbb;
    font-style: italic;
}

/* ================================================
   FAVORITE EURORACK MODULES — Left-side Module
   ================================================ */

.mod-favmodules {
    padding: 0.5rem;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.mod-favmodules__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #ffd900;
    white-space: nowrap;
}
.mod-favmodules__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mod-favmodules__item {
    margin-bottom: 0.35rem;
}
.mod-favmodules__link {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.4rem;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 0.78rem;
    line-height: 1.3;
    transition: background 0.2s ease, color 0.2s ease;
    overflow: hidden;
}
.mod-favmodules__link:hover {
    background: #fff8d6;
    color: #000;
}
.mod-favmodules__icon {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: #999;
}
.mod-favmodules__link:hover .mod-favmodules__icon {
    color: #ffd900;
}
.mod-favmodules__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* ================================================
   RELEASES — Edit Profile Form
   ================================================ */

.cbReleasesEdit {
    margin-top: 0.5rem;
    background: #f8f8f8;
    border: 1px solid #e0e0e5;
    border-radius: 8px;
    padding: 1rem;
}
.cbReleasesHint {
    color: #555;
    font-size: 0.82rem;
    margin-bottom: 1rem;
    text-align: center;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid #ffd900;
}
.cbReleasesTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.3rem;
}
.cbReleasesTable th {
    text-align: left;
    font-weight: 700;
    font-size: 0.75rem;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.4rem 0.5rem;
    border-bottom: none;
}
.cbReleasesColNum {
    width: 2rem;
    text-align: center !important;
    color: #ffd900;
    font-weight: 700;
    font-size: 0.85rem;
}
.cbReleasesColTitle {
    width: 35%;
}
.cbReleasesColUrl {
    width: auto;
}
.cbReleasesTable td {
    padding: 0.3rem 0.4rem;
    border-bottom: none;
    vertical-align: middle;
    background: #fff;
}
.cbReleasesTable tbody tr:first-child td:first-child { border-radius: 6px 0 0 0; }
.cbReleasesTable tbody tr:first-child td:last-child  { border-radius: 0 6px 0 0; }
.cbReleasesTable tbody tr:last-child td:first-child   { border-radius: 0 0 0 6px; }
.cbReleasesTable tbody tr:last-child td:last-child    { border-radius: 0 0 6px 0; }
.cbReleaseInput {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid #e0e0e5;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #333;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}
.cbReleaseInput:focus {
    outline: none;
    border-color: #ffd900;
    box-shadow: 0 0 0 3px rgba(255, 217, 0, 0.25);
}
.cbReleaseInput::placeholder {
    color: #bbb;
    font-style: italic;
}

/* ================================================
   RELEASES — Left-side Module
   ================================================ */

.mod-releases {
    padding: 0.5rem;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.mod-releases__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #ffd900;
    white-space: nowrap;
}
.mod-releases__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mod-releases__item {
    margin-bottom: 0.35rem;
}
.mod-releases__link {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.4rem;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 0.78rem;
    line-height: 1.3;
    transition: background 0.2s ease, color 0.2s ease;
    overflow: hidden;
}
.mod-releases__link:hover {
    background: #fff8d6;
    color: #000;
}
.mod-releases__icon {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: #999;
}
.mod-releases__link:hover .mod-releases__icon {
    color: #ffd900;
}
.mod-releases__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* ================================================
   USER LIST — 8-column grid
   ================================================ */

.cbUserListLayoutGrid .cbUserListRow {
    flex: 0 0 12.5% !important;
    max-width: 12.5% !important;
    padding: 0.35rem !important;
}
.cbUserListLayoutGrid .cbUserListRow .card {
    border: none;
    background: #fffbe6 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.cbUserListLayoutGrid .cbUserListRow .card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.14);
    transform: translateY(-2px);
}
/* Force ALL canvas headers to soft yellow — override inline styles */
.cbUserListLayoutGrid .cbCanvasLayoutTop {
    background: #fffbe6 !important;
    min-height: 60px !important;
}
.cbUserListLayoutGrid .cbCanvasLayoutTop .cbCanvasLayoutBackground,
.cbUserListLayoutGrid .cbCanvasLayoutTop .cbCanvasLayoutBackground *,
.cbUserListLayoutGrid .cbCanvasLayoutTop .cbCanvasLayoutBackgroundImage,
.cbUserListLayoutGrid .cbCanvasLayoutTop .cbCanvasLayoutBackground .cbImgCanvas {
    background: #fffbe6 !important;
    background-color: #fffbe6 !important;
    background-image: none !important;
}
/* Override Bootstrap bg-* and sectiontableentry colours */
.cbUserListLayoutGrid .cbUserListRow,
.cbUserListLayoutGrid .cbUserListRow .card .card-header,
.cbUserListLayoutGrid .cbUserListRow .card .card-body {
    background: transparent !important;
}
.cbUserListLayoutGrid .cbUserListRow .card .card-body {
    padding: 0.4rem;
    text-align: center;
}
.cbUserListLayoutGrid .cbUserListRow .card .card-body .cbUserListRowColumn {
    font-size: 0.78rem;
    line-height: 1.3;
}
/* Avatar — bigger, centred, perfect circle */
.cbUserListLayoutGrid .cbCanvasLayoutBottom {
    display: flex;
    justify-content: center;
    position: relative !important;
    margin-top: -36px;
}
.cbUserListLayoutGrid .cbCanvasLayoutPhoto {
    position: relative !important;
    display: flex;
    justify-content: center;
}
.cbUserListLayoutGrid .cbCanvasLayoutPhoto .cbImgPict,
.cbUserListLayoutGrid .cbCanvasLayoutPhoto img,
.cbUserListLayoutGrid .cbImgPict img,
.cbUserListLayoutGrid .cbAvatarWrapper img {
    border-radius: 50% !important;
    width: 80px !important;
    height: 80px !important;
    max-height: 80px !important;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
/* Username / name below avatar — visible and centred */
.cbUserListLayoutGrid .cbCanvasLayoutBody {
    text-align: center;
    padding-top: 0.3rem !important;
}
.cbUserListLayoutGrid .cbCanvasLayoutContent {
    display: block !important;
    text-align: center;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cbUserListLayoutGrid .cbCanvasLayoutContent a {
    color: #333;
    font-weight: 600;
    text-decoration: none;
}
.cbUserListLayoutGrid .cbCanvasLayoutContent a:hover {
    color: #ffd900;
}
.cbUserListLayoutGrid .cbUserListRowColumn a {
    color: #333;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.8rem;
}
.cbUserListLayoutGrid .cbUserListRowColumn a:hover {
    color: #ffd900;
}
/* Pagination styling */
.cbUserListPagination .pagination {
    justify-content: center;
    margin-top: 1rem;
}
.cbUserListPagination .page-link {
    color: #333;
    border-color: #e0e0e5;
}
.cbUserListPagination .page-item.active .page-link {
    background-color: #ffd900;
    border-color: #ffd900;
    color: #333;
}
/* Hide the list title bar clutter */
.cbUsersList .cb-page-header {
    border-bottom: none !important;
    text-align: center;
}
.cbUsersList .cb-page-header h3.cb-page-header-title {
    display: inline-block !important;
    background: #ffd900;
    color: #333;
    border-radius: 28px;
    padding: 14px 48px !important;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0 !important;
}
.cbUsersList .cbUserListResultCount {
    text-align: center;
    margin-top: 8px;
    font-size: 0.95rem;
    color: #666;
}
/* Responsive: 4 columns on tablet, 2 on phone */
@media (max-width: 991px) {
    .cbUserListLayoutGrid .cbUserListRow {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}
@media (max-width: 575px) {
    .cbUserListLayoutGrid .cbUserListRow {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* ===== Manage Connections page — centre content ===== */
.cbManageConnections {
    max-width: 700px;
    margin: 0 auto;
}
.cbManageConnections .cb-page-header {
    border-bottom: none !important;
    text-align: center;
}
.cbManageConnections .cb-page-header h3.cb-page-header-title {
    display: inline-block !important;
    background: #ffd900;
    color: #333;
    border-radius: 28px;
    padding: 14px 48px !important;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0 !important;
}
/* Hide intro text and Cancel button */
.cbManageConnections .tab_description {
    display: none !important;
}
.cbManageConnections .cbMngConnCancel {
    display: none !important;
}
/* Hide connection type, comment fields, Update button */
.cbManageConnections .cbCanvasLayoutContent:has(.cbSelect),
.cbManageConnections .cbCanvasLayoutContent:has(textarea) {
    display: none !important;
}
.cbManageConnections .cbMngConnButtons {
    display: none !important;
}
/* Hide canvas/banner area — shows yellow when user has no canvas */
.cbManageConnections .cbCanvasLayoutTop {
    display: none !important;
}
.cbManageConnections .cbCanvasLayoutBottom {
    position: static !important;
}
.cbManageConnections .cbCanvasLayoutPhoto {
    position: static !important;
    text-align: center;
    padding: 12px 0 0 0;
}
/* Force circular avatars on connections page */
.cbManageConnections .cbCanvasLayoutPhoto .cbImgPict {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    padding: 0 !important;
}

/* ================================================
   KUNENA FORUM — Gantry Integration
   ================================================ */

/* Hide Kunena breadcrumb when Gantry already provides one */
#kunena.layout .breadcrumb {
    display: none;
}

/* Ensure forum container fits within Gantry layout */
#kunena.layout {
    max-width: 100%;
    overflow-x: hidden;
}

/* Match left/right sidebar frame when forum is in mainbar */
.com-kunena #g-container-main > .g-container > .g-grid {
    justify-content: center;
}

/* Forum wrapper spacing within Gantry content area */
.com-kunena .g-content {
    padding: 0;
}

/* Hide "Powered by Kunena" footer credit */
.layout#kunena + div,
#kunena + div {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ── Private Messages inbox page ── */
.pmMessages.pmMessagesDefault {
    max-width: 800px;
    margin: 0 auto;
}
/* Force circular avatars on inbox/message pages */
.pmMessages .pmMessagesRowImg img.cbImgPict,
.pmMessages .pmMessagesRowImg img.cbThumbPict,
.pmMessages .pmMessagesRowImg img.cbFullPict,
.pmMessage .cbImgPict {
    width: 48px !important;
    height: 48px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    padding: 0 !important;
    border: 2px solid #ffd900 !important;
}
.pmMessagesTitle {
    border-bottom: none !important;
    text-align: center;
}
.pmMessagesTitle .cb-page-header-title {
    display: inline-block;
    background: #ffd900;
    color: #333;
    border-radius: 28px;
    padding: 14px 48px;
    font-size: 1.5rem;
    font-weight: 600;
}
.pmMessagesHeader {
    justify-content: center;
}
.pmMessagesRows {
    text-align: left;
}

/* ── Single message view ── */
.pmMessage.pmMessageDefault {
    max-width: 800px;
    margin: 0 auto;
}

/* ── New / Edit message form ── */
.pmMessageEdit.pmMessageEditDefault {
    max-width: 800px;
    margin: 0 auto;
}

/* ── Private Message button on profiles ── */
.pmMessageQuick .btn-pm {
    background: #ffd900;
    color: #333;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    padding: 8px 20px;
    transition: background 0.2s ease;
}
.pmMessageQuick .btn-pm:hover,
.pmMessageQuick .btn-pm:focus {
    background: #e6c300;
    color: #333;
    text-decoration: none;
}

/* ── Short Bio tab: hide from profile view (keep in Edit Profile) ── */
.cbProfile #cbtabnav28,
.cbProfile #cbtabpane28 {
    display: none !important;
}

/* ── Short Bio inline display ── */
.cb_template .cbProfileBio {
    font-size: 0.95rem;
    color: #666;
    font-weight: 400;
    margin-top: 6px;
    text-align: center;
}
.cb_template .cbTabSection_28 .cb_field .cbFieldLabelReadInLayout {
    display: none;
}
.cb_template .cbTabSection_28 .cb_field .fieldCell {
    font-size: 0.95rem;
    color: #666;
    font-weight: 400;
}

/* ── Connect button on profiles ── */
.pmMessageQuick .btn-connect {
    background: #ffd900;
    color: #333;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    padding: 8px 20px;
    transition: background 0.2s ease;
}
.pmMessageQuick .btn-connect:hover,
.pmMessageQuick .btn-connect:focus {
    background: #e6c300;
    color: #333;
    text-decoration: none;
}
.pmMessageQuick .btn-connected,
.pmMessageQuick .btn-pending {
    background: #e0e0e0;
    color: #666;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    padding: 8px 20px;
    cursor: default;
}
.pmMessageQuick .btn-disconnect {
    background: #333;
    color: #ffd900;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    padding: 8px 20px;
    transition: background 0.2s ease;
    text-decoration: none;
}
.pmMessageQuick .btn-disconnect:hover,
.pmMessageQuick .btn-disconnect:focus {
    background: #1a1a1a;
    color: #ffd900;
    text-decoration: none;
}

/* User Search Module */
.cb-user-search-form {
    margin: 0;
    padding: 0;
}
.cb-search-input-wrap {
    display: flex;
    border: 2px solid #ffd900;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
}
.cb-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 8px 16px;
    font-size: 0.9rem;
    background: transparent;
    color: #333;
}
.cb-search-input::placeholder {
    color: #999;
}
.cb-search-btn {
    border: none;
    background: #ffd900;
    color: #333;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s ease;
}
.cb-search-btn:hover {
    background: #e6c300;
}

/* ---- Connections Module ---- */
.cb-connections-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cb-conn-item {
    margin-bottom: 6px;
}
.cb-conn-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    transition: background 0.2s ease;
}
.cb-conn-link:hover {
    background: #ffd900;
    text-decoration: none;
    color: #333;
}
.cb-conn-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffd900;
}
.cb-conn-name {
    font-size: 0.9rem;
    font-weight: 500;
}
.cb-conn-empty {
    color: #999;
    font-size: 0.85rem;
    padding: 8px 10px;
}