/**
 * FastW3B - UI Components (UIKit Theming Layer)
 * Overrides for fwk- classes and shared component styles.
 * Loaded after design-tokens.css on frontend layouts.
 */

/* ==========================================================================
   Typography
   ========================================================================== */

/* Section header subtitle */
.fw-h2-subtext,
.fw-section-subtitle {
    color: var(--fw-green-warm);
    font-size: 16px;
    font-weight: bold;
}

/* Heading overrides — match Joomla YOOtheme theme.css */
h1, h2, h3, h4, h5, h6,
.fwk-h1, .fwk-h2, .fwk-h3, .fwk-h4, .fwk-h5, .fwk-h6 {
    font-weight: 700;
    color: #222;
}

.fwk-h1, h1 {
    font-size: 40px;
}

.fwk-h2, h2 {
    font-size: 32px;
    line-height: 1.15;
}

.fwk-h3, h3 {
    font-size: 32px;
    line-height: 1.15;
}

@media (min-width: 960px) {
    .fwk-h1, h1 {
        font-size: 48px;
    }
    .fwk-h2, h2 {
        font-size: 40px;
    }
}

.fwk-h4, h4 {
    font-size: 26px;
    line-height: 1.15;
}

.fwk-h5, h5 {
    font-size: 22px;
    line-height: 1.15;
}

.fwk-h6, h6 {
    font-size: 18px;
}

.fwk-text-lead {
    font-size: 17px;
    line-height: 1.5;
    color: #222;
    font-weight: 500;
    letter-spacing: 0;
}

.fwk-text-small {
    font-size: 13px;
    line-height: 1.5;
}

/* Nav Default — match Joomla YOOtheme theme.css */
.fwk-nav-default {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0;
}

.fwk-nav-default > li > a {
    color: #222;
}

.fwk-nav-default > li > a:hover {
    color: var(--fw-yellow);
}

.fwk-nav-default > li.fwk-active > a {
    color: var(--fw-yellow);
}

/* Breadcrumb — match Joomla YOOtheme theme.css */
.fwk-breadcrumb > * > * {
    font-size: 12px;
    color: #212121;
    font-weight: 400;
    letter-spacing: 0;
}
.fwk-breadcrumb > * > :hover {
    color: var(--fw-green, #34a55d);
    text-decoration: underline;
}
.fwk-breadcrumb > :last-child > a:not([href]),
.fwk-breadcrumb > :last-child > span {
    color: #323232;
}
.fwk-breadcrumb > :nth-child(n+2):not(.fwk-first-column)::before {
    margin: 0 10px 0 calc(10px - 4px);
    font-size: 12px;
    color: #909090;
}

/* Alias used in inline views — kept for transition */
.fwk-h2-subtext {
    color: var(--fw-green-warm, #97BA2D);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Section header intro text */
.fw-h2-intro,
.fw-section-intro {
    max-width: 850px;
    margin: 30px auto 60px;
}

/* Alias used in inline views — kept for transition */
.fwk-h2-intro {
    max-width: 850px;
    margin: 30px auto 60px;
}

.fw-text-green {
    color: var(--fw-green) !important;
}

.fw-text-white,
.fwk-text-white {
    color: #fff !important;
}

.fw-text-black {
    color: var(--fw-black) !important;
}

.fw-text-yellow {
    color: var(--fw-yellow) !important;
}

.fw-text-bolder {
    font-weight: 500 !important;
}

.fw-text-smaller {
    font-size: 14px !important;
}

/* ==========================================================================
   Backgrounds
   ========================================================================== */

.fw-background-grey {
    background: var(--fw-grey-background);
}

.fw-background-dark {
    color: white;
    background: var(--fw-linear-dark);
}

.fw-background-green {
    background: var(--fw-green);
}

.fw-background-white {
    background: white;
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Add padding for header on pages without dark hero */
body:not(.fw-dark-header) {
    padding-top: calc(var(--fw-header-height) + 20px);
}

.fw-header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background: transparent;
}

.fw-header .fwk-navbar-container {
    padding-top: 10px;
    padding-bottom: 10px;
    transition: all var(--fw-transition);
    box-shadow: 0 4px 13px rgba(30, 35, 66, .11);
    background: transparent !important;
    min-height: var(--fw-header-height);
}

.fw-header .fwk-navbar-container.fwk-navbar-sticky {
    padding-top: 0;
    padding-bottom: 0;
    background: #fff !important;
}

/* Dark header - override UIkit defaults */
.fw-dark-header .fw-header .fwk-navbar-container {
    color: #fff;
    background: transparent !important;
    box-shadow: none;
}

.fw-dark-header .fw-header .fwk-navbar-container.fwk-navbar-sticky {
    background: var(--fw-linear-dark) !important;
    box-shadow: 0 4px 13px rgba(30, 35, 66, .11);
}

.fw-header .fwk-navbar {
    justify-content: space-between;
}

.fw-header .fwk-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}

.fw-header .fwk-navbar-left,
.fw-header .fwk-navbar-center,
.fw-header .fwk-navbar-right {
    display: flex;
    align-items: center;
    gap: 35px;
}

.fw-header .fwk-navbar-nav {
    gap: 35px;
}

@media (min-width: 960px) {
    .fw-header .fwk-navbar-left,
    .fw-header .fwk-navbar-center,
    .fw-header .fwk-navbar-right {
        gap: 40px;
    }

    .fw-header .fwk-navbar-nav {
        gap: 40px;
    }
}

.fw-header .fwk-navbar-left,
.fw-header .fwk-navbar-right {
    flex-shrink: 0;
    align-self: center;
}

.fw-header .fwk-navbar-center:not(:only-child) {
    position: relative;
    width: auto;
    transform: none;
    top: auto;
    left: auto;
    justify-content: center;
    flex: 1;
}

.fw-header .fwk-navbar-right {
    gap: 35px;
}

.fw-header .fwk-logo img {
    height: 40px;
    width: auto;
}

.fw-header .fwk-navbar-nav > li {
    position: relative;
}

.fw-header .fwk-navbar-nav > li > a {
    min-height: var(--fw-header-height);
    font-weight: 400;
    text-transform: none;
    font-size: 15px;
    color: var(--fw-black);
}

/* Navbar toggle (search icon) */
.fw-header .fwk-navbar-toggle {
    color: var(--fw-black);
    padding: 0;
    font-weight: 400;
    letter-spacing: 0;
}

.fw-header .fwk-navbar-toggle:hover,
.fw-header .fwk-navbar-toggle[aria-expanded="true"] {
    color: var(--fw-green);
}

.fw-dark-header .fw-header .fwk-navbar-toggle {
    color: #fff;
}

.fw-dark-header .fw-header .fwk-navbar-toggle:hover,
.fw-dark-header .fw-header .fwk-navbar-toggle[aria-expanded="true"] {
    color: var(--fw-yellow);
}

/* Header Buttons */
.fw-header .fwk-button {
    color: var(--fw-black);
    height: 46px;
    padding: 10px 15px;
    font-size: 14px;
    line-height: 26px;
    background: transparent;
    border: 1px solid #EBEBEB;
    border-radius: 10px;
}

.fw-header .fwk-button:hover,
.fw-header .fwk-button[aria-expanded="true"] {
    color: var(--fw-green);
    border-color: var(--fw-green);
}

/* Header button SVG icons */
.fw-header div .fwk-button svg {
    color: var(--fw-grey);
    height: 16px;
    margin-right: 5px;
    margin-top: -3px;
}

.fw-header div .fwk-button:hover svg {
    color: var(--fw-yellow);
}

.fw-header a.fwk-button svg {
    height: 16px;
    width: 16px;
    margin-right: 0;
}

/* Header link SVG icons */
.fw-header a svg {
    color: var(--fw-yellow);
}

.fw-header a svg:hover {
    color: var(--fw-green);
}

/* Not dark header color theme */
body:not(.fw-dark-header) .fw-header nav li:hover a,
body:not(.fw-dark-header) .fw-header nav li a[aria-expanded="true"],
body:not(.fw-dark-header) .fw-header nav li.fwk-active a {
    color: var(--fw-green);
}

body:not(.fw-dark-header) .fw-header nav li.fwk-parent.fwk-active > a::after {
    border-top-color: var(--fw-green);
}

body:not(.fw-dark-header) .fw-header nav li a[aria-expanded="true"]::after,
body:not(.fw-dark-header) .fw-header nav li.fwk-parent:hover > a::after {
    border-bottom-color: var(--fw-green);
}

body:not(.fw-dark-header) .fw-header .fwk-navbar-dropdown {
    border-color: var(--fw-green);
}

body:not(.fw-dark-header) .fw-header .fwk-navbar-dropdown li:hover a,
body:not(.fw-dark-header) .fw-header .fwk-navbar-dropdown li.fwk-active a {
    color: white;
    background: var(--fw-green);
}

body:not(.fw-dark-header) .fw-header a.fwk-button:hover svg {
    color: var(--fw-green);
}

body:not(.fw-dark-header) .fw-client-account .fw-client-avatar .fwk-button img {
    border-color: var(--fw-green);
}

/* Dark theme header */
.fw-dark-header .fw-header:has(.fwk-navbar-sticky) {
    position: relative;
}

.fw-dark-header .fw-header .fwk-logo img {
    content: url('../images/fastw3b_logo_inverse.svg');
}

.fw-dark-header .fw-header .fwk-navbar-nav > li > a {
    color: #fff;
}

.fw-dark-header .fw-header .fwk-navbar-nav > li > a:hover,
.fw-dark-header .fw-header .fwk-navbar-nav > li > a[aria-expanded="true"],
.fw-dark-header .fw-header .fwk-navbar-nav > li.fwk-active > a {
    color: var(--fw-yellow);
}

.fw-dark-header .fw-header .fwk-button {
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.fw-dark-header .fw-header .fwk-button:hover,
.fw-dark-header .fw-header .fwk-button[aria-expanded="true"] {
    color: var(--fw-black);
    background: #fff;
}

/* Dark header SVG icon colors */
.fw-dark-header .fw-header a svg {
    color: white;
}

.fw-dark-header .fw-header .fw-client-dropmenu a svg {
    color: var(--fw-black);
}

.fw-dark-header .fw-header a svg:hover {
    color: var(--fw-yellow);
}

/* Dark header expanded parent arrow */
.fw-dark-header .fw-header .fwk-navbar-nav li.fwk-parent > a[aria-expanded="true"]::after {
    border-color: var(--fw-yellow);
    border-top: none;
    border-bottom: 5px solid var(--fw-yellow);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

/* Dropdowns - hidden by default to prevent FOUC before UIkit init */
.fwk-navbar-dropdown,
.fwk-dropdown {
    display: none;
}

.fw-header .fwk-navbar-dropdown {
    border-width: 0 0 0 3px !important;
    border-style: solid;
    border-color: var(--fw-yellow);
    box-shadow: 0 0 10px rgba(50, 52, 62, .15);
    z-index: 100;
    border-radius: 10px;
    padding: 10px;
}

.fw-header .fwk-navbar-dropdown::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: -13px;
    left: 50%;
    box-sizing: border-box;
    transform: rotate(-45deg) translateX(-50%);
    background: #fff;
    box-shadow: 3px -3px 5px rgba(50, 52, 62, .05);
    z-index: 110;
}

.fw-header .fwk-navbar-dropdown-nav {
    margin-left: -10px;
    margin-right: -10px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0;
}

.fw-header .fwk-navbar-dropdown .fwk-nav {
    position: relative;
    z-index: 110;
}

.fw-header .fwk-navbar-dropdown .fwk-nav li a {
    padding: 5px 15px;
    border-radius: 0;
    color: var(--fw-black);
}

.fw-header .fwk-navbar-dropdown .fwk-nav li.fwk-active a {
    background: var(--fw-yellow);
}

.fw-header .fwk-navbar-dropdown .fwk-nav li:hover a {
    color: white;
    background: var(--fw-yellow);
}

/* Menu arrow for dropdowns */
.fw-header .fwk-navbar-nav li.fwk-parent > a::after {
    content: '';
    width: 0;
    height: 0;
    margin-left: 6px;
    border-bottom: none;
    border-top: 5px solid var(--fw-black);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-radius: 1px;
}

.fw-dark-header .fw-header .fwk-navbar-nav li.fwk-parent > a::after {
    border-top-color: #fff;
}

.fw-header .fwk-navbar-nav li.fwk-parent.fwk-active > a::after {
    border-top: 5px solid var(--fw-yellow);
}

.fw-header .fwk-navbar-nav li.fwk-parent > a[aria-expanded="true"]::after {
    border-color: var(--fw-yellow);
    border-top: none;
    border-bottom: 5px solid var(--fw-yellow);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

/* Client Section Dropdown */
.fw-client-dropmenu {
    min-width: 330px;
    padding: 7px 0 5px;
    border-radius: 10px;
}

.fw-client-dropmenu::before {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    top: -5px;
    right: 50px;
    transform: rotate(45deg);
    background: #fff;
}

.fw-client-dropmenu ul,
.fw-client-dropmenu ul li {
    margin: 0 !important;
    position: relative;
}

.fw-client-dropmenu li a {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 12px 15px;
    border-bottom: 1px solid #DFDFE0;
}

.fw-client-dropmenu li svg {
    color: var(--fw-green);
}

.fw-client-dropmenu ul li:last-child a {
    border: 0;
}

.fw-client-dropmenu li:hover a:not(.fwk-button-text) {
    text-decoration: none;
    background: var(--fw-yellow);
}

.fw-client-dropmenu li:hover * {
    color: var(--fw-black) !important;
}

.fw-client-dropmenu .fwk-button-text::after {
    content: none;
}

.fw-client-dropmenu .fwk-label {
    min-width: 8px;
    height: 18px;
    padding: 0 5px;
    line-height: 18px;
    font-size: 10px;
    text-align: center;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}

.fw-client-dropmenu .fwk-label.fwk-label-warning {
    color: var(--fw-black) !important;
    background: var(--fw-yellow);
}

.fw-client-dropmenu .fwk-label.fwk-label-danger {
    color: white !important;
}

.fw-client-dropmenu .fwk-label.fwk-label-success {
    background: var(--fw-green);
    color: white !important;
}

.fw-client-dropmenu li a > span:first-child {
    flex-shrink: 0;
}

.fw-client-dropmenu li a > span:nth-child(2) {
    flex-grow: 1;
}

.fw-client-dropmenu li.fwk-nav-divider {
    border-bottom: 1px solid #DFDFE0;
    margin: 0 !important;
}

/* Client Section Button */
.fw-header .fw-client-account .fwk-button {
    height: 60px;
    padding: 0 15px;
    line-height: 60px;
    font-weight: 500;
    text-transform: none;
    background: var(--fw-grey-background);
    border-color: transparent;
}

.fw-header .fw-client-account .fwk-button:hover {
    color: var(--fw-green);
    border-color: transparent;
}

.fw-dark-header .fw-header .fw-client-account .fwk-button {
    background: rgba(255, 255, 255, 0.16);
    border: 0;
}

.fw-dark-header .fw-header .fw-client-account .fwk-button:hover {
    background: #fff;
}

/* Client avatar badge */
.fw-header .fw-client-account .fw-client-avatar > .fwk-button > span.fwk-label-danger {
    color: white !important;
    min-width: 0;
    height: 26px;
    padding: 3px 0 5px 5px !important;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    font-weight: bold;
    line-height: 16px;
    border-radius: 0 10px 0 40px;
}

.fw-header .fwk-button.fw-client-btn {
    position: relative;
}

.fw-header .fw-client-btn .fw-client-btn-icon {
    color: var(--fw-yellow);
}

.fw-header .fw-client-btn:hover .fw-client-btn-icon,
.fw-header .fw-client-btn[aria-expanded="true"] .fw-client-btn-icon {
    color: inherit;
}

/* Client login SVG icons */
.fw-client-account .fw-client-login .fwk-button svg,
.fw-client-account .fw-client-login .fwk-button:hover svg {
    color: var(--fw-green);
    margin-right: 5px;
}

.fw-dark-header .fw-client-login .fwk-button svg {
    color: var(--fw-yellow);
}

.fw-dark-header .fw-header .fw-client-login .fwk-button:hover svg {
    color: var(--fw-black);
}

/* Client login/avatar links */
.fw-client-login a,
.fw-client-avatar a {
    line-height: 26px;
    vertical-align: middle;
}

/* Client avatar image */
.fw-client-avatar .fwk-button img {
    max-height: 40px;
    margin: 0 12px 3px 0;
    border: 0 !important;
}

.fw-client-account .fw-client-avatar .fwk-button img {
    border: 1px solid var(--fw-yellow) !important;
}

.fw-client-btn-avatar {
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}

.fw-client-btn-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 0;
    height: 26px;
    padding: 3px 0 5px 5px;
    line-height: 16px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    border: 10px solid transparent;
    border-radius: 0 10px 0 40px;
    background: #E74C3C;
    color: #fff;
}

/* ==========================================================================
   Tabs — match Joomla YOOtheme theme.css
   ========================================================================== */

.fwk-tab {
    margin-left: -35px;
}

.fwk-tab::before {
    content: none;
}

.fwk-tab > * {
    padding-left: 35px;
}

.fwk-tab > * > a {
    padding: 3px 0;
    color: #323232;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: 0;
    text-transform: none;
    border-bottom: 2px solid transparent;
}

.fwk-tab > * > a:hover {
    color: #323232;
    text-decoration: none;
    border-color: transparent;
}

.fwk-tab > .fwk-active > a {
    color: #323232;
    border-color: var(--fw-green);
}

.fwk-tab > .fwk-disabled > a {
    color: #777;
}

/* ==========================================================================
   Accordion (FAQ) — match Joomla YOOtheme theme.css
   ========================================================================== */

.fwk-accordion > :nth-child(n+2) {
    margin-top: 30px;
}

.fwk-accordion li,
.fwk-accordion .el-item {
    background: var(--fw-dark);
    border-radius: 10px;
    border-left: 3px solid var(--fw-green);
    overflow: hidden;
}

.fwk-accordion-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.88;
    letter-spacing: 0;
    color: #fff;
    padding: 16px 22px;
    background: #122530;
}

.fwk-accordion-title::before {
    width: 1.88em;
    height: 1.88em;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23FFFFFF%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23FFFFFF%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.fwk-open > .fwk-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23FFFFFF%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.fwk-accordion li:hover,
.fwk-accordion li:hover a,
.fwk-accordion li.fwk-open,
.fwk-accordion li.fwk-open a,
.fwk-accordion .el-item:hover,
.fwk-accordion .el-item:hover a,
.fwk-accordion .el-item.fwk-open,
.fwk-accordion .el-item.fwk-open a,
.fwk-accordion .el-item.fwk-open .fwk-accordion-content,
.fwk-accordion li.fwk-open .fwk-accordion-content {
    color: #fff;
    background: var(--fw-green);
    border-color: #fff;
}

.fwk-accordion-content {
    margin-top: 0;
}

.fwk-accordion .el-item .fwk-accordion-content,
.fwk-accordion li .fwk-accordion-content {
    padding: 6px 22px 22px;
    color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Modal Dialogs
   ========================================================================== */

.fwk-modal-dialog .fwk-modal-close-outside {
    color: var(--fw-grey);
    padding: 12px;
    font-size: 12px;
    line-height: 1;
    top: 0;
    right: 0;
    background: #fff;
    border-radius: 50%;
}

.fwk-modal-dialog .fwk-modal-close-outside:hover {
    color: white;
    background: var(--fw-green);
}

.fwk-modal-dialog {
    border-radius: 10px;
}

.fwk-modal-dialog .fwk-modal-header {
    padding: 0;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}

.fwk-modal-dialog .fwk-modal-title {
    color: #fff;
    padding: 30px 50px;
    font-size: 24px;
    line-height: 1.15;
    background: var(--fw-green);
    border-radius: 10px 10px 0 0;
}

.fwk-modal-dialog .fwk-modal-footer {
    padding: 30px 50px;
    background: var(--fw-grey-background);
    border-radius: 0 0 10px 10px;
}

/* Or Divider */
.fw-or-divider {
    text-align: center;
    position: relative;
}

.fw-or-divider::before {
    width: 100%;
    height: 1px;
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    border-top: 1px solid #E1E1E1;
}

.fw-or-divider span {
    padding: 0 15px;
    display: inline-block;
    position: relative;
    background: #fff;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.fwk-button {
    border-radius: 10px;
    line-height: 46px;
    font-size: 15px;
    font-weight: 500;
}

.fwk-button-large {
    line-height: 60px;
    font-size: 15px;
}

.fwk-button-small {
    line-height: 34px;
    font-size: 12px;
}

.fwk-button-primary {
    color: var(--fw-black);
    background: var(--fw-yellow);
    border-color: var(--fw-yellow);
}

.fwk-button-primary:hover {
    color: #fff;
    background: var(--fw-green-warm);
    border-color: var(--fw-green-warm);
}

.fwk-button-default {
    background: #f4f4f4;
    color: var(--fw-green);
    border: none;
}

.fwk-button-default:hover {
    background: var(--fw-green-warm);
    color: #fff;
}

.fwk-button-secondary {
    background-color: transparent;
    border: 1px solid var(--fw-green);
    color: #323232;
}

.fwk-button-secondary:hover {
    background: var(--fw-green);
    color: #fff;
}

.fwk-button-multiline {
    padding: 15px 25px;
    line-height: 1.5;
}

.fw-button-yellow {
    background: var(--fw-yellow);
    color: var(--fw-black);
    border: none;
}

.fw-button-yellow:hover {
    background: var(--fw-green);
    color: #fff;
}

.fwk-button-multiline {
    padding: 15px 25px;
    line-height: 1.5;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.fw-card {
    background: var(--fw-background);
    border-radius: 10px;
    box-shadow: var(--fw-box-shadow-short);
    transition: transform var(--fw-transition), box-shadow var(--fw-transition);
}

.fw-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fw-box-shadow);
}

.fw-card-image {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.fw-card-body {
    padding: 25px;
}

.fw-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 10px;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.fw-form-group {
    margin-bottom: 20px;
}

.fw-form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--fw-text-emphasis);
}

.fw-form-label.required::after {
    content: " *";
    color: var(--fw-danger);
}

.fw-form-hint {
    font-size: 0.85rem;
    color: var(--fw-muted);
    margin-top: 5px;
}

/* Toggle Switch (iOS-style) */
.fwk-switch { width: 36px; height: 20px; display: inline-block; position: relative; vertical-align: middle; }
.fwk-switch input { display: none; }
.fwk-switch-slider { position: absolute; inset: 0; transition: .4s; cursor: pointer; background-color: #ccc; border-radius: 34px; }
.fwk-switch-slider:before { width: 16px; height: 16px; content: ""; position: absolute; left: 2px; bottom: 2px; transition: .4s; background-color: #fff; border-radius: 50%; }
input:checked + .fwk-switch-slider { background-color: var(--fw-green); }
input:checked + .fwk-switch-slider:before { transform: translateX(16px); }

/* ==========================================================================
   Tables
   ========================================================================== */

.fw-table {
    width: 100%;
    border-collapse: collapse;
}

.fw-table th,
.fw-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--fw-border);
}

.fw-table th {
    font-weight: 600;
    color: var(--fw-text-emphasis);
    background: var(--fw-background-muted);
}

.fw-table tbody tr:hover {
    background: var(--fw-background-muted);
}

/* ==========================================================================
   Badges & Labels
   ========================================================================== */

.fw-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
}

.fw-badge-primary {
    background: var(--fw-green);
    color: #fff;
}

.fw-badge-success {
    background: var(--fw-green);
    color: #fff;
}

.fw-badge-warning {
    background: var(--fw-yellow);
    color: var(--fw-black);
}

.fw-badge-danger {
    background: var(--fw-danger);
    color: #fff;
}

.fw-badge-muted {
    background: var(--fw-background-muted);
    color: var(--fw-text);
}

.fwk-label-muted {
    background-color: var(--fw-grey);
}

/* ==========================================================================
   Cards (UIKit overrides)
   ========================================================================== */

.fwk-card {
    border-radius: 8px;
}

.fwk-card-default {
    background-color: #fff;
    color: var(--fw-black);
    box-shadow: var(--fw-box-shadow);
}

.fwk-card-default .fwk-card-title {
    color: #222;
}

.fwk-card-default:hover {
    box-shadow: 3px 8px 16px rgba(0, 0, 0, .12);
}

.fwk-card-media-top {
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.fwk-card-body {
    padding: 30px;
}

.fwk-card-title {
    font-size: 24px;
    line-height: 1.4;
    font-weight: 700;
}

/* ==========================================================================
   Slidenav (Slider Navigation Arrows)
   ========================================================================== */

.fwk-slidenav {
    color: var(--fw-black);
}

.fwk-slidenav:hover {
    color: var(--fw-green);
}

.fwk-slidenav:active {
    color: var(--fw-green);
}

/* ==========================================================================
   Responsive - Modal
   ========================================================================== */

@media only screen and (max-width: 640px) {
    .fwk-modal-dialog .fwk-modal-close-outside {
        top: 24px;
        right: -12px;
    }
}