/**
 * FastW3B - Custom Styles
 * Page sections, fw-/fws- custom classes, and page-specific styles.
 * Loaded after design-tokens.css and ui-components.css on frontend.
 */

/* ==========================================================================
   Form Elements - Global overrides
   ========================================================================== */

.fwk-input,
.fwk-select,
.fwk-textarea {
    border-radius: 5px;
}

@media (min-width: 640px) {
    .fwk-modal-body {
        padding: 45px 50px;
    }
}

.fwk-button-small {
    font-weight: 400;
}

/* ==========================================================================
   Hero Section - Homepage Top
   ========================================================================== */

.fw-hero-top {
    color: #fff;
    margin-bottom: 20px;
    position: relative;
    background: var(--fw-linear-dark);
}

.fw-hero-top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 170px;
    bottom: 0;
    left: 0;
    background: #fff;
}

.fw-hero-top .fwk-container {
    position: relative;
    z-index: 10;
}

/* Hero Slideshow */
.fw-hero-slideshow {
    position: relative;
    margin: 30px 0;
    padding-top: 110px;
}

.fw-hero-slideshow > div {
    position: relative;
}
.fw-hero-slideshow > div[fwk-slideshow]::before,
.fw-hero-slideshow > div[fwk-slideshow]::after {
    content: '';
    width: 248px;
    height: 248px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    background: url('../images/dots_top.png') no-repeat;
}
.fw-hero-slideshow .fwk-slideshow-items,
.fw-hero-slideshow .fwk-slideshow-items li {
    overflow: visible !important;
}

.fw-hero-slideshow > div[fwk-slideshow]::after {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    transform: translateX(60%);
    background: url('../images/dots_bottom.png') no-repeat;
}

.fw-hero-slideshow h1 {
    color: #fff;
    font-size: 48px;
}

/* Hero cards slider (UIkit-based) */
#hero-cards-nav {
    position: relative;
    margin-top: 20px;
}
/* Padding inside slider-container so card shadows are visible on all sides */
#hero-cards-nav .fwk-slider-container {
    padding: 25px;
    margin: -25px;
}
/* Compact shadow (max 25px) so it fits inside slider-container padding */
#hero-cards-nav .fw-service-card {
    box-shadow: 0 8px 17px rgba(50, 52, 62, .15);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    border-bottom: 4px solid var(--fw-green);
}
/* Title: always reserves 2 lines, vertically centered, truncates if longer */
#hero-cards-nav .fw-service-card h3 {
    min-height: calc(2em * 1.3);
    line-height: 1.3;
    margin-top: 12px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#hero-cards-nav .fw-service-card h3 > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#hero-cards-nav .fw-service-card-benefits {
    text-align: left;
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.6;
    width: 100%;
}
#hero-cards-nav .fw-service-card-benefits-more {
    font-size: 12px;
    color: var(--fw-grey);
    padding-left: 24px;
    margin-top: 4px;
}
#hero-cards-nav .fw-service-card:hover .fw-service-card-benefits-more,
#hero-cards-nav .fw-service-card.active .fw-service-card-benefits-more {
    color: rgba(255, 255, 255, .55);
}
#hero-cards-nav .fw-service-card-tags {
    margin-top: auto;
    padding-top: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
}
#hero-cards-nav .fw-service-card-tags .fwk-label {
    font-size: 10px;
    text-transform: uppercase;
}
#hero-cards-nav .fw-service-card-benefits ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#hero-cards-nav .fw-service-card-benefits li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
}
#hero-cards-nav .fw-service-card-benefits li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 8px;
    border-left: 2px solid var(--fw-green);
    border-bottom: 2px solid var(--fw-green);
    transform: rotate(-45deg);
}
#hero-cards-nav .fw-service-card:hover .fw-service-card-benefits li::before,
#hero-cards-nav .fw-service-card.active .fw-service-card-benefits li::before {
    border-color: #fff;
}
/* Arrows sit 10px above hero dark/white edge (white band = 170px tall) — always on dark bg */
.fws-hero-arrow {
    position: absolute;
    bottom: 180px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
}
#hero-cards-nav:hover .fws-hero-arrow {
    opacity: 1;
}
.fws-hero-arrow:hover {
    color: rgba(255, 255, 255, .7);
}
.fws-hero-arrow-prev { left: -40px; transform: translateY(-35px); }
.fws-hero-arrow-next { right: -40px; transform: translateY(-35px); }
.fws-hero-arrow::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.fws-hero-arrow-prev::before { transform: rotate(-135deg); margin-left: 4px; }
.fws-hero-arrow-next::before { transform: rotate(45deg); margin-right: 4px; }

/* Card badges */
.fw-service-card-badges {
    margin-bottom: 8px;
}
.fw-service-card-badges .fwk-label {
    font-size: 10px;
    text-transform: uppercase;
}

/* Slideshow container */
.fw-hero-slideshow .fwk-slideshow-items {
    position: relative;
    z-index: 100;
}

.fw-hero-slideshow p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    line-height: 1.78;
}

/* Hero image styling */
.fw-hero-slideshow .fwk-grid img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Slideshow navigation arrows (mobile only, positioned at bottom) */
.fw-hero-slideshow [fwk-slidenav-previous],
.fw-hero-slideshow [fwk-slidenav-next] {
    color: white;
    position: absolute;
    left: 0;
    bottom: -100px;
    z-index: 1000;
}

.fw-hero-slideshow [fwk-slidenav-next] {
    left: auto;
    right: 0;
}

/* Service Cards in Hero */
.fw-service-card {
    color: var(--fw-black);
    padding: 25px 30px;
    text-align: center;
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--fw-box-shadow);
    transition: all var(--fw-transition);
}

.fw-service-card h3 {
    margin-top: 25px;
    font-size: 22px;
}

/* Service card icon styling */
.fw-service-card svg .color-dark {
    color: var(--fw-dark);
}

.fw-service-card svg .color-green {
    color: var(--fw-green-warm);
}

.fw-service-card:hover svg .color-dark,
.fw-service-card.active svg .color-dark {
    color: #fff;
}

.fw-service-card p {
    color: var(--fw-grey);
    margin: 10px 0;
    line-height: 1.69;
}

.fw-service-card .fw-service-meta {
    color: var(--fw-black);
}

.fw-service-card:hover,
.fw-service-card.active {
    cursor: pointer;
    background: var(--fw-green-cold) url('../images/slider_hover_bg.jpg') no-repeat;
    background-size: cover;
    color: #fff;
}

.fw-service-card:hover h3,
.fw-service-card.active h3 {
    color: #fff;
}

.fw-service-card:hover p,
.fw-service-card.active p {
    color: rgba(255, 255, 255, 0.55);
}

.fw-service-card:hover .fw-service-meta,
.fw-service-card.active .fw-service-meta {
    color: #fff;
}

/* ==========================================================================
   Product Section - Homepage
   ========================================================================== */

.fw-product-section {
    padding: 60px 0;
    position: relative;
}

@media (min-width: 960px) {
    .fw-product-section {
        padding: 100px 0;
    }
}

.fw-product-reverse .fw-product-header {
    flex-direction: row-reverse;
}

.fw-product-section-watermark {
    color: #fff;
    font-size: 100px;
    font-weight: bold;
    line-height: 70px;
    text-align: right;
    position: absolute;
    top: 0;
    right: 20%;
    white-space: nowrap;
}

.fw-product-header {
    display: flex;
    gap: 30px;
    /* align-items: center; */
}

.fw-product-header-image {
    flex: 0 0 50%;
    max-width: 50%;
}

.fw-product-header-image img {
    max-width: 100%;
    height: auto;
}

.fw-product-header-info {
    flex: 1;
}

.fw-product-header-info .fw-product-subtitle {
    color: var(--fw-green-warm);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.fw-product-header-info h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 15px;
}

.fw-product-header-info .fw-product-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.fw-product-header-info .fw-product-stats span {
    color: var(--fw-grey);
}

.fw-product-header-info .fw-product-stats strong {
    color: var(--fw-black);
    font-size: 18px;
}

.fw-product-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0;
}

.fw-product-feature {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fw-product-feature svg {
    color: var(--fw-green);
    width: 24px;
    height: 24px;
}

/* Addon Cards — match Joomla frontpage with hover overlay */
.fw-addon-card {
    position: relative;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--fw-box-shadow-short);
    height: 100%;
}

.fw-addon-card-image {
    overflow: hidden;
}

.fw-addon-card-image img {
    width: 100%;
    display: block;
}

.fw-addon-card-content {
    padding: 15px;
}

.fw-addon-card-content h4 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fw-addon-btn {
    display: inline-block;
    padding: 0 15px;
    line-height: 34px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 10px;
    background: #f4f4f4;
    color: var(--fw-green);
}

/* Hover overlay — fades in over the card */
.fw-addon-card-hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    border-radius: 10px;
    background: url('../images/site/adddon_bg.png') no-repeat 0 0;
    background-size: cover;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
}

.fw-addon-card:hover .fw-addon-card-hover {
    opacity: 1;
}

.fw-addon-card-hover h4 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}

.fw-addon-hover-desc {
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    max-height: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.fw-addon-hover-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 0 15px;
    line-height: 34px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 10px;
    background: var(--fw-green-warm);
    color: #fff;
    text-align: center;
}

/* Service Cards in Product Section — match Joomla fws-product-list-item-services */
.fw-service-item {
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    border-top: 3px solid var(--fw-green);
    box-shadow: var(--fw-box-shadow-short);
    transition: all 0.3s ease;
}

.fw-service-item:hover {
    color: #fff;
    background: var(--fw-green-cold) url('../images/slider_hover_bg.jpg') no-repeat;
    background-size: cover;
}

.fw-service-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.fw-service-item h4 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fw-service-item:hover h4 {
    color: #fff;
}

.fw-service-item h4 svg {
    color: var(--fw-green-warm);
    margin-right: 5px;
}

.fw-service-item:hover h4 svg {
    color: #fff;
}

.fw-service-item p {
    color: var(--fw-grey);
    height: 57px;
    margin: 0 0 15px;
    font-size: 12px;
    line-height: 1.55;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.fw-service-item:hover p {
    color: #fff;
}

.fw-service-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fw-service-item-meta > div {
    color: var(--fw-black);
    font-size: 14px;
    line-height: 1.7;
}

.fw-service-item:hover .fw-service-item-meta > div,
.fw-service-item:hover .fw-service-item-meta strong {
    color: #fff;
}

.fw-service-item-meta strong {
    color: var(--fw-black);
}

.fw-service-item-meta .fw-addon-link {
    display: inline-block;
    padding: 0 15px;
    line-height: 34px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 10px;
    background: #f4f4f4;
    color: var(--fw-green);
    border: none;
    transition: all var(--fw-transition);
}

.fw-service-item:hover .fw-service-item-meta .fw-addon-link {
    background: var(--fw-green-warm);
    color: #fff;
}

/* ==========================================================================
   About Section
   ========================================================================== */

.fw-about-section {
    background: var(--fw-grey-background);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.fw-about-section {
    background: url('../images/site/about_bg.jpg') no-repeat;
    background-position: 85% 100%;
}

.fw-about-section .fw-about-label {
    color: var(--fw-green-warm);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

.fw-about-section h2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

.fw-about-section .fw-about-subtitle {
    font-size: 18px;
    color: var(--fw-grey);
    margin-bottom: 40px;
}

.fw-about-features {
    margin-bottom: 40px;
}

.fw-about-feature {
    text-align: center;
}

.fw-about-feature h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.fw-about-feature p {
    color: var(--fw-grey);
    font-size: 14px;
}

.fw-about-cta {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: var(--fw-yellow);
    color: var(--fw-black);
    padding: 15px 30px;
    border-radius: 10px;
    font-weight: 600;
    transition: all var(--fw-transition);
}

.fw-about-cta:hover {
    background: var(--fw-green);
    color: #fff;
    text-decoration: none;
}

/* "Let's start" button — match Joomla #home-about .uk-button-primary */
#home-about .fwk-button.fwk-button-primary {
    max-width: none;
    padding: 15px 110px 15px 30px;
    line-height: 1.5;
    text-align: left;
    white-space: nowrap;
}

#home-about .fwk-button.fwk-button-primary svg {
    float: left;
    margin-right: 15px;
}

#home-about .fwk-button.fwk-button-primary svg path {
    fill: #B69122;
}

#home-about .fwk-button.fwk-button-primary:hover svg path {
    fill: #fff;
}

#home-about .fwk-button.fwk-button-primary span {
    display: block;
    font-size: 20px;
}

.fw-about-image {
    position: absolute;
    right: 5%;
    bottom: 0;
    max-width: 400px;
}

/* ==========================================================================
   Blog Section - Homepage
   ========================================================================== */

.fw-blog-section {
    padding: 80px 0;
    background: #F3F3F3;
}

.fw-blog-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.fw-blog-section-header h2 {
    font-size: 40px;
    font-weight: 700;
    margin: 0;
}

.fw-blog-section-header a {
    display: inline-block;
    background: var(--fw-yellow);
    color: var(--fw-black);
    padding: 0 30px;
    line-height: 46px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    transition: all var(--fw-transition);
    text-decoration: none;
}

.fw-blog-section-header a:hover {
    background: var(--fw-green-warm);
    color: #fff;
    text-decoration: none;
}

/* Blog Cards */
/* Blog cards — homepage style (matches Joomla #home-blog) */
.fw-blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-bottom: 3px solid var(--fw-green);
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
    transition: box-shadow 0.1s ease-in-out;
    text-decoration: none;
    color: inherit;
}
.fw-blog-card:hover {
    box-shadow: 0 14px 25px rgba(0, 0, 0, .16);
}
.fw-blog-card-media img {
    width: 100%;
    display: block;
}
.fw-blog-card-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.fw-blog-card-heading {
    font-size: 17px;
    font-weight: 500;
    margin: 0 0 10px;
    line-height: 1.54;
    color: var(--fw-black);
}
.fw-blog-card:hover .fw-blog-card-text {
    color: var(--fw-black);
}
.fw-blog-card-text {
    color: var(--fw-grey);
    font-size: 13px;
    line-height: 1.5;
    flex: 1;
}
.fw-blog-card-btn {
    display: inline-block;
    padding: 0 30px;
    line-height: 48px;
    background: var(--fw-yellow);
    color: var(--fw-black);
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    text-align: center;
    transition: background 0.1s ease-in-out;
}
.fw-blog-card:hover .fw-blog-card-btn {
    background: var(--fw-green-warm);
    color: #fff;
}
.fw-blog-card-placeholder {
    background: #f5f5f5;
    padding-top: 56.25%;
    position: relative;
}
.fw-blog-card-placeholder span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.fw-blog-card-category {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--fw-green-warm);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}
/* Blog category nav — active highlight */
.fw-blog-nav > .fwk-active > a {
    color: var(--fw-black) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--fw-green);
    padding-bottom: 5px;
}

/* Blog hero card (leading article, horizontal on desktop) */
.fw-blog-hero {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-bottom: 3px solid var(--fw-green);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
    transition: box-shadow 0.1s ease-in-out;
    text-decoration: none;
    color: inherit;
    margin-bottom: 30px;
}
.fw-blog-hero:hover {
    box-shadow: 0 14px 25px rgba(0, 0, 0, .16);
}
.fw-blog-hero-media img {
    width: 100%;
    display: block;
}
.fw-blog-hero-content {
    padding: 25px;
}
.fw-blog-hero-heading {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 8px;
    color: var(--fw-black);
}
.fw-blog-hero:hover .fw-blog-hero-text {
    color: var(--fw-black);
}
.fw-blog-hero:hover .fw-blog-card-btn {
    background: var(--fw-green-warm);
    color: #fff;
}
.fw-blog-hero-text {
    color: var(--fw-grey);
    font-size: 15px;
    line-height: 1.7;
    margin-top: 12px;
}
@media (min-width: 960px) {
    .fw-blog-hero {
        flex-direction: row;
        border-bottom: none;
        border-right: 3px solid var(--fw-green);
    }
    .fw-blog-hero-media {
        width: 50%;
        flex-shrink: 0;
    }
    .fw-blog-hero-media img {
        height: 100%;
        object-fit: cover;
    }
    .fw-blog-hero-content {
        width: 50%;
        padding: 35px 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .fw-blog-hero-heading {
        font-size: 28px;
    }
}

/* Article meta badges */
.fw-article-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.4;
}
.fw-article-badge-category {
    background: var(--fw-green);
    color: #fff;
}
.fw-article-badge-category:hover {
    background: var(--fw-green-warm);
    color: #fff;
    text-decoration: none;
}
.fw-article-badge-date {
    background: #f0f0f0;
    color: var(--fw-grey);
}
.fw-article-badge-tag {
    background: #f0f0f0;
    color: var(--fw-black);
}
.fw-article-badge-tag:hover {
    background: var(--fw-yellow);
    color: var(--fw-black);
    text-decoration: none;
}

/* Blog pagination */
.fw-content-section .fwk-pagination {
    gap: 6px;
}
.fw-content-section .fwk-pagination > li > a,
.fw-content-section .fwk-pagination > li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    border-radius: 5px;
    font-size: 14px;
    padding: 0;
}
.fw-content-section .fwk-pagination > li > a:hover {
    background: #f0f0f0;
}
.fw-content-section .fwk-pagination > li.fwk-active > span {
    background: var(--fw-dark);
    color: #fff;
    font-weight: 600;
}

/* Search documentation results — reuses fwdoc styles */
.fw-search-doc-group {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
}
.fw-search-doc-group-header.fwdoc-header {
    padding: 20px 30px;
    margin-bottom: 0;
    border-radius: 0;
}
.fw-search-doc-group-name {
    font-size: 2rem;
    font-weight: 600;
    color: var(--fw-black);
}
.fw-search-doc-list.fwk-card {
    border-radius: 0;
    margin-top: 0;
    padding: 10px 30px 20px;
    box-shadow: none;
}
.fw-search-doc-entry {
    display: block;
    padding: 20px 0;
    border-bottom: 1px solid #e5e5e5;
}
.fw-search-doc-entry:last-child {
    border-bottom: none;
}
h4.fw-search-doc-entry-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.fw-search-doc-entry-icon {
    color: var(--fw-green);
    flex-shrink: 0;
}
.fw-search-doc-entry:hover h4.fw-search-doc-entry-title {
    color: var(--fw-primary, #1e87f0);
}
p.fw-search-doc-entry-text {
    color: #666;
    margin: 8px 0 0;
    padding-left: 28px;
}

/* About page service cards (rich variant) */
.fws-about-services {
    margin-top: 30px;
}
.fws-about-services .fwk-slider-container {
    padding: 25px;
    margin: -25px;
}
.fws-service-card-rich {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 9px 20px rgba(0, 0, 0, .12);
    transition: box-shadow 0.2s ease;
}
.fws-service-card-rich:hover {
    box-shadow: 0 9px 20px rgba(0, 0, 0, .12);
}
.fws-service-card-rich-image {
    position: relative;
}
.fws-service-card-rich-star {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: var(--fw-dark);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    color: var(--fw-yellow);
}
.fws-service-card-rich-image img {
    width: 100%;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
}
.fws-service-card-rich-body {
    padding: 22px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.fws-service-card-rich-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--fw-black);
    margin: 0 0 10px;
}
.fws-service-card-rich-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}
/* Category badge colors (need !important to override global .fwk-label yellow) */
.fwk-label.fws-badge-category { background: var(--fw-dark) !important; color: #fff !important; }
.fwk-label.fws-badge-category-real-estate { background: var(--fw-green) !important; }
.fwk-label.fws-badge-category-media-gallery { background: #7B61C2 !important; }
.fwk-label.fws-badge-category-food-restaurant { background: #E68A2E !important; }
.fwk-label.fws-badge-category-custom-dev { background: var(--fw-green-cold) !important; }
.fwk-label.fws-badge-category-setup { background: #3B82F6 !important; }
.fwk-label.fws-badge-category-maintenance { background: #3B82F6 !important; }

/* Services listing filter buttons (matches service page hero nav) */
.fws-services-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.fws-services-filter-btn {
    margin: 5px;
    padding: 0 25px;
    line-height: 40px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .12);
    color: var(--fw-grey);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.fws-services-filter-btn:hover {
    background: rgba(0, 0, 0, .04);
    border-color: rgba(0, 0, 0, .2);
    color: var(--fw-black);
}
.fws-services-filter-btn.fwk-active {
    background: var(--fw-dark);
    border-color: var(--fw-dark);
    color: #fff;
}
.fws-service-card-rich-desc {
    font-size: 15px;
    color: var(--fw-grey);
    line-height: 1.6;
    margin-bottom: 18px;
    flex: 1;
    min-height: 0;
}
.fws-service-card-rich:hover .fws-service-card-rich-desc {
    color: #555;
}
.fws-service-card-rich-meta {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 12px 16px;
    border-left: 3px solid var(--fw-green);
}
.fws-service-card-rich-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.fws-service-card-rich-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--fw-black);
}
.fws-service-card-rich-delivery {
    font-size: 13px;
    font-weight: 500;
    color: var(--fw-black);
}
.fws-service-card-rich-packages {
    font-size: 12px;
    color: #999;
    font-weight: 500;
    margin-top: 0;
}
.fws-service-card-rich-link {
    display: block;
    text-align: right;
    font-size: 14px;
    color: var(--fw-green);
    font-weight: 500;
    margin-top: 15px;
}
.fws-service-card-rich:hover .fws-service-card-rich-price {
    color: var(--fw-green);
}
.fws-service-card-rich-arrow {
    margin-left: 8px;
}
.fws-service-card-rich:hover .fws-service-card-rich-arrow {
    color: var(--fw-black);
}

/* About services carousel dot nav */
.fws-about-services .fwk-dotnav > * > * {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #ddd;
    transition: all 0.2s ease;
}
.fws-about-services .fwk-dotnav > .fwk-active > * {
    width: 24px;
    background: var(--fw-green);
}

/* Content section padding (after breadcrumbs) */
.fw-content-section {
    padding-top: 40px !important;
    padding-bottom: 70px !important;
}

/* Search results page */
.fw-search-results-form {
    border-bottom: 1px solid #e5e5e5;
}
.fw-search-results-form .fwk-search-input {
    width: 100%;
    font-size: 30px;
    color: var(--fw-black);
    padding-left: 40px;
    height: 50px;
    text-align: center;
}
.fw-search-results-form [fwk-search-icon] {
    color: var(--fw-black);
}
/* Search tabs */
.fw-search-tabs {
    gap: 0;
}
.fw-search-tabs {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 0;
}
.fw-search-tabs > li > a {
    padding: 10px 20px;
    color: var(--fw-grey);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    margin-bottom: -1px;
    background: none;
}
.fw-search-tabs > li > a:hover {
    color: var(--fw-black);
    background: #f8f8f8;
}
.fw-search-tabs > li.fwk-active > a {
    color: var(--fw-black);
    font-weight: 600;
    background: #fff;
    border-color: #e5e5e5;
}
.fw-search-tab-badge {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 10px;
    background: #e5e5e5;
    color: var(--fw-grey);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    margin-left: 4px;
}
.fw-search-tabs > li.fwk-active .fw-search-tab-badge {
    background: var(--fw-yellow);
    color: var(--fw-black);
}
.fw-search-total {
    color: var(--fw-grey);
    font-size: 14px;
}
.fw-search-total-badge {
    display: inline-block;
    min-width: 24px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #e5e5e5;
    color: var(--fw-black);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    margin-left: 4px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.fw-footer {
    color: #fff;
    line-height: 1.5;
    background: var(--fw-dark);
    padding: 40px 0;
}

.fw-footer .fw-footer-text {
    color: rgba(255, 255, 255, 0.34);
    font-size: 11px;
    line-height: 1.5;
}

.fw-footer h3,
.fw-footer h5 {
    color: #fff;
    margin: 0 0 15px;
    font-size: 16px;
    font-weight: 700;
}

.fw-footer .fwk-nav a,
.fw-footer a {
    color: #fff;
}

.fw-footer .fwk-nav a:hover,
.fw-footer a:hover {
    color: var(--fw-yellow);
    text-decoration: underline;
}

.fw-footer .fwk-nav-divider {
    border-top-color: rgba(0, 0, 0, 0.1);
}

.fw-footer .fwk-icon-button {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: none;
}

.fw-footer .fwk-icon-button:hover {
    color: var(--fw-black);
    background: var(--fw-yellow);
}

.fw-footer-bottom {
    margin-top: 10px;
}

.fw-footer-copyright {
    color: #fff;
    font-size: 15px;
}

/* ==========================================================================
   Go to Top Button
   ========================================================================== */

.fw-totop {
    position: fixed;
    bottom: 20px;
    right: 100px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}
.fw-totop.visible {
    opacity: 1;
    visibility: visible;
}

.fw-totop .fwk-button {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--fw-green);
    color: var(--fw-green);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* ==========================================================================
   Product Cards (Listing Page)
   ========================================================================== */

.fw-product-card {
    border: 1px solid var(--fw-border);
    border-radius: 10px;
    overflow: hidden;
    transition: all var(--fw-transition);
}

.fw-product-card:hover {
    border-color: var(--fw-green);
    box-shadow: 0 8px 24px rgba(52, 165, 93, 0.15);
}

.fw-product-card .fw-product-image {
    position: relative;
    padding-top: 60%;
    background: var(--fw-background-muted);
}

.fw-product-card .fw-product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fw-product-card .fw-product-content {
    padding: 20px;
}

.fw-product-card .fw-product-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.fw-product-card .fw-product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fw-green);
}

.fw-product-card .fw-product-price-old {
    font-size: 0.9rem;
    color: var(--fw-muted);
    text-decoration: line-through;
    margin-left: 8px;
}

/* ==========================================================================
   Documentation
   ========================================================================== */

.fw-doc-sidebar {
    position: sticky;
    top: 100px;
}

.fw-doc-nav .fwk-nav > li > a {
    padding: 8px 0;
}

.fw-doc-nav .fwk-nav-sub a {
    padding: 5px 0 5px 15px;
}

.fw-doc-content {
    line-height: 1.8;
}

.fw-doc-content h2 {
    margin-top: 40px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--fw-border);
}

.fw-doc-content pre {
    background: var(--fw-background-muted);
    padding: 20px;
    border-radius: 4px;
    overflow-x: auto;
}

.fw-doc-content code {
    background: var(--fw-background-muted);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
}

.fw-doc-content pre code {
    background: none;
    padding: 0;
}

/* ==========================================================================
   Status Labels
   ========================================================================== */

.fw-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.fw-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

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

.fw-status-pending::before {
    background: var(--fw-yellow);
}

.fw-status-closed::before {
    background: var(--fw-muted);
}

.fw-status-error::before {
    background: var(--fw-danger);
}

/* ==========================================================================
   Client Section
   ========================================================================== */

.fw-client-nav {
    background: var(--fw-background);
    border-radius: 10px;
    box-shadow: var(--fw-box-shadow-short);
    padding: 20px;
}

.fw-client-nav .fwk-nav > li > a {
    padding: 12px 15px;
    border-radius: 4px;
}

.fw-client-nav .fwk-nav > li > a:hover,
.fw-client-nav .fwk-nav > li.fwk-active > a {
    background: var(--fw-background-muted);
}

.fw-client-content {
    background: var(--fw-background);
    border-radius: 10px;
    box-shadow: var(--fw-box-shadow-short);
    padding: 30px;
}

/* Client Section Layout */
.fw-client-layout {
    background: var(--fw-grey-background);
}
.fw-client-breadcrumbs {
    padding: 20px 0 30px;
}

/* Client Section - Side Menu (Joomla style) */
.fws-user-menu-short .fwk-card {
    border-radius: 8px;
}

.fws-user-menu-short img {
    width: 77px;
    height: 77px;
    object-fit: cover;
    border-radius: 50%;
}

.fws-user-menu-avatar {
    position: relative;
}

.fws-user-menu-avatar::after {
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    top: 4px;
    right: -1px;
    background: var(--fw-green-warm);
    border: 2px solid white;
    border-radius: 50%;
}

.fws-user-menu-short .fwk-text-small {
    color: #ABABAB;
    margin-top: 3px;
}

.fws-user-menu-short .fwk-button.fwk-button-small.fwk-button-text.fwk-text-muted {
    padding-right: 0;
}

.fws-user-menu-short .fwk-button.fwk-button-small.fwk-button-text.fwk-text-muted:after {
    content: none;
}

.fws-user-menu-list a:hover {
    text-decoration: none;
}

.fws-user-menu-list .fwk-card {
    position: relative;
    transition: all .1s ease-in-out;
    border-radius: 8px;
}

.fws-user-menu-list .fwk-card svg {
    color: var(--fw-green);
}

.fws-user-menu-list .fwk-card .fwk-badge {
    color: var(--fw-black) !important;
    min-width: 0;
    height: 26px;
    padding: 5px 0 5px 7px;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    font-weight: bold;
    line-height: 16px;
    background: var(--fw-yellow);
    border-radius: 0 10px 0 40px;
}

.fws-user-menu-list .fwk-card:hover *:not(.fwk-badge) {
    color: var(--fw-green) !important;
}
.fws-user-menu-list .fwk-card:hover .fwk-label,
.fws-user-menu-list li.fwk-active .fwk-label {
    color: #fff !important;
}

.fws-user-menu-list li.fwk-active .fwk-card {
    color: white;
    background: url(../images/site/user_menu_item_bg.png) no-repeat 0 0;
    background-size: cover;
}

.fws-user-menu-list li.fwk-active .fwk-card *:not(.fwk-badge) {
    color: white !important;
}

.fws-user-menu-list li.fwk-active .fwk-card::after {
    color: white;
    content: '>';
    position: absolute;
    font-size: 22px;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

/* Profile View - grey labels */
.fws-user-profile span {
    color: var(--fw-grey);
}

/* Profile Edit - button group toggles (sex, tech level) */
.fws-profile-edit .fws-sex-group .fwk-button,
.fws-profile-edit .fws-tech-level-group .fwk-button {
    min-width: 80px;
}
.fws-profile-edit .fws-sex-group .fwk-button-secondary,
.fws-profile-edit .fws-tech-level-group .fwk-button-secondary {
    background-color: #fff;
    border-color: var(--fw-green);
    color: var(--fw-green);
    z-index: 2;
}
.fws-profile-edit .fws-sex-group .fwk-button-default:hover,
.fws-profile-edit .fws-tech-level-group .fwk-button-default:hover {
    background: #f4f4f4;
    color: var(--fw-black);
}
.fws-profile-edit .fws-sex-group .fwk-button-secondary:hover,
.fws-profile-edit .fws-tech-level-group .fwk-button-secondary:hover {
    background-color: #fff;
    color: var(--fw-black);
}

/* Birthday date input - green calendar icon */
input[type="date"] {
    color: var(--fw-green);
    -webkit-text-fill-color: var(--fw-black);
}
input[type="date"]::-webkit-calendar-picker-indicator {
    -webkit-text-fill-color: var(--fw-green);
    color: var(--fw-green);
    filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(383%) hue-rotate(101deg) brightness(93%) contrast(88%);
    cursor: pointer;
}
input[type="date"]::-webkit-date-and-time-value {
    -webkit-text-fill-color: var(--fw-black);
}

.fwk-label {
    display: inline-block;
    padding: 2px 8px;
    background: #ffbf00;
    line-height: 1.78;
    font-size: 12px;
    color: #fff;
    vertical-align: middle;
    white-space: nowrap;
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
    border-radius: 5px;
}

.fwk-label-success {
    background-color: #6eb700;
    color: #fff;
}

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

.fwk-label-danger {
    background-color: #ef2f2f;
    color: #fff;
}
.fwk-label-muted {
    background-color: #989898;
}

.fws-user-menu-list .fwk-label,
.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%;
}

.fws-user-menu-list .fwk-text-lead .fwk-label.fwk-label-warning,
.fws-user-menu-list li.fwk-active .fwk-card :not(.fwk-badge) .fwk-text-lead .fwk-label.fwk-label-warning,
.fw-client-dropmenu .fwk-text-lead .fwk-label.fwk-label-warning,
.fw-client-dropmenu li.fwk-active .fwk-card :not(.fwk-badge) .fwk-text-lead .fwk-label.fwk-label-warning {
    color: var(--fw-black) !important;
    background: var(--fw-yellow);
}

.fws-user-menu-list .fwk-text-lead .fwk-label.fwk-label-danger,
.fw-client-dropmenu .fwk-text-lead .fwk-label.fwk-label-danger {
    color: white !important;
}

.fws-user-menu-list .fwk-text-meta {
    font-size: 13px;
    color: #777;
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.fw-pricing-card {
    background: var(--fw-background);
    border: 2px solid var(--fw-border);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all var(--fw-transition);
}

.fw-pricing-card:hover {
    border-color: var(--fw-green);
}

.fw-pricing-card.fw-pricing-featured {
    border-color: var(--fw-green);
    transform: scale(1.05);
    box-shadow: 0 12px 40px rgba(52, 165, 93, 0.2);
}

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

.fw-pricing-card .fw-pricing-price {
    font-size: 3rem;
    font-weight: 700;
    color: var(--fw-green);
    line-height: 1;
}

.fw-pricing-card .fw-pricing-period {
    font-size: 0.9rem;
    color: var(--fw-muted);
}

.fw-pricing-card .fw-pricing-features {
    list-style: none;
    padding: 0;
    margin: 25px 0;
}

.fw-pricing-card .fw-pricing-features li {
    padding: 8px 0;
    border-bottom: 1px solid var(--fw-border);
}

.fw-pricing-card .fw-pricing-features li:last-child {
    border-bottom: none;
}

/* ==========================================================================
   Support Tickets
   ========================================================================== */

.fw-ticket-list {
    border: 1px solid var(--fw-border);
    border-radius: 10px;
    overflow: hidden;
}

.fw-ticket-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--fw-border);
    transition: background var(--fw-transition);
}

.fw-ticket-item:last-child {
    border-bottom: none;
}

.fw-ticket-item:hover {
    background: var(--fw-background-muted);
}

.fw-ticket-item .fw-ticket-id {
    font-weight: 600;
    color: var(--fw-green);
    min-width: 80px;
}

.fw-ticket-item .fw-ticket-subject {
    flex: 1;
    font-weight: 500;
}

.fw-ticket-item .fw-ticket-date {
    font-size: 0.85rem;
    color: var(--fw-muted);
}

.fw-message {
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.fw-message-user {
    background: var(--fw-background-muted);
    margin-right: 60px;
}

.fw-message-admin {
    background: rgba(52, 165, 93, 0.1);
    margin-left: 60px;
}

.fw-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.fw-message-author {
    font-weight: 600;
}

.fw-message-date {
    font-size: 0.85rem;
    color: var(--fw-muted);
}

/* Rating buttons (close ticket form) */
:root {
    --fws-rate-1: #EF2F2F;
    --fws-rate-2: #F35323;
    --fws-rate-3: #F77718;
    --fws-rate-4: #FB9B0C;
    --fws-rate-5: #FFBF00;
    --fws-rate-6: #E2BD00;
    --fws-rate-7: #C5BC00;
    --fws-rate-8: #A8BA00;
    --fws-rate-9: #8BB900;
    --fws-rate-10: #6EB700;
}

.fwk-modal-dialog .fws-ticket-rating .fwk-button.fwk-button-secondary {
    background: #fff;
    color: var(--current-color);
    font-weight: 600;
    border: 1px solid var(--current-color);
    border-radius: 4px;
}

.fwk-modal-dialog .fws-ticket-rating .fwk-button.fwk-button-secondary:hover {
    background: #fff;
    color: var(--current-color);
    opacity: 0.8;
}

.fwk-modal-dialog .fws-ticket-rating .fwk-button.fwk-button-secondary.fwk-active {
    color: white;
    background: var(--current-color);
    opacity: 1;
}

.fwk-modal-dialog .fws-ticket-rating .fwk-button[data-value="1"] { --current-color: var(--fws-rate-1); }
.fwk-modal-dialog .fws-ticket-rating .fwk-button[data-value="2"] { --current-color: var(--fws-rate-2); }
.fwk-modal-dialog .fws-ticket-rating .fwk-button[data-value="3"] { --current-color: var(--fws-rate-3); }
.fwk-modal-dialog .fws-ticket-rating .fwk-button[data-value="4"] { --current-color: var(--fws-rate-4); }
.fwk-modal-dialog .fws-ticket-rating .fwk-button[data-value="5"] { --current-color: var(--fws-rate-5); }
.fwk-modal-dialog .fws-ticket-rating .fwk-button[data-value="6"] { --current-color: var(--fws-rate-6); }
.fwk-modal-dialog .fws-ticket-rating .fwk-button[data-value="7"] { --current-color: var(--fws-rate-7); }
.fwk-modal-dialog .fws-ticket-rating .fwk-button[data-value="8"] { --current-color: var(--fws-rate-8); }
.fwk-modal-dialog .fws-ticket-rating .fwk-button[data-value="9"] { --current-color: var(--fws-rate-9); }
.fwk-modal-dialog .fws-ticket-rating .fwk-button[data-value="10"] { --current-color: var(--fws-rate-10); }

#fws-close-popup .fwk-textarea { line-height: 1.6; }

/* ==========================================================================
   Checkout
   ========================================================================== */

.fw-checkout-summary {
    background: var(--fw-background-muted);
    border-radius: 10px;
    padding: 25px;
    position: sticky;
    top: 100px;
}

.fw-checkout-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--fw-border);
}

.fw-checkout-item:last-child {
    border-bottom: none;
}

.fw-checkout-total {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    margin-top: 15px;
    border-top: 2px solid var(--fw-border);
    font-size: 1.25rem;
    font-weight: 700;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fw-fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.fw-text-gradient {
    background: var(--fw-linear-dark);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fw-bg-gradient {
    background: var(--fw-linear-dark);
}

.fw-shadow {
    box-shadow: var(--fw-box-shadow-short);
}

.fw-shadow-lg {
    box-shadow: var(--fw-box-shadow);
}

.fw-rounded {
    border-radius: 10px;
}

.fw-rounded-lg {
    border-radius: 12px;
}

.fw-section-full {
    margin: 0 -600px;
    padding: 100px 600px;
}

.fw-box-shadow-none {
    box-shadow: none !important;
}

/* ==========================================================================
   Products - Detail Page (extracted from products/show.php)
   ========================================================================== */

.fws-product-top {
    padding: 130px 0 80px;
    position: relative;
    background-image: url('../images/products/product_bg_fwg.jpg');
    background-size: cover;
    color: white;
}
.fws-product-top::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(to right, rgba(46, 72, 87, .8), rgba(28, 49, 62, .8));
    z-index: 0;
}
/* Per-product hero backgrounds */
.fws-product-2 .fws-product-top {
    background-image: url('../images/products/product_bg_fwre.jpg');
}
.fws-product-75 .fws-product-top {
    background-image: url('../images/products/product_bg_fwfm.jpg');
}
.fws-product-7 .fws-product-top {
    background-image: url('../images/products/product_bg_fwvmr.jpg');
}
.fws-product-top .fwk-container {
    position: relative;
}
/* Decorative dots */
.fws-product-top .fwk-container::before,
.fws-product-top .fwk-container::after {
    width: 248px;
    height: 248px;
    content: '';
    position: absolute;
    top: 30px;
    left: 0;
    transform: translateX(-60%);
    background: url('../images/site/dots_top.png');
    z-index: 0;
}
.fws-product-top .fwk-container::after {
    top: 100%;
    left: 100%;
    transform: translateX(-40%) translateY(-120%);
    background: url('../images/site/dots_bottom.png');
}
.fws-product-logo {
    width: 104px;
    height: 104px;
}
.fws-product-top h1 {
    color: #fff !important;
}
.fws-product-slogan {
    color: #fff;
    width: 655px;
    max-width: 100%;
    margin: 30px auto 50px;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.7;
}
.fws-product-buttons {
    margin: 50px 0;
    font-size: 13px;
    font-weight: normal;
}
.fws-product-buttons .fwk-button {
    border-radius: 10px;
}
/* Download button - yellow background */
.fws-product-buttons .fwk-button-primary {
    display: inline-block;
    line-height: 1.5;
    padding: 12px 24px;
    background-color: var(--fw-yellow, #FFBF00) !important;
    color: #333 !important;
    border: none;
}
.fws-product-buttons .fwk-button-primary:hover {
    background-color: #e6ac00 !important;
}
.fws-product-buttons .fwk-button-primary .fwk-text-small {
    color: #9A7B1E;
    font-weight: normal;
    transition: all .1s ease-in-out;
}
.fws-product-buttons .fwk-button-primary:hover .fwk-text-small {
    color: #fff;
}
/* Subscribe button - transparent background, yellow border, white text */
.fws-product-buttons .fwk-button-secondary {
    background-color: transparent !important;
    border: 1px solid var(--fw-yellow, #FFBF00) !important;
    color: #fff !important;
}
.fws-product-buttons .fwk-button-secondary:hover {
    background-color: var(--fw-yellow, #FFBF00) !important;
    color: var(--fw-black, #323232) !important;
}
.fws-product-links {
    margin-top: 20px;
}
.fws-product-links a {
    color: #fff;
    display: inline-block;
    margin-bottom: 15px;
    white-space: nowrap;
    text-decoration: none;
}
.fws-product-links a:hover {
    color: white;
}
.fws-quick-jumps {
    margin-top: 60px;
}
.fws-quick-jumps .fwk-button {
    margin: 5px;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    color: #fff !important;
    border-radius: 10px;
}
.fws-quick-jumps .fwk-button:hover {
    background-color: rgba(255, 255, 255, .1) !important;
    border-color: rgba(255, 255, 255, .3) !important;
}

/* ==========================================================================
   Sticky page nav (products, services, addons) — slides in under the main
   header once the user has scrolled past the hero. See components/site/
   page-sticky-nav. Uses `position: fixed` + JS IntersectionObserver on the
   hero so the bar is fully hidden (off-screen) until the hero leaves view.
   ========================================================================== */
.fws-sticky-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900; /* below main header (z-index 1000) */
    background: var(--fw-linear-dark);
    box-shadow: 0 4px 13px rgba(30, 35, 66, 0.15);
    /* Hidden state: translated fully above the viewport (own-height up). */
    transform: translateY(-100%);
    transition: transform 0.25s ease;
    pointer-events: none;
    will-change: transform;
}
.fws-sticky-nav.is-visible {
    /* Visible state: slide down so the bar sits just under the main header. */
    transform: translateY(80px);
    pointer-events: auto;
}
/* Sticky bar inner list — reuses `.fws-quick-jumps .fwk-button` styling from
   the in-hero version so buttons look identical. Only layout tweaks here:
   reset the 60px hero margin, constrain to a single row with horizontal
   scroll on overflow, and keep it centered. */
.fws-sticky-nav .fws-sticky-nav-list.fws-quick-jumps {
    margin-top: 0;
    padding: 10px 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: safe center;
    align-items: center;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.fws-sticky-nav .fws-sticky-nav-list.fws-quick-jumps::-webkit-scrollbar {
    display: none;
}
.fws-sticky-nav .fws-sticky-nav-list.fws-quick-jumps .fwk-button {
    flex: 0 0 auto;
    scroll-snap-align: start;
}
/* Scroll-spy active state — matches dark header's yellow accent. */
.fws-sticky-nav .fws-sticky-nav-list.fws-quick-jumps .fwk-button.fwk-active {
    color: var(--fw-yellow, #FFBF00) !important;
    border-color: var(--fw-yellow, #FFBF00) !important;
}

/* Anchor targets: clear the main header (80px) + sticky nav (~54px) + buffer */
.fw-dark-header .fwk-section[id],
.fw-dark-header .fws-addon-features[id],
.fw-dark-header .fws-addon-features [id],
.fw-dark-header .fws-addon-cta[id] {
    scroll-margin-top: 140px;
}

/* Features Section — image-left + horizontal feature rows on the right */
.fws-product-features {
    padding: 60px 0;
    background: #f8f8f8;
}
.fws-product-features-slider {
    align-items: flex-start !important; /* override UIkit .fwk-flex-middle — image top-aligned */
}

/* Image column — fixed 500px frame, clickable zoom, aspect ratio preserved */
.fws-product-features-screen > span[fwk-lightbox] {
    display: block;
}
.fws-product-features-screen a {
    display: block;
    height: 500px;            /* fixed on desktop — prevents jump between tabs */
    padding: 15px;
    cursor: zoom-in;
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--fw-box-shadow, 0 19px 41px rgba(50, 52, 62, .15));
    transition: transform .25s ease;
}
.fws-product-features-screen a:hover {
    transform: translateY(-2px);
}
.fws-product-features-screen img {
    display: block;
    width: 100%;
    /* height: 100%; */
    object-fit: contain;      /* preserve aspect ratio inside the 500px box */
    max-height: 100%;
}
@media (max-width: 959px) {
    .fws-product-features-screen a {
        height: 380px;
    }
}
@media (max-width: 639px) {
    .fws-product-features-screen a {
        height: 280px;
    }
}

/* Feature column — vertical stack of horizontal rows */
.fws-product-features-side {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
@media (max-width: 959px) {
    .fws-product-features-side {
        margin-top: 30px;
    }
}
.fws-feature-row {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}
.fws-feature-row-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fw-green, #34A55D);
    background: #DEF5E7;
    border-radius: 50%;
    line-height: 0;
}
.fws-feature-row-icon > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.fws-feature-row-icon svg {
    display: block;
    width: 24px;
    height: 24px;
    stroke-width: 1.5;
}
.fws-feature-row-content {
    flex: 1 1 auto;
    min-width: 0;
}
.fws-feature-row-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fw-black, #323232);
    margin-bottom: 4px;
}
.fws-feature-row-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--fw-grey, #777);
}

/* More Features — prominent pill tabs + unified icon */
.fws-product-features-all .fws-feature-tabs {
    border: none !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px !important;
    padding: 0;
    list-style: none;
}
.fws-product-features-all .fws-feature-tabs > li {
    margin: 0 !important;
    padding: 0 !important;
}
.fws-product-features-all .fws-feature-tabs > li > a {
    display: block;
    padding: 11px 26px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0.2px;
    color: var(--fw-black, #323232);
    background: #fff;
    border: 2px solid #e5e5e5;
    border-radius: 30px;
    transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fws-product-features-all .fws-feature-tabs > li > a:hover {
    color: var(--fw-green, #34A55D);
    border-color: var(--fw-green, #34A55D);
    text-decoration: none;
}
.fws-product-features-all .fws-feature-tabs > li.fwk-active > a {
    color: #fff;
    background: var(--fw-green, #34A55D);
    border-color: var(--fw-green, #34A55D);
    box-shadow: 0 6px 16px rgba(52, 165, 93, 0.28);
}
.fws-product-features-all .fws-feature-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--fw-green, #34A55D);
    border-radius: 50%;
    flex-shrink: 0;
}
.fws-product-features-all .fws-feature-icon svg {
    width: 18px;
    height: 18px;
}
.fws-product-features-all .feature-name {
    margin-top: 6px;
    font-size: 15px;
    color: var(--fw-black, #323232);
}
.fws-product-features-all .fws-feature-addon-chip {
    margin-top: 4px;
    margin-bottom: 4px;
}
.fws-product-features-all .fws-feature-addon-chip .fwk-label {
    font-size: 10px;
    letter-spacing: 0.4px;
    color: var(--fw-green, #34A55D);
    background: #DEF5E7;
}

.fws-product-description {
    line-height: 1.8;
}
.fws-product-description img {
    max-width: 100%;
    height: auto;
    margin: 20px auto;
    display: block;
}

/* Addons Section */
.fws-product-addons {
    padding: 60px 0;
    color: #fff;
    background: var(--fw-dark, #2E4857);
}
.fws-product-addons .fwk-card .fwk-text-small {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: 62px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fws-product-addon .fwk-card-media-top {
    position: relative;
}
/* Tier badge — sits on the image top-left. Replaces the old diagonal free ribbon. */
.fws-product-addon .fwk-card-media-top .fws-addon-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 20;
    display: inline-block;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #fff;
    background: var(--fw-dark, #2E4857);
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.fws-product-addon .fws-addon-badge-free {
    background: var(--fw-green-warm, #97BA2D);
}
.fws-product-addon .fws-addon-badge-starter {
    background: var(--fw-yellow, #FFBF00);
    color: var(--fw-black, #323232);
}
.fws-product-addon .fws-addon-badge-professional {
    background: var(--fw-green, #34A55D);
}
.fws-product-addon .fws-addon-badge-agency {
    background: var(--fw-green-cold, #006877);
}
.fws-product-addon .fwk-card-media-top .fws-product-addon-output {
    width: 32px;
    height: 24px;
    padding: 8px 11px;
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: right;
    background: url('../images/products/addon_output.png') 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: 20;
}
.fws-product-addon .fws-product-addon-output.fws-output-design { color: #635BFF; }
.fws-product-addon .fws-product-addon-output.fws-output-layout { color: #42B3A6; }
.fws-product-addon .fws-product-addon-output.fws-output-functional { color: #FCBD06; }
.fws-product-addon a.fwk-h6 {
    display: block;
    margin-bottom: 10px;
    text-decoration: underline;
}
.fws-product-addon p:last-child { margin-bottom: 0; }

/* Product page addon tabs — prominent pill-style strip on the dark section background */
.fws-product-addons .fws-addon-tabs {
    margin-bottom: 40px;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: none;
}
.fws-product-addons .fws-addon-tabs::before,
.fws-product-addons .fws-addon-tabs::after {
    display: none;
}
.fws-product-addons .fws-addon-tabs > li {
    padding-left: 0;
    margin-top: 0;
}
.fws-product-addons .fws-addon-tabs > li > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.fws-product-addons .fws-addon-tabs > li > a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
}
.fws-product-addons .fws-addon-tabs > li.fwk-active > a {
    color: var(--fw-black, #323232);
    background: var(--fw-yellow, #FFBF00);
    border-color: var(--fw-yellow, #FFBF00);
    box-shadow: 0 3px 10px rgba(255, 191, 0, 0.35);
}
.fws-product-addons .fws-addon-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: inherit;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}
.fws-product-addons .fws-addon-tabs > li.fwk-active .fws-addon-tab-badge {
    color: var(--fw-black, #323232);
    background: rgba(0, 0, 0, 0.15);
}

/* Lead (featured) services — full-width cards with masked image */
.fws-lead-service-item,
.fws-lead-service-item canvas {
    height: 454px;
}
.fws-lead-service-item .fwk-card-media {
    width: 653px;
    max-width: 100%;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}
.fws-lead-service-item .fwk-card-media img {
    -webkit-mask-image: url('../images/site/service_clip_left.svg#service-img');
    mask-image: url('../images/site/service_clip_left.svg#service-img');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    mask-position: left;
}
.fws-lead-service-item:nth-child(2n + 1) [class*="fwk-grid"] {
    flex-direction: row-reverse;
}
.fws-lead-service-item:nth-child(2n + 1) .fwk-card-media {
    border-radius: 0 10px 10px 0;
}
.fws-lead-service-item:nth-child(2n + 1) .fwk-card-media img {
    -webkit-mask-image: url('../images/site/service_clip_right.svg#service-img');
    mask-image: url('../images/site/service_clip_right.svg#service-img');
    mask-position: right;
}
.fws-lead-service-item:nth-child(2n) .fws-lead-service-text {
    padding-right: 55px;
}
.fws-lead-service-item:nth-child(2n + 1) .fws-lead-service-text {
    padding-left: 55px;
}
.fws-lead-service-item .fws-lead-service-text .fwk-text-green {
    color: var(--fw-green, #34A55D);
}

/* Services Section (Product Detail) */
.fws-product-services {
    padding: 60px 0;
    background: var(--fw-grey-background, #f8f8f8);
}
.fws-product-list-item-services a {
    text-decoration: none;
    color: inherit;
}
.fws-product-list-item-services a:hover {
    text-decoration: none;
}
.fws-product-list-item-services .fwk-card {
    background: #fff;
    border-radius: 10px;
    border-top: 3px solid var(--fw-green, #34A55D);
    box-shadow: var(--fw-box-shadow-short, 0 9px 10px rgba(50, 52, 62, .15));
}
.fws-product-list-item-services .fwk-card .fwk-h6 svg,
.fws-product-list-item-services .fwk-card .fwk-h6 img {
    color: var(--fw-green-warm, #97BA2D);
    margin-right: 5px;
}
.fws-product-list-item-services .fwk-card p {
    color: var(--fw-grey, #989898);
    height: 57px;
    margin: 0 0 15px;
    font-size: 12px;
    line-height: 1.55;
    text-overflow: ellipsis;
    overflow: hidden;
}
.fws-product-list-item-services .fwk-card:hover {
    color: #fff !important;
    background: var(--fw-green-cold, #006877) url('../images/site/slider_hover_bg.jpg') no-repeat;
    background-size: cover;
}
.fws-product-list-item-services .fwk-card:hover svg,
.fws-product-list-item-services .fwk-card:hover .fwk-h6,
.fws-product-list-item-services .fwk-card:hover p {
    color: #fff !important;
}
.fws-product-list-item-services .fwk-card:hover .fwk-button {
    color: #fff;
    background: var(--fw-green-warm, #97BA2D);
}
.fws-product-list-item-services .fwk-card:hover .fws-badge-platform,
.fws-product-list-item-services .fwk-card:hover .fws-badge-product {
    background: rgba(255, 255, 255, 0.25);
}

/* Translations Section */
.fws-product-translations {
    padding: 60px 0;
    position: relative;
    min-height: 535px;
    overflow: hidden;
}
.fws-product-translations::before {
    width: 645px;
    height: 645px;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-48%);
    background: url('../images/site/lang_bg.jpg') no-repeat center center;
    background-size: contain;
}

/* Pricing Section (Product Detail) */
.fws-product-plans {
    padding: 60px 0;
}
.fws-pricing-toggle {
    margin-bottom: 30px;
}
.fws-pricing-toggle .fwk-button {
    margin: 0 5px;
}
.fws-pricing-toggle .fwk-button-primary {
    background: var(--fw-green, #34A55D);
}
.fws-product-plans .fwk-card {
    box-shadow: var(--fw-box-shadow, 0 19px 41px rgba(50, 52, 62, .15));
}
.fws-package,
.fws-product-plan-free,
.fws-product-plan-paid {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
}
/* Pricing card row alignment — wrapper divs for JS height-matching.
   Features row grows to fill remaining space, pushing CTA to the bottom. */
.fws-package-header-row { padding: 30px 15px 0; }
.fws-package-features-row { flex-grow: 1; }
.fws-package-price-spacing { margin-bottom: 15px; }
.fws-product-plan-free {
    background: var(--fw-grey-background, #f8f8f8);
}
.fws-product-plan-free .fwk-button {
    padding-left: 20px;
    padding-right: 20px;
    background: #fff;
}
.fws-product-plan-free .fwk-button:hover {
    background: var(--fw-green-warm, #97BA2D);
}
.fws-packages-price {
    color: var(--fw-green, #34A55D);
    font-size: 56px;
    font-weight: 200;
    line-height: 1.2;
}
.fws-packages-price span {
    font-size: 14px;
}
/* Green text (matches Joomla uk-text-green — color only) */
.fw-text-green {
    color: var(--fw-green, #34A55D) !important;
}
/* Medium weight (matches Joomla uk-text-bolder) */
.fw-text-bolder {
    font-weight: 500 !important;
}
/* Recommended pricing card (data-driven via packages.recommended) */
.fws-package-recommended {
    position: relative;
    color: #fff;
    background: var(--fw-green, #34A55D) !important;
}
.fws-package-recommended .fwk-text-lead,
.fws-package-recommended .fw-text-green,
.fws-package-recommended svg,
.fws-package-recommended .fws-packages-price,
.fws-package-recommended .fwk-text-muted {
    color: #fff !important;
}
.fws-package-recommended-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fw-yellow, #FFBF00);
    color: var(--fw-black, #323232);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 16px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(50, 52, 62, .15);
}
/* Tier hint highlight: applied when ?tier= query param matches a tier slug */
.fws-package-hinted {
    outline: 3px solid var(--fw-yellow, #FFBF00);
    outline-offset: 4px;
    animation: fws-package-hint-pulse 1.2s ease-out 1;
}
/* Renewal-year maintenance upsell banner on product page */
.fws-product-maintenance-upsell {
    padding-top: 40px;
    padding-bottom: 40px;
}
.fws-maintenance-upsell-card {
    border-left: 4px solid var(--fw-green, #34A55D);
    border-radius: 10px;
    background: #fff;
}
.fws-maintenance-upsell-icon {
    color: var(--fw-green, #34A55D);
    display: inline-block;
}
.fws-maintenance-upsell-label {
    color: var(--fw-green-warm, #97BA2D);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}
.fws-maintenance-upsell-title {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--fw-black, #323232);
}
.fws-maintenance-upsell-text {
    color: #666;
    font-size: 15px;
    line-height: 1.5;
}
@keyframes fws-package-hint-pulse {
    0% { outline-offset: 16px; outline-color: rgba(255, 191, 0, 0); }
    40% { outline-offset: 2px; outline-color: rgba(255, 191, 0, 1); }
    100% { outline-offset: 4px; outline-color: rgba(255, 191, 0, 1); }
}

/* FAQ Section */
.fws-product-faq {
    padding: 60px 0;
    background: white;
}
.fws-product-faq .fwk-h6 {
    margin-bottom: 5px;
}
.fws-product-faq .fwk-text-small {
    font-size: 14px;
}

/* Reviews Section (Product Detail) */
.fws-product-reviews {
    padding: 60px 0;
}
.fws-review-card {
    padding: 30px;
    background: #fff;
    border-bottom: 3px solid var(--fw-green, #34A55D);
    height: 100%;
}
.fws-product-review-stars span {
    color: var(--fw-yellow, #FFBF00);
    margin-right: 7px;
}
.fws-product-review-text p {
    margin: 15px 0;
}
.fws-product-review-text p:first-child {
    margin-top: 20px;
}
.fws-product-review-text p:first-child strong {
    font-size: 18px;
    font-weight: 500 !important;
}

/* Changelog Modal */
.fws-changelog-content {
    max-height: 70vh;
    overflow-y: auto;
}
.fws-changelog-version {
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.fws-changelog-version:last-child {
    border-bottom: none;
}

/* Product Detail - Responsive */
@media only screen and (max-width: 960px) {
    .fws-product-top { padding-top: 90px; }
    .fws-quick-jumps { margin-top: 40px; }
    .fws-product-translations::before {
        width: 200px;
        height: 100%;
        top: 0;
        transform: translateY(-25%) translateX(60%);
    }
    .fws-product-buttons a { display: inline-block; }
    .fws-product-buttons > div { margin-bottom: 20px; }
}
@media only screen and (max-width: 640px) {
    .fws-product-translations::before { content: none; }
}
@media only screen and (max-width: 500px) {
    .fws-product-addons-list > div { width: 100% !important; }
}

/* ==========================================================================
   Products - Service Page (matching Joomla fws_styles.css)
   ========================================================================== */

/* Service Hero Section */
.fws-service-promo {
    color: #fff;
    padding-top: 160px !important;
    background: var(--fw-linear-dark);
}
.fws-service-promo .fwk-container {
    position: relative;
}
.fws-service-promo .fwk-container > [fwk-grid] {
    position: relative;
    z-index: 10;
}
.fws-service-promo .fwk-container::before,
.fws-service-promo .fwk-container::after {
    width: 248px;
    height: 248px;
    content: '';
    position: absolute;
    top: 30px;
    left: 0;
    transform: translateX(-120%) translateY(-50%);
    background: url(../images/site/dots_top.png);
}
.fws-service-promo .fwk-container::after {
    top: 100%;
    left: 100%;
    transform: translateX(-40%) translateY(-120%);
    background: url(../images/site/dots_bottom.png);
}
.fws-service-promo .fws-item-promo,
.fws-addon-promo .fws-item-promo {
    font-size: 20px;
    line-height: 1.5;
}
.fws-addon-promo .fws-item-promo {
    margin: 30px 0 !important;
}
.fws-service-promo-image {
    position: relative;
}
.fws-service-promo-image::before {
    content: '';
    position: absolute;
    width: 174px;
    height: 174px;
    top: -93px;
    right: 22px;
    background: var(--fw-yellow);
    border-radius: 50%;
    z-index: 0;
}
.fws-service-promo-image::after {
    content: '';
    position: absolute;
    width: 68px;
    height: 68px;
    bottom: -89px;
    left: 70px;
    border: 30px solid var(--fw-green);
    border-radius: 50%;
    z-index: 2;
}
.fws-service-promo-image img {
    position: relative;
    z-index: 1;
    max-height: 400px;
    width: 100%;
    object-fit: cover;
    border-radius: 30px;
}
@media (max-width: 959px) {
    .fws-service-promo-image::before,
    .fws-service-promo-image::after {
        display: none;
    }
}
.fws-service-benefits ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fws-service-benefits ul li {
    color: rgba(255, 255, 255, .7);
    font-size: 15px;
    padding-left: 30px;
    position: relative;
}
.fws-service-benefits ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background: var(--fw-green);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.629 14.566c-.125.125-.328.125-.453 0l-3.759-3.759a.321.321 0 010-.453l.914-.914c.125-.125.328-.125.453 0l2.619 2.619 5.622-5.622c.125-.125.328-.125.453 0l.914.914c.125.125.125.328 0 .453l-6.763 6.762z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.629 14.566c-.125.125-.328.125-.453 0l-3.759-3.759a.321.321 0 010-.453l.914-.914c.125-.125.328-.125.453 0l2.619 2.619 5.622-5.622c.125-.125.328-.125.453 0l.914.914c.125.125.125.328 0 .453l-6.763 6.762z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.fws-service-benefits strong {
    color: #fff;
}

/* Reassurance callout */
.fws-service-reassurance {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}
.fws-service-reassurance-item {
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    white-space: nowrap;
}
.fws-service-reassurance-item [class*="fwk-icon"] {
    color: var(--fw-green);
}

/* Beyond Scope / Upsell */
.fws-service-beyond {
    padding: 40px 0;
}
.fws-service-beyond h3 {
    margin-bottom: 10px;
}
.fws-service-beyond .fwk-text-lead {
    margin-bottom: 20px;
    color: var(--fw-grey);
}

/* Price Block */
.fws-service-price {
    color: var(--fw-green-warm);
    padding: 10px 10px 10px 25px;
    margin-right: 80px;
    background: rgba(0, 0, 0, .15);
    border-radius: 10px;
}
.fws-service-price-starting {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.fws-service-price-number {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
}
.fws-service-price-packages {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin-bottom: 6px;
}

/* Service Add-ons Section */
.fws-service-addon-card {
    padding: 30px;
    background: #fff;
    box-shadow: var(--fw-box-shadow);
    border-radius: 10px;
    border-top: 3px solid var(--fw-green);
    text-align: center;
}
.fws-service-addon-card h4 {
    margin: 0 0 8px;
}
.fws-service-addon-tag {
    display: inline-block;
    padding: 2px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--fw-dark);
    background: #f0f0f0;
    border-radius: 20px;
    margin-bottom: 12px;
}
.fws-service-addon-card p {
    font-size: 14px;
    color: var(--fw-grey);
    margin: 0 0 15px;
}
.fws-service-addon-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--fw-green);
}

/* Service Variations Section */
/* Body content from DB uses uk-grid attribute — match with attribute selector */
.fws-service-variations [uk-grid] > div:first-child,
.fws-service-variations .fwk-grid > div:first-child {
    min-height: 500px;
    margin-top: -100px;
    transform: translateY(100px);
    background: url(../images/site/service_woman_temp.jpg) center bottom no-repeat;
    background-size: contain;
}
/* Aliases for uk- grid classes in DB body content */
.fws-service-variations [uk-grid] {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.fws-service-variations .uk-child-width-1-2\@m > * {
    box-sizing: border-box;
    width: 100%;
}
@media (min-width: 960px) {
    .fws-service-variations .uk-child-width-1-2\@m > * {
        width: 50%;
    }
}
.fws-service-variations .uk-flex-middle {
    align-items: center;
}

/* Service Pricing Cards */
.fws-service-pricing {
    background: #fff;
}
.fws-service-pricing-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    position: relative;
    transition: box-shadow .2s ease;
    display: flex;
    flex-direction: column;
}
.fws-service-pricing-card:hover {
    box-shadow: 0 5px 25px rgba(0, 0, 0, .08);
}
.fws-service-pricing-recommended {
    border: 2px solid var(--fw-green);
    box-shadow: 0 5px 25px rgba(52, 165, 93, .15);
}
.fws-service-pricing-recommended:hover {
    box-shadow: 0 8px 30px rgba(52, 165, 93, .2);
}
.fws-service-pricing-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fw-green);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 16px;
    border-radius: 0 0 8px 8px;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}
.fws-service-pricing-header {
    text-align: center;
    padding: 40px 30px 20px;
    border-bottom: 1px solid #e5e5e5;
}
.fws-service-pricing-recommended .fws-service-pricing-header {
    padding-top: 50px;
}
.fws-service-pricing-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--fw-dark);
    margin-bottom: 8px;
}
.fws-service-pricing-price {
    font-size: 32px;
    font-weight: 700;
    color: var(--fw-dark);
    line-height: 1.2;
}
.fws-service-pricing-price span {
    font-size: 14px;
    font-weight: 400;
    color: var(--fw-grey);
}
.fws-service-pricing-delivery {
    font-size: 13px;
    color: var(--fw-grey);
    margin-top: 4px;
}
.fws-service-pricing-features {
    flex: 1;
    padding: 10px 0;
}
.fws-service-pricing-feature-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
    font-size: 14px;
    gap: 10px;
}
.fws-service-pricing-feature-even {
    background: #f9f9f9;
}
.fws-service-pricing-feature-label {
    color: var(--fw-black);
}
.fws-service-pricing-feature-label .fws-pricing-tooltip {
    color: var(--fw-grey);
    margin-left: 4px;
    cursor: help;
}
.fws-service-pricing-feature-value {
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
}
.fws-service-pricing-check {
    color: var(--fw-green);
}
.fws-service-pricing-cross {
    color: #ccc;
}
.fws-service-pricing-description {
    padding: 0 30px 20px;
    text-align: center;
}
.fws-service-pricing-description p {
    font-size: 11px;
    color: var(--fw-grey);
    margin: 0;
    line-height: 1.4;
}
.fws-service-pricing-card:hover .fws-service-pricing-description p {
    color: var(--fw-black);
}
.fws-service-pricing-cta {
    padding: 20px 30px 30px;
    text-align: center;
    margin-top: auto;
}
.fws-service-pricing-cta .fwk-button {
    width: 100%;
}
/* Mobile slider dots */
.fws-service-pricing .fwk-dotnav > * > * {
    width: 10px;
    height: 10px;
    border-color: var(--fw-green);
}
.fws-service-pricing .fwk-dotnav > .fwk-active > * {
    background: var(--fw-green);
    border-color: var(--fw-green);
}
/* 2-tier centering */
.fws-service-pricing-2tier {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 959px) {
    .fws-service-pricing-header {
        padding: 30px 20px 15px;
    }
    .fws-service-pricing-feature-row {
        padding: 8px 20px;
        font-size: 13px;
    }
    .fws-service-pricing-cta {
        padding: 15px 20px 25px;
    }
    .fws-service-pricing-price {
        font-size: 26px;
    }
}

/* What's Included Section */
.fws-service-included-item {
    padding: 30px;
    position: relative;
    background: #fff;
    box-shadow: var(--fw-box-shadow);
    border-radius: 10px;
    border-top: 3px solid var(--fw-green);
}
.fws-service-included-item p {
    margin: 0;
}
.fws-service-included-item::before {
    width: 12px;
    height: 12px;
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 6px solid var(--fw-green);
    border-radius: 12px;
}

/* Extra Options Section */
.fws-service-options {
    color: #fff;
    background: var(--fw-dark);
}

/* How It Works Section */
.fws-service-works-item {
    padding-top: 40px;
    position: relative;
}
.fws-service-works-item::after {
    width: calc(100% - 34px);
    height: 1px;
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% + 38px);
    border-top: 1px dashed #C2C2C2;
}
.fws-service-works-items > div:last-child .fws-service-works-item::after {
    content: none;
}
.fws-service-works-item-deco {
    width: 44px;
    height: 44px;
    content: '';
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(52, 165, 93, .34);
    border-radius: 100%;
}
.fws-service-works-item-deco::before {
    width: 12px;
    height: 12px;
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 6px solid var(--fw-green);
    border-radius: 12px;
}
.fws-service-works-items > div:last-child .fws-service-works-item-deco::before {
    content: none;
}
.fws-service-works-items > div:last-child .fws-service-works-item-deco {
    background: url(../images/site/icon_done_circle.svg);
}

/* Development Process Section */
.fws-service-process-items {
    min-height: 550px;
    align-items: center !important;
}
.fws-service-process .fwk-grid > div:first-child {
    background: url(../images/site/process_bg.png) no-repeat center center;
    background-size: contain;
    align-self: stretch;
}
@media (min-width: 960px) {
    .fws-service-process .fwk-grid > div:first-child {
        min-height: 550px;
    }
}
.fws-service-process-list {
    position: relative;
    counter-reset: item;
}
.fws-service-process-list::before {
    width: 1px;
    height: calc(100% - 50px);
    content: '';
    position: absolute;
    left: 27px;
    top: 0;
    border-left: 1px dashed #C2C2C2;
}
.fws-service-process-list div {
    color: #8E8E8E;
    padding-left: 73px;
    position: relative;
    font-size: 13px;
}
.fws-service-process-list div h6 {
    margin: 0 0 5px;
    font-size: 18px;
}
.fws-service-process-list div p {
    margin-top: 0;
    line-height: 1.5;
}
.fws-service-process-list div:first-of-type::before {
    counter-set: item 1;
}
.fws-service-process-list div::before {
    color: var(--fw-green);
    width: 50px;
    height: 50px;
    display: inline-block;
    content: '0' counter(item);
    counter-increment: item;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 24px;
    font-weight: bold;
    line-height: 50px;
    text-align: center;
    background: #fff;
    border: 2px solid #DFDFDF;
    border-radius: 10px;
}

/* Before You Start Section */
.fws-service-before {
    color: #fff;
    background: var(--fw-dark);
}
.fws-service-before-item {
    color: var(--fw-black);
    padding: 20px 50px 5px 60px;
    position: relative;
    background: #fff;
    border-left: 3px solid var(--fw-danger);
    border-radius: 10px;
}
.fws-service-before-item::before {
    width: 29px;
    height: 29px;
    content: '';
    position: absolute;
    top: 20px;
    left: 16px;
    background: url(../images/site/icon_attention.svg) no-repeat 0 0;
    background-size: contain;
}

.fws-service-before-item p:last-child {
    margin-bottom: 15px;
}

/* Service Reviews Section */
.fws-service-reviews .fwk-slider-container {
    padding: 5px 20px 40px;
}
.fws-service-reviews-item {
    padding: 25px;
    box-shadow: var(--fw-box-shadow-short) !important;
    border-bottom: 3px solid var(--fw-green);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.fws-service-reviews-item-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--fw-black);
    margin-bottom: 8px;
}
.fws-service-reviews-item-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--fw-black);
    flex: 1;
}
.fws-service-reviews-item-text p:last-child {
    margin-bottom: 0;
}

/* Service FAQ 2-column layout */
@media (min-width: 960px) {
    .fws-service-faq-list {
        columns: 2;
        column-gap: 30px;
    }
    .fws-service-faq-list > li {
        break-inside: avoid;
    }
}
.fws-service-reviews-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}
.fws-service-reviews-item-stars {
    flex-shrink: 0;
    white-space: nowrap;
}
.fws-service-reviews-item-stars svg {
    margin-right: 1px;
}
.fws-service-reviews-item-stars svg {
    color: var(--fw-yellow);
}
.fws-service-reviews-item-person {
    text-align: right;
    min-width: 0;
    overflow: hidden;
}
.fws-service-reviews-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--fw-black);
    line-height: 1.3;
}
.fws-service-reviews-item-bio {
    font-size: 12px;
    color: var(--fw-grey);
    margin-top: 1px;
}

/* Service Page Responsive */
@media only screen and (max-width: 960px) {
    .fws-service-promo { padding-top: 90px !important; }
    .fws-service-variations [uk-grid] > div:first-child,
    .fws-service-variations .fwk-grid > div:first-child { display: none; }
}

/* ==========================================================================
   Products - Listing Page (extracted from products/index.php)
   ========================================================================== */

/* Yellow button (matching Joomla primary button) */
.fws-btn-yellow {
    color: var(--fw-black) !important;
    background: var(--fw-yellow) !important;
    border-color: var(--fw-yellow) !important;
    border-radius: 5px;
}
.fws-btn-yellow:hover {
    color: #fff !important;
    background: var(--fw-green-cold) !important;
    border-color: var(--fw-green-cold) !important;
}

.fws-product-list > div:nth-child(2n+2) .fws-product-list-item-info {
    flex-direction: row-reverse;
}

.fws-product-list-item h2 {
    margin: 15px 0;
    font-size: 48px;
}

.fws-product-list-item h2 a {
    color: var(--fw-black);
    text-decoration: none;
}

.fws-product-list-item h2 a:hover {
    color: var(--fw-green);
}

.fws-product-subtitle {
    color: var(--fw-green-warm);
    font-size: 16px;
    font-weight: bold;
}

.fws-product-list-item-badges .fwk-badge {
    background: var(--fw-green);
    padding: 5px 12px;
    font-size: 13px;
}

.fws-product-list-item-text {
    color: var(--fw-grey);
    margin: 30px 0;
    line-height: 1.7;
}

.fws-product-list-item-features {
    margin: 30px 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.fws-product-list-item-features svg,
.fws-product-list-item-features [class*="fwk-icon"] {
    color: var(--fw-green);
    margin-bottom: 15px;
}

/* Extra Section (muted background with addons/services) */
.fws-product-list-item-extra {
    margin-top: 60px !important;
    margin-bottom: 80px !important;
    position: relative;
    overflow: hidden;
}

.fws-product-list-item-extra .fwk-slider-container {
    padding: 0 10px 20px;
}

.fws-product-list-item-extra-title {
    color: #ffffff;
    font-size: 100px;
    font-weight: bold;
    line-height: 70px;
    text-align: right;
    position: absolute;
    top: 0;
    right: 20%;
    white-space: nowrap;
    pointer-events: none;
}

/* Addon Cards (Products Listing) */
.fws-product-list-item-addons .fwk-card,
.fws-product-list-item-services .fwk-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 9px 10px rgba(50, 52, 62, .15);
}

.fws-product-list-item-addons .fws-product-addon {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.fws-product-list-item-addons .fws-product-addon img.fwk-card-media-top {
    width: 100%;
    display: block;
}

.fws-product-addon-placeholder {
    padding-top: 75%;
    background: #f5f5f5;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fws-product-addon-placeholder span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.fws-product-addon-hover {
    border-radius: 10px;
    background: linear-gradient(135deg, var(--fw-dark) 0%, var(--fw-green-cold) 100%);
    display: flex;
    flex-direction: column;
}

.fws-product-addon-hover .fwk-text-small {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    max-height: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.fws-addon-hover-btn {
    margin-top: 20px;
    background: var(--fw-green-warm) !important;
    color: #fff !important;
    border: none !important;
}

.fws-product-list-item-addons a {
    text-decoration: none;
    color: inherit;
}

.fws-product-list-item-addons .fwk-h6 {
    margin-bottom: 15px;
}

/* Service Cards (Products Listing) */
.fws-product-list-item-services {
    margin-top: 60px;
}

.fws-product-list-item-services a {
    text-decoration: none;
    color: inherit;
}

/* Service cards — matches Joomla fws_styles.css design */
.fws-service-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 9px 10px rgba(50, 52, 62, .15);
    border-top: 3px solid var(--fw-green);
    transition: all 0.3s ease;
}
.fws-service-card .fwk-h6 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fws-service-icon {
    color: var(--fw-green-warm);
    margin-right: 5px;
}
.fws-service-text {
    color: var(--fw-grey);
    height: 57px;
    margin: 0 0 15px;
    font-size: 12px;
    line-height: 1.55;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.fws-service-card .fws-service-price {
    color: var(--fw-black);
    font-size: 14px;
    line-height: 1.7;
    background: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
}
.fws-service-card:hover {
    color: #fff !important;
    background: var(--fw-green-cold) url(../images/site/slider_hover_bg.jpg) no-repeat;
    background-size: cover;
}
.fws-service-packages {
    font-size: 10px;
    color: var(--fw-grey);
    margin-bottom: 4px;
}
.fws-service-card:hover .fws-service-icon,
.fws-service-card:hover .fwk-h6,
.fws-service-card:hover .fws-service-price,
.fws-service-card:hover .fws-service-text,
.fws-service-card:hover .fws-service-packages {
    color: #fff !important;
}
.fws-service-card:hover .fwk-button {
    color: #fff;
    background: var(--fw-green-warm);
    border-color: var(--fw-green-warm);
}
.fws-service-card:hover .fws-badge-platform,
.fws-service-card:hover .fws-badge-product {
    background: rgba(255, 255, 255, 0.25);
}

/* Service Badges (Services Listing) */
.fws-service-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.fws-badge-platform {
    background: var(--fw-grey, #989898);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
}
.fws-badge-product {
    background: var(--fw-green-cold, #006877);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
}

/* ==========================================================================
   Products - Addon Page
   ========================================================================== */

/* Addon Hero — matches service page hero pattern */
.fws-addon-promo {
    color: #fff;
    padding-top: 160px !important;
    background: var(--fw-linear-dark);
}
.fws-addon-promo .fwk-container {
    position: relative;
}
.fws-addon-promo .fwk-container > [fwk-grid] {
    position: relative;
    z-index: 10;
}
/* Decorative dots — behind content */
.fws-addon-promo .fwk-container::before,
.fws-addon-promo .fwk-container::after {
    width: 248px;
    height: 248px;
    content: '';
    position: absolute;
    top: 30px;
    left: 0;
    transform: translateX(-120%) translateY(-50%);
    background: url(../images/site/dots_top.png);
}
.fws-addon-promo .fwk-container::after {
    top: 100%;
    left: 100%;
    transform: translateX(-40%) translateY(-120%);
    background: url(../images/site/dots_bottom.png);
}

/* Badge rows */
.fws-addon-badges-row {
    margin: 25px 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
/* Addon hero badge row — all badges share one neutral style on the dark hero.
   No bright accents: free/paid, tier membership, output type, and platform pills
   all render as the same subtle translucent-white pill. */
.fws-addon-badges-row .fwk-label,
.fws-label-green,
.fws-label-free,
.fws-label-paid,
.fws-label-package,
.fws-label-tier,
.fws-label-tier-recommended {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Version badge in hero */
.fws-addon-version-badge {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}
.fws-addon-version-date {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
}

/* Platform + version lines in hero — stacked */
.fws-addon-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fws-addon-platform-badge {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

/* Parent product link in hero */
.fws-addon-parent-product {
    margin-top: 10px;
}
.fws-addon-parent-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}
.fws-addon-parent-link:hover {
    color: #fff;
}
.fws-addon-parent-link img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Hero image with decorative circles — matches service page */
.fws-addon-promo-image {
    position: relative;
}
.fws-addon-promo-image::before {
    content: '';
    position: absolute;
    width: 174px;
    height: 174px;
    top: -93px;
    right: 22px;
    background: var(--fw-yellow);
    border-radius: 50%;
}
.fws-addon-promo-image::after {
    content: '';
    position: absolute;
    width: 68px;
    height: 68px;
    bottom: -89px;
    left: 70px;
    border: 30px solid var(--fw-green);
    border-radius: 50%;
    z-index: 2;
}
.fws-addon-promo-image img {
    position: relative;
    z-index: 1;
    max-height: 400px;
    width: 100%;
    object-fit: cover;
    border-radius: 30px;
}
@media (max-width: 959px) {
    .fws-addon-promo-image::before,
    .fws-addon-promo-image::after {
        display: none;
    }
}

/* Value Proposition / About */
.fws-addon-purpose {
    line-height: 1.8;
    font-size: 16px;
}
.fws-addon-purpose img {
    max-width: 100%;
    height: auto;
    margin: 20px auto;
    display: block;
}

/* Feature Rows — alternating image/text blocks */
.fws-addon-feature-row {
    padding: 40px 0;
}
.fws-addon-feature-row img {
    border-radius: 10px;
}
.fws-addon-feature-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0 0 20px;
    color: var(--fw-black, #323232);
}
.fws-addon-feature-desc {
    font-size: 16px;
    line-height: 1.7;
    color: #666;
}
.fws-addon-feature-desc p {
    margin: 0 0 10px;
}
.fws-addon-feature-desc p:last-child {
    margin-bottom: 0;
}

/* Placeholder for features without screenshots */
.fws-addon-feature-placeholder {
    background: linear-gradient(135deg, #f0f4f8 0%, #e8ecf1 100%);
    border: 2px dashed #d0d5dc;
    border-radius: 10px;
    padding: 40px 30px;
    text-align: center;
    color: var(--fw-grey, #989898);
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fws-addon-feature-placeholder-text {
    font-size: 13px;
    line-height: 1.5;
    font-style: italic;
    max-width: 320px;
}


/* Change history link in hero */
.fws-addon-changelog-link {
    font-size: 13px;
    margin-left: 20px;
}
.fws-addon-changelog-link:hover { color: var(--fw-yellow); }

/* Related Addons Section — dark background */
.fws-addon-related {
    background: var(--fw-dark, #2E4857);
    color: #fff;
}

/* Back to Product CTA — never dark (would merge with footer) */
.fws-addon-cta {
    padding: 60px 0;
}
.fws-addon-cta h3 {
    margin-bottom: 10px;
}
.fws-addon-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

/* ==========================================================================
   Products - Services Listing (extracted from products/services.php)
   ========================================================================== */

/* Product-grouped service cards — styles now in .fws-product-list-item-services section above */

/* ==========================================================================
   Blog - Listing Page (extracted from blog/index.php)
   ========================================================================== */

/* Blog Card - Joomla Style */
.fw-blog-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.fw-blog-card-joomla {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.fw-blog-card-link:hover .fw-blog-card-joomla {
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.fw-blog-card-image {
    position: relative;
    padding-top: 65%;
    overflow: hidden;
}

.fw-blog-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.fw-blog-card-link:hover .fw-blog-card-image img {
    transform: scale(1.05);
}

.fw-blog-card-image-placeholder {
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
}

.fw-blog-card-image-placeholder span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.fw-blog-card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.fw-blog-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--fw-black);
    margin: 0 0 10px;
    line-height: 1.4;
}

.fw-blog-card-excerpt {
    font-size: 0.9rem;
    color: var(--fw-grey);
    line-height: 1.6;
    margin: 0 0 15px;
    flex: 1;
}

.fw-blog-card-readmore {
    display: inline-block;
    background: var(--fw-yellow);
    color: var(--fw-black);
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.fw-blog-card-link:hover .fw-blog-card-readmore {
    background: #e6ac00;
}

/* Leading/Hero Article */
@media (min-width: 960px) {
    .fw-blog-card-leading {
        flex-direction: row;
        min-height: 450px;
    }
    .fw-blog-card-leading .fw-blog-card-image {
        width: 50%;
        padding-top: 0;
        flex-shrink: 0;
    }
    .fw-blog-card-leading .fw-blog-card-body {
        width: 50%;
        padding: 30px;
        justify-content: center;
    }
}

.fw-blog-card-leading .fw-blog-card-title {
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.fw-blog-card-leading .fw-blog-card-excerpt {
    font-size: 0.95rem;
    line-height: 1.7;
}

.fw-blog-card-category {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--fw-green-warm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

/* Tags Cloud */
.fw-tags-cloud {
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.fw-tags-cloud .fwk-subnav {
    gap: 8px;
}

.fw-tags-cloud .fwk-subnav > li {
    padding: 0;
}

.fw-tag-link {
    display: inline-block;
    padding: 6px 14px;
    background: #f5f5f5;
    color: var(--fw-grey);
    border-radius: 4px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.fw-tag-link:hover {
    background: var(--fw-yellow);
    color: var(--fw-black);
    text-decoration: none;
}

/* Category subnav styling */
.fwk-subnav-divider > li:nth-child(n+2)::before {
    border-left-color: var(--fw-grey);
}

.fwk-subnav > li > a {
    color: var(--fw-grey);
    font-size: 0.95rem;
}

.fwk-subnav > li > a:hover {
    color: var(--fw-green);
}

/* ====
   Client - services listing
   ==== */
/* ==========================================================================
   Client - Service List (original card layout)
   ========================================================================== */
.fws-service-item {
    border-left: 4px solid #e5e5e5;
    transition: border-color 0.2s;
}
.fws-service-item:hover {
    border-left-color: var(--fw-green, #32d296);
}
.fws-service-item a {
    display: block;
    color: inherit;
}
.fws-service-item .uk-text-small {
    line-height: 1.2;
}
.fws-service-item .uk-text-normal {
    line-height: 1.1;
    margin-bottom: 18px;
}
.fws-service-item.stage-quote {
    background: #FFFAEB;
}
.fws-service-item.stage-payment {
    background: #FFF8F1;
}
.fws-service-item.stage-progress {
    background: #F4FAE4;
}
.fws-service-item.stage-review {
    background: #EAFEF1;
}
.fws-service-item.stage-completed {
    background: #EFFBFF;
}
.fws-service-item.stage-declined {
    background: #F3F3F3;
}
.fws-service-item .fws-service-stages > div {
    color: #989898;
    position: relative;
}
.fws-service-item .fws-service-stages > div.fws-stage-active {
    color: var(--black);
}
.fws-service-item .fws-service-stages > div::before,
.fws-service-item .fws-service-stages > div::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 0;
}
.fws-service-item .fws-service-stages > div::before {
    width: 100%;
    height: 2px;
    background: #989898;
}
.fws-service-item .fws-service-stages > div.fws-stage-active:nth-child(1):before {
    background: linear-gradient(to right, #FFBF00, #FF7A00);
}
.fws-service-item.stage-declined .fws-service-stages > div.fws-stage-active:nth-child(1):before {
    background: linear-gradient(to right, #FFBF00, #C5C5C5);
}
.fws-service-item .fws-service-stages > div.fws-stage-active:nth-child(2):before {
    background: linear-gradient(to right, #FF7A00, #97BA2D);
}
.fws-service-item .fws-service-stages > div.fws-stage-active:nth-child(3):before {
    background: linear-gradient(to right, #97BA2D, #34A55D);
}
.fws-service-item .fws-service-stages > div.fws-stage-active:nth-child(4):before {
    background: linear-gradient(to right, #34A55D, #00A6DE);
}
.fws-service-item .fws-service-stages > div:last-child:before {
    content: none;
}
.fws-service-item .fws-service-stages > div::after {
    width: 8px;
    height: 8px;
    top: -12px;
    background: white;
    border: 2px solid #989898;
    border-radius: 50%;
}
.fws-service-item .fws-service-stages > div.fws-stage-active:nth-child(1):after {
    background: #FFBF00;
    border-color: #FFBF00;
}
.fws-service-item .fws-service-stages > div.fws-stage-active:nth-child(2):after {
    background: #FF7A00;
    border-color: #FF7A00;
}
.fws-service-item.stage-declined .fws-service-stages > div.fws-stage-active:nth-child(2):after {
    background: #C5C5C5;
    border-color: #C5C5C5;
}
.fws-service-item .fws-service-stages > div.fws-stage-active:nth-child(3):after {
    background: #97BA2D;
    border-color: #97BA2D;
}
.fws-service-item .fws-service-stages > div.fws-stage-active:nth-child(4):after {
    background: #34A55D;
    border-color: #34A55D;
}
.fws-service-item .fws-service-stages > div.fws-stage-active:nth-child(5):after {
    background: #00A6DE;
    border-color: #00A6DE;
}

/* Service order messages (used inside modal) */
.fws-message {
    padding: 15px;
    border-radius: 8px;
}
.fws-message-user {
    background: #f0f7ff;
    border-left: 4px solid #1e87f0;
}
.fws-message-admin {
    background: #f8f8f8;
    border-left: 4px solid var(--fw-green, #32d296);
}
.fws-message-body {
    line-height: 1.6;
}
.fws-message-body p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Stage Progress Indicator (service detail page)
   ========================================================================== */
.fw-service-progress {
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
}
.fw-service-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}
.fw-service-progress-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: #fff;
    flex-shrink: 0;
}
.fw-service-progress-dot.active {
    background: var(--fw-green, #34A55D);
    border-color: var(--fw-green, #34A55D);
}
.fw-service-progress-dot.current {
    width: 16px;
    height: 16px;
    box-shadow: 0 0 0 3px rgba(52,165,93,0.2);
    background: var(--fw-green, #34A55D);
    border-color: var(--fw-green, #34A55D);
}
.fw-service-progress-dot.declined {
    background: #C5C5C5;
    border-color: #C5C5C5;
}
.fw-service-progress-line {
    flex: 1;
    height: 2px;
    background: #e5e5e5;
    align-self: center;
    margin-top: -6px;
    position: relative;
    z-index: 0;
}
.fw-service-progress-line.active {
    background: var(--fw-green, #34A55D);
}
.fw-service-progress-line.declined {
    background: #C5C5C5;
}
.fw-service-progress-label.declined {
    color: #C5C5C5;
    font-weight: 600;
}
.fw-service-progress-label {
    font-size: 11px;
    margin-top: 4px;
    color: var(--fw-grey, #989898);
    white-space: nowrap;
}
.fw-service-progress-label.active {
    color: var(--fw-black, #323232);
    font-weight: 500;
}
.fw-service-progress-label.current {
    color: var(--fw-green, #34A55D);
    font-weight: 600;
}

/* Stages bar inside modal/detail chat — dot+gradient design matching list card */
.fws-service-stages-bar {
    flex-shrink: 0;
    padding: 12px 40px;
    padding-top: 24px;
    border-bottom: 1px solid #e8eaed;
    background: #fafbfc;
}
.fws-service-stages-bar .fws-service-stages > div {
    color: #989898;
    position: relative;
}
.fws-service-stages-bar .fws-service-stages > div.fws-stage-active {
    color: var(--black);
}
.fws-service-stages-bar .fws-service-stages > div::before,
.fws-service-stages-bar .fws-service-stages > div::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 0;
}
.fws-service-stages-bar .fws-service-stages > div::before {
    width: 100%;
    height: 2px;
    background: #989898;
}
.fws-service-stages-bar .fws-service-stages > div.fws-stage-active:nth-child(1):before {
    background: linear-gradient(to right, #FFBF00, #FF7A00);
}
.fws-service-stages-bar.stage-declined .fws-service-stages > div.fws-stage-active:nth-child(1):before {
    background: linear-gradient(to right, #FFBF00, #C5C5C5);
}
.fws-service-stages-bar .fws-service-stages > div.fws-stage-active:nth-child(2):before {
    background: linear-gradient(to right, #FF7A00, #97BA2D);
}
.fws-service-stages-bar .fws-service-stages > div.fws-stage-active:nth-child(3):before {
    background: linear-gradient(to right, #97BA2D, #34A55D);
}
.fws-service-stages-bar .fws-service-stages > div.fws-stage-active:nth-child(4):before {
    background: linear-gradient(to right, #34A55D, #00A6DE);
}
.fws-service-stages-bar .fws-service-stages > div:last-child:before {
    content: none;
}
.fws-service-stages-bar .fws-service-stages > div::after {
    width: 8px;
    height: 8px;
    top: -12px;
    background: white;
    border: 2px solid #989898;
    border-radius: 50%;
}
.fws-service-stages-bar .fws-service-stages > div.fws-stage-active:nth-child(1):after {
    background: #FFBF00;
    border-color: #FFBF00;
}
.fws-service-stages-bar .fws-service-stages > div.fws-stage-active:nth-child(2):after {
    background: #FF7A00;
    border-color: #FF7A00;
}
.fws-service-stages-bar.stage-declined .fws-service-stages > div.fws-stage-active:nth-child(2):after {
    background: #C5C5C5;
    border-color: #C5C5C5;
}
.fws-service-stages-bar .fws-service-stages > div.fws-stage-active:nth-child(3):after {
    background: #97BA2D;
    border-color: #97BA2D;
}
.fws-service-stages-bar .fws-service-stages > div.fws-stage-active:nth-child(4):after {
    background: #34A55D;
    border-color: #34A55D;
}
.fws-service-stages-bar .fws-service-stages > div.fws-stage-active:nth-child(5):after {
    background: #00A6DE;
    border-color: #00A6DE;
}

/* ==========================================================================
   Client - Service Detail Page (full-page thread layout)
   ========================================================================== */

/* Full-page variant of fws-thread-layout — uses viewport height minus client layout chrome */
.fws-service-thread-layout {
    height: calc(100vh - 200px);
}

/* Progress bar strip above the chat area */
.fws-service-progress-bar {
    flex-shrink: 0;
    padding: 8px 40px;
    border-bottom: 1px solid #e8eaed;
    background: #fafbfc;
}

/* Payment box inside sidebar */
.fw-service-payment-box {
    background: #f0f2f5;
    border-radius: 8px;
    padding: 12px;
    font-size: 13px;
}

/* Service rating stars */
.fws-rating {
    display: flex;
    gap: 5px;
}
.fws-star {
    cursor: pointer;
    color: #ddd;
    transition: color 0.2s;
}
.fws-star:hover,
.fws-star.active {
    color: #ffc107;
}
.fws-rating:hover .fws-star {
    color: #ddd;
}
.fws-rating .fws-star:hover,
.fws-rating .fws-star.hovered {
    color: #ffc107;
}

/* ==========================================================================
   Client - Subscriptions
   ========================================================================== */

.fws-subscription-item {
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #DBDCDF;
    border-radius: 10px;
}
.fws-subscription-item:last-child {
    margin-bottom: 0;
}
.fws-subscription-item img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}
.fws-subscription-item .fwk-progress {
    height: 12px;
    margin: 5px 0 0;
}
.fws-subscription-expired .fwk-background-muted {
    background: #FFE9E9;
}

/* ==========================================================================
   Client - Profile
   ========================================================================== */

.fws-user-profile span {
    color: var(--fw-grey);
}

/* ==========================================================================
   Client - Websites
   ========================================================================== */

.fws-websites .fws-website-item {
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #DBDCDF;
    border-radius: 10px;
}
.fws-websites .fws-website-item:last-child {
    margin-bottom: 0;
}
.fws-websites .fws-website-item img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}
.fws-websites .fws-website-item .fwk-progress {
    height: 12px;
    margin: 5px 0 0;
}
.fws-websites .fws-website-item.fws-website-expired .fwk-background-muted {
    background: #FFE9E9;
}
.fws-websites .fws-website-row + .fws-website-row {
    border-top: 1px solid #e5e5e5;
    padding-top: 10px;
    margin-top: 10px;
}
.fws-websites .fws-access-code {
    font-family: monospace;
    font-size: 13px;
    cursor: pointer;
}
/* Darker muted text for contrast on muted background (#F3F3F3) */
.fws-websites .fws-muted-dark {
    color: #777;
}
/* Admin/FTP icon buttons: green = verified, red = not verified, grey = no data */
.fws-websites .fwk-icon-button.fws-access-btn-valid {
    background: var(--fw-green);
    color: #fff;
}
.fws-websites .fwk-icon-button.fws-access-btn-invalid {
    background: var(--fw-danger);
    color: #fff;
}
.fws-websites .fwk-icon-button.fws-access-btn-none {
    background: #ddd;
    color: #999;
}
/* Expired domain URL: red */
.fws-websites .fws-link-expired {
    color: var(--fw-danger);
}
.fws-websites .fws-link-expired:hover {
    color: var(--fw-danger);
}
/* Inactive label: dark grey bg, white text */
.fws-websites .fws-label-inactive {
    background: #666;
    color: #fff;
}
/* Never-expires label: yellow bg, black text */
.fws-websites .fws-label-never {
    background: var(--fw-yellow);
    color: var(--fw-black);
}

/* ==========================================================================
   Client - Support Listing
   ========================================================================== */

/* -- Header -------------------------------------------------------------- */
.fw-support-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.fw-support-header h2 {
    margin: 0;
    flex: 1;
}
.fw-support-header-right {
    flex-shrink: 0;
}

/* -- Filter Bar (single row, stretched) ---------------------------------- */
.fw-support-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.fw-filter-types {
    display: flex;
    gap: 6px;
}
.fw-filter-type-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: var(--fw-grey-background);
    color: var(--fw-black);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    text-decoration: none;
}
.fw-filter-type-btn svg {
    max-width: none;
}
.fw-filter-type-btn:hover {
    border-color: var(--fw-green);
    color: var(--fw-black);
}
.fw-filter-type-btn.active {
    border-color: var(--fw-green);
    box-shadow: 0 0 0 1px var(--fw-green);
    background: #fff;
    color: var(--fw-green);
}
.fw-filter-products {
    display: flex;
    gap: 6px;
    align-items: center;
}
.fw-filter-product-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    background: var(--fw-grey-background);
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    display: block;
    text-decoration: none;
}
.fw-filter-product-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.fw-filter-product-btn:hover {
    border-color: var(--fw-green);
}
.fw-filter-product-btn.active {
    border-color: var(--fw-green);
    box-shadow: 0 0 0 1px var(--fw-green);
}
.fw-filter-status-form {
    margin-left: auto;
}
.fw-filter-status {
    min-width: 150px;
    max-width: 200px;
}
.fw-open-counter {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    background: var(--fw-grey-background);
    color: var(--fw-black);
    white-space: nowrap;
}
.fw-open-counter.at-limit {
    background: rgba(239, 47, 47, 0.1);
    color: var(--fw-danger);
}

/* -- Ticket Rows --------------------------------------------------------- */
.fw-support-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fw-support-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
    position: relative;
}
.fw-support-row:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.fw-support-row .fwk-label {
    padding: 0 8px;
    line-height: 22px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Status backgrounds */
.fw-support-row.status-answered { background: #FFF8F1; }
.fw-support-row.status-answered .fwk-label { background: #FF7A00; }
.fw-support-row.status-idle { background: #F4FAE4; }
.fw-support-row.status-idle .fwk-label { background: #97BA2D; }
.fw-support-row.status-closed,
.fw-support-row.status-archived { background: var(--fw-grey-background); }
.fw-support-row.status-closed .fwk-label,
.fw-support-row.status-archived .fwk-label { background: #A0A0A0; }
.fw-support-row.status-closed .fw-support-row-subject,
.fw-support-row.status-archived .fw-support-row-subject { color: var(--fw-grey); }
.fw-support-row.status-closed .fws-archive-btn,
.fw-support-row.status-archived .fws-archive-btn {
    background: #707070;
    color: #fff;
    border: none;
}
.fw-support-row.status-closed .fws-archive-btn:hover,
.fw-support-row.status-archived .fws-archive-btn:hover {
    background: var(--fw-yellow);
    color: var(--fw-black);
}
.fw-support-row.status-incomplete { background: #FFF8F1; }
.fw-support-row.status-incomplete .fwk-label { background: #FF7A00; }

/* Line 1: # title status ... date */
.fw-support-row-line1 {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.fw-support-row-id {
    font-size: 13px;
    font-weight: 700;
    color: var(--fw-grey);
    flex-shrink: 0;
}
.fw-support-row-subject {
    font-weight: 600;
    color: var(--fw-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.fw-support-row-line1 .fwk-label {
    flex-shrink: 0;
}
.fw-support-row-last-msg {
    font-size: 12px;
    color: var(--fw-grey);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}
.fw-support-row-created {
    font-size: 11px;
    color: var(--fw-grey);
}

/* Line 2: type product website ... messages files rating */
.fw-support-row-line2 {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.fw-support-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 12px;
    color: var(--fw-grey);
    flex-wrap: wrap;
    min-width: 0;
}
.fw-support-row-meta svg {
    width: 12px;
    height: 12px;
}
.fw-support-row-meta span {
    white-space: nowrap;
}
.fw-support-row-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.fw-support-row-counts {
    font-size: 12px;
    color: var(--fw-grey);
    white-space: nowrap;
}
.fw-support-row-counts svg {
    width: 12px;
    height: 12px;
    margin-right: 2px;
}
.fw-support-row:not(.status-closed):not(.status-archived) .fw-support-row-counts svg {
    color: var(--fw-green);
}
.fw-support-row:not(.status-closed):not(.status-archived) .fw-support-row-counts {
    color: var(--fw-black);
}
.fw-support-row .fwk-badge-new {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 0;
    height: 24px;
    padding: 4px 8px 4px 10px;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    color: var(--fw-black) !important;
    background: var(--fw-yellow);
    border-radius: 0 10px 0 20px;
}
.fw-support-row-rating {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
}
.fw-support-row-rating span[fwk-icon] {
    color: #faa05a;
}
.fw-support-row-rating span[fwk-icon="star-full"] svg {
    width: 12px;
    height: 12px;
}
.fw-support-row-robot {
    color: var(--fw-grey);
    display: inline-flex;
    align-items: center;
}
@media (max-width: 639px) {
    .fw-support-filter-bar {
        gap: 8px;
    }
    .fw-filter-status {
        min-width: 0;
        flex: 1;
    }
    .fw-open-counter {
        margin-left: 0;
    }
    .fw-support-row-line1 {
        flex-wrap: wrap;
    }
    .fw-support-row-line2 {
        flex-wrap: wrap;
    }
}

/* -- Chat Flow Modal ----------------------------------------------------- */
.fw-chat-modal {
    width: 600px;
    max-width: calc(100vw - 30px);
}
.fw-chat-modal .fwk-modal-header {
    border-bottom: 1px solid var(--fw-grey-background);
}
.fw-chat-flow {
    max-height: 60vh;
    overflow-y: auto;
    padding: 24px 20px 15px;
    scroll-behavior: smooth;
    background: #fafbfc;
    border-radius: 0 0 10px 10px;
}
.fw-chat-row {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    align-items: flex-start;
}
.fw-chat-row.is-user {
    flex-direction: row-reverse;
}
/* Avatar: 50x50 with name underneath */
.fw-chat-avatar {
    width: 50px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.fw-chat-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.fw-chat-avatar.bot > span[fwk-icon] {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--fw-green);
    color: #fff;
}
.fw-chat-avatar.user > span[fwk-icon] {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--fw-grey-background);
    color: var(--fw-grey);
}
.fw-chat-name {
    font-size: 11px;
    color: var(--fw-grey);
    text-align: center;
    line-height: 1.2;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Bubbles */
.fw-chat-bubble {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 8px;
}
.fw-chat-bubble.bot {
    background: #fff;
    color: var(--fw-black);
    border: 1px solid #e8eaed;
    border-bottom-left-radius: 4px;
}
.fw-chat-bubble.user {
    background: var(--fw-green);
    color: #fff;
    border-bottom-right-radius: 4px;
    cursor: pointer;
}
.fw-chat-bubble.user:hover {
    opacity: 0.9;
}
.fw-chat-bubble.error {
    background: #fff;
    color: var(--fw-danger);
    border: 1px solid rgba(239, 47, 47, 0.3);
    border-bottom-left-radius: 4px;
}
/* Input areas aligned with bubble content */
.fw-chat-input-area {
    margin-left: 62px;
    margin-right: 16px;
}
.fw-chat-input-area .fwk-textarea {
    min-height: 80px;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    background: #fff;
}
.fw-chat-input-area .fwk-textarea:focus {
    border-color: var(--fw-green);
    background: #fff;
}
.fw-chat-input-area .fwk-input,
.fw-chat-input-area .fwk-select {
    border: 1px solid #e8eaed;
    border-radius: 10px;
    background: #fff;
}
.fw-chat-input-area .fwk-input:focus,
.fw-chat-input-area .fwk-select:focus {
    border-color: var(--fw-green);
    background: #fff;
}
.fw-chat-input-area .fwk-input,
.fw-chat-input-area .fwk-select,
.fw-chat-input-area .fwk-textarea {
    margin-bottom: 0;
}
.fw-chat-input-area .fwk-button {
    border-radius: 10px;
}
/* Rich editor */
.fw-editor-wrap {
    border: 1px solid #e8eaed;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.fw-editor-wrap:focus-within {
    border-color: var(--fw-green);
}
.fw-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border-bottom: 1px solid #e8eaed;
    background: #fafafa;
    flex-wrap: wrap;
}
.fw-editor-toolbar button {
    width: 40px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--fw-black);
    cursor: pointer;
    font-size: 16px;
    padding: 0;
}
.fw-editor-toolbar button:hover {
    background: #e8eaed;
}
.fw-editor-sep {
    width: 1px;
    height: 24px;
    background: #ddd;
    margin: 0 4px;
}
.fw-editor-content {
    min-height: 120px;
    max-height: none;
    overflow-y: auto;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.6;
    outline: none;
}
.fw-editor-resize-grip {
    height: 8px;
    cursor: ns-resize;
    background: #f0f0f0;
    border-top: 1px solid #e8eaed;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fw-editor-resize-grip::after {
    content: '';
    width: 30px;
    height: 3px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.fw-editor-content:empty::before {
    content: attr(data-placeholder);
    color: var(--fw-grey);
    pointer-events: none;
}
.fw-editor-content blockquote {
    border-left: 3px solid #ddd;
    margin: 8px 0;
    padding: 4px 12px;
    color: #666;
}
.fw-editor-content pre {
    background: #f5f5f5;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 13px;
    overflow-x: auto;
}
.fw-editor-file-area {
    margin: 12px 0;
}
/* Next button alignment */
.fw-chat-input-area > .fwk-button-primary {
    float: right;
}
.fw-chat-input-area::after {
    content: '';
    display: block;
    clear: both;
    height: 15px;
}
.fw-editor-file-error {
    color: #c0392b;
    margin-top: 6px;
    padding: 0 4px;
}
/* Ticket summary */
.fw-chat-summary h4 {
    margin: 0 0 12px;
    font-size: 16px;
}
.fw-chat-summary table {
    width: 100%;
    font-size: 14px;
    margin-bottom: 16px;
}
.fw-chat-summary table td {
    padding: 5px 8px;
    border-bottom: 1px solid #f0f0f0;
}
.fw-chat-summary table td:first-child {
    color: var(--fw-grey);
    width: 90px;
    white-space: nowrap;
}
.fw-chat-summary-desc {
    max-height: 120px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.5;
}
.fw-chat-summary-desc p {
    margin: 0 0 4px;
}
.fw-chat-summary-files {
    margin-bottom: 12px;
}
.fw-chat-summary-file {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    font-size: 13px;
    border-bottom: 1px solid #f0f0f0;
}
.fw-chat-summary-file svg {
    color: var(--fw-grey);
    flex-shrink: 0;
}
.fw-chat-summary-file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fw-chat-summary-file-size {
    color: var(--fw-grey);
    flex-shrink: 0;
}
.fw-chat-summary-info {
    font-size: 13px;
    color: var(--fw-black);
    margin-bottom: 16px;
    line-height: 1.5;
}
.fw-chat-summary-info p {
    margin: 0 0 6px;
}
.fw-chat-summary-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.fw-chat-success {
    text-align: center;
    padding: 16px 0;
}
.fw-chat-success h4 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--fw-green);
}
.fw-chat-success p {
    margin: 0 0 4px;
}
/* Choice buttons — card-like */
.fw-chat-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: 62px;
    margin-right: 16px;
    margin-bottom: 16px;
}
.fw-chat-buttons .fwk-button {
    font-size: 13px;
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid #e8eaed;
    background: #fff;
    color: var(--fw-black);
    font-weight: 500;
    transition: all 0.15s ease;
}
.fw-chat-buttons .fwk-button:hover {
    border-color: var(--fw-green);
    color: var(--fw-green);
    background: #fff;
}
/* File area */
.fw-chat-file-area {
    margin-left: 62px;
    margin-right: 16px;
    margin-bottom: 16px;
}
@media (max-width: 639px) {
    .fw-chat-input-area,
    .fw-chat-buttons,
    .fw-chat-file-area,
    .fw-chat-product-cards,
    .fw-chat-website-list {
        margin-left: 0;
        margin-right: 0;
    }
    .fw-chat-bubble {
        max-width: 85%;
    }
    .fw-chat-avatar {
        width: 40px;
    }
    .fw-chat-avatar img,
    .fw-chat-avatar.bot > span[fwk-icon],
    .fw-chat-avatar.user > span[fwk-icon] {
        width: 40px;
        height: 40px;
    }
}

/* Product cards in chat */
.fw-chat-product-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 62px;
    margin-right: 16px;
    margin-bottom: 16px;
}
.fw-chat-product-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fw-chat-product-card:hover {
    border-color: var(--fw-green);
    box-shadow: 0 2px 8px rgba(52, 165, 93, 0.12);
}
.fw-chat-product-card img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.fw-chat-product-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.fw-chat-product-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--fw-black);
    line-height: 1.3;
}
.fw-chat-product-short {
    font-size: 12px;
    color: var(--fw-grey);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Website list in chat */
.fw-chat-website-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 62px;
    margin-right: 16px;
    margin-bottom: 16px;
}
.fw-chat-website-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--fw-black);
    transition: border-color 0.15s ease;
}
.fw-chat-website-item:hover {
    border-color: var(--fw-green);
    color: var(--fw-green);
}
.fw-chat-website-item > span[fwk-icon] {
    color: var(--fw-grey);
    flex-shrink: 0;
}
.fw-chat-website-item:hover > span[fwk-icon] {
    color: var(--fw-green);
}

/* Typing indicator */
.fw-chat-typing {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    align-items: flex-start;
}
.fw-chat-typing-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    margin-top: 8px;
}
.fw-chat-typing-dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fw-grey);
    animation: fw-typing 1.4s infinite;
}
.fw-chat-typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}
.fw-chat-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes fw-typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}
/* Admin access notice in chat */
.fw-chat-bubble.bot a {
    color: var(--fw-green);
    text-decoration: underline;
}
.fw-chat-bubble.bot a:hover {
    color: var(--fw-green-cold);
}

/* -- Rating (close ticket form) ------------------------------------------ */
#fws-close-popup > .fwk-modal-dialog {
    width: 700px;
    max-width: calc(100vw - 30px);
}
.fws-rating-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}
.fws-rating-row > label {
    width: 150px;
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 500;
    font-size: 14px;
    text-align: right;
}
.fws-ticket-rating {
    display: flex;
    gap: 3px;
    flex: 1;
}
.fws-ticket-rating button {
    flex: 1;
    height: 32px;
    font-size: 13px;
    min-width: 0;
}
.fws-ticket-rating button.fwk-active {
    background-color: var(--fw-green);
    color: #fff;
}
.fws-rating-labels {
    display: none;
}
.fws-feedback-box {
    background: #f0f6ff;
    border: 1px solid #d0e0f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 0;
}
.fws-feedback-box label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
}
.fws-feedback-box .fwk-textarea {
    background: #fff;
    padding: 12px 14px;
    border-color: #5a7fa0;
}
.fws-feedback-optional {
    font-size: 12px;
    font-weight: 400;
    color: #5a7fa0;
}
.fws-feedback-hints {
    font-size: 12px;
    color: #5a7fa0;
    margin-top: 8px;
    line-height: 1.5;
    font-style: italic;
}
.fws-feedback-hints span {
    font-weight: 600;
    font-style: normal;
    color: #3a6a9a;
}
#fws-close-popup .fwk-modal-body > form > .fwk-margin:last-child {
    margin-bottom: 0;
}
@media (max-width: 639px) {
    .fws-rating-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .fws-rating-row > label {
        width: auto;
    }
    .fws-rating-labels {
        padding-left: 0;
    }
}

/* ==========================================================================
   Checkout (extracted from checkout/index.php)
   ========================================================================== */

#card-element {
    padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
}
#card-element.StripeElement--focus {
    border-color: #1e87f0;
}
#card-element.StripeElement--invalid {
    border-color: #f0506e;
}
#card-errors {
    color: #f0506e;
    font-size: 14px;
    margin-top: 8px;
}
.fws-payment-tab {
    cursor: pointer;
    transition: all 0.2s;
}
.fws-payment-tab:hover {
    background: #f8f8f8;
}
.fws-payment-tab.fwk-active {
    border-color: #1e87f0 !important;
    background: #f0f7ff;
}

/* ==========================================================================
   Auth Pages — layout
   ========================================================================== */

.fw-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: #F3F3F3;
}

/* Card used by register, magic-link (old-style header/body/footer) */
.fw-auth-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
    max-width: 450px;
    width: 100%;
    margin: 20px;
}
.fw-auth-header {
    text-align: center;
    padding: 30px 30px 20px;
    border-bottom: 1px solid #e5e5e5;
}
.fw-auth-header img {
    height: 40px;
    margin-bottom: 15px;
}
.fw-auth-body {
    padding: 30px;
}
.fw-auth-footer {
    padding: 20px 30px;
    background: #f8f8f8;
    border-radius: 0 0 12px 12px;
    text-align: center;
}
.fw-divider-text {
    display: flex;
    align-items: center;
    margin: 20px 0;
}
.fw-divider-text::before,
.fw-divider-text::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e5e5;
}
.fw-divider-text span {
    padding: 0 15px;
    color: #999;
    font-size: 0.85rem;
}
.fw-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s;
}
.fw-social-btn-google {
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
}
.fw-social-btn-google:hover {
    background: #f5f5f5;
    border-color: #ccc;
    text-decoration: none;
}

/* ==========================================================================
   Auth — shared Joomla-style form (used by modal AND login page)
   ========================================================================== */

/* Buttons: regular case, not uppercase (matches Joomla) */
.fws-client-forms .fwk-button {
    text-transform: none;
}

/* Tab bar — green active, grey inactive, triangle pointer */
.fws-client-forms .fws-user-login-register {
    display: flex;
    padding: 0;
    margin: 0;
    padding-bottom: 12px;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    border-bottom: none;
    list-style: none;
}
.fws-client-forms .fws-user-login-register::before {
    display: none;
}
.fws-client-forms .fws-user-login-register li {
    flex: 1;
    padding: 0;
}
.fws-client-forms .fws-user-login-register li a {
    display: block;
    color: var(--fw-grey);
    padding: 20px 10px;
    position: relative;
    font-size: 16px;
    border: 0;
    background: #F3F3F3;
    text-align: center;
    text-decoration: none;
}
.fws-client-forms .fws-user-login-register li.fwk-active a {
    color: white;
    background: var(--fw-green);
}
.fws-client-forms .fws-user-login-register li.fwk-active a::before {
    width: 16px;
    height: 16px;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: rotate(45deg);
    margin-left: -8px;
    background: var(--fw-green);
}

/* Restore password link */
.fws-client-forms .fws-reset-password {
    color: var(--fw-green);
}

/* OR divider — centered text with line through */
.fws-client-forms .fwk-or-divider {
    text-align: center;
    position: relative;
    margin: 15px 0;
}
.fws-client-forms .fwk-or-divider::before {
    width: 100%;
    height: 1px;
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    border-top: 1px solid #E1E1E1;
}
.fws-client-forms .fwk-or-divider span {
    padding: 0 15px;
    display: inline-block;
    position: relative;
    background: #fff;
    color: #999;
    font-size: 0.85rem;
}

/* Email whitelist alert */
.fws-client-forms .fwk-alert-primary {
    background: #deecf6;
    color: #7b8c98;
    border-left-color: #bcdff1;
}

/* Disabled button state */
.fws-client-forms .fwk-button[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ==========================================================================
   Auth — login page (standalone card with Joomla-style tabs)
   ========================================================================== */

/* Content area below tabs — shared padding for modal and page */
.fws-client-forms .fw-auth-card-body {
    padding: 0 30px 30px;
}

/* Login page card */
.fw-auth-card.fws-client-forms {
    max-width: 600px;
    border-radius: 10px;
    overflow: hidden;
}

/* ==========================================================================
   Documentation
   ========================================================================== */

/* Header */
.fwdoc-header {
    padding: 30px 0 75px;
    background: #EAEAEA;
}
.fwdoc-header h1 {
    font-size: 2rem;
    font-weight: 600;
    gap: 12px;
}
.fwdoc-header-icon {
    max-height: 2.5rem;
    width: auto;
}

/* Platform switcher */
.fwdoc-platform {
    padding: 3px;
    background: white;
    border-radius: 90px;
}
.fwdoc-platform .fwk-button {
    border-radius: 90px;
    padding: 0 15px;
}
.fwdoc-platform .fwk-button-default {
    color: #666;
    background: white;
    border: none;
}
.fwdoc-platform .fwk-button-default:hover {
    color: var(--fw-primary, #1e87f0);
    background: white;
}
.fwdoc-platform .fwk-button-primary {
    color: white;
    background: var(--fw-primary, #1e87f0);
}

/* Main layout */
.fwdoc-main {
    margin-top: -75px;
    padding-top: 30px;
    min-height: 60vh;
    padding-bottom: 60px;
    position: relative;
}

/* Product cards (index) */
.fwdoc-products {
    margin: -40px 0 0;
    transform: translateY(-50%);
}
.fwdoc-product-card {
    padding: 18px 15px;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    box-shadow: none;
}
.fwdoc-product-card:hover {
    border-color: var(--fw-primary, #1e87f0);
}
.fwdoc-product-card.active {
    border-color: var(--fw-primary, #1e87f0);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.fwdoc-product-card a {
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.fwdoc-product-card:hover a,
.fwdoc-product-card.active a {
    color: var(--fw-primary, #1e87f0);
}
.fwdoc-product-card img {
    max-height: 3rem;
}

/* Sidebar search (index) */
.fwdoc-side-search {
    padding: 3px;
    border: 1px solid #E1E1E1;
}
.fwdoc-side-search .fwk-input {
    padding: 0 20px;
    border: 0;
    background: white;
}
.fwdoc-side-search .fwk-button {
    color: white;
    background: var(--fw-primary, #1e87f0);
}

/* Sidebar */
.fwdoc-side-menu {
    padding: 15px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

/* Flat nav */
.fwdoc-flat-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fwdoc-flat-nav > li > a {
    display: block;
    padding: 8px 15px;
    color: #666;
    font-size: 0.9rem;
}
.fwdoc-flat-nav > li > a:hover,
.fwdoc-flat-nav > li.fwk-active > a {
    color: var(--fw-primary, #1e87f0);
    background: #EAEAEA;
    margin-left: -15px;
    padding-left: 30px;
    margin-right: -15px;
    padding-right: 30px;
}

/* Section headers (non-clickable) */
.fwdoc-nav-section {
    margin-top: 20px;
}
.fwdoc-nav-section:first-child {
    margin-top: 0;
}
.fwdoc-nav-section-title {
    display: block;
    padding: 8px 15px;
    color: #333;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Section items */
.fwdoc-nav-section-items {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
}
.fwdoc-nav-section-items li a {
    display: block;
    padding: 6px 15px;
    color: #666;
    font-size: 0.9rem;
}
.fwdoc-nav-section-items li a:hover,
.fwdoc-nav-section-items li.fwk-active a {
    color: var(--fw-primary, #1e87f0);
    background: #EAEAEA;
    margin-left: -15px;
    padding-left: 30px;
    margin-right: -15px;
    padding-right: 30px;
}

/* Document title */
.fwdoc-title {
    margin-bottom: 30px;
}
.fwdoc-title h2 {
    margin-bottom: 5px;
}
.fwdoc-category-name {
    font-size: 0.9rem;
}

/* Document content typography */
.fwdoc-content {
    line-height: 1.8;
}
.fwdoc-content h1,
.fwdoc-content h2,
.fwdoc-content h3,
.fwdoc-content h4,
.fwdoc-content h5,
.fwdoc-content h6 {
    margin-top: 30px;
    margin-bottom: 15px;
}
.fwdoc-content img {
    display: block;
    max-width: 100%;
    margin: 20px auto;
    padding: 20px;
    background: white;
    border: 1px solid #DBDCDF;
    border-radius: 10px;
}
.fwdoc-content pre {
    background: #f8f8f8;
    padding: 15px;
    border-radius: 4px;
    overflow-x: auto;
}
.fwdoc-content code {
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
}
.fwdoc-content pre code {
    background: none;
    padding: 0;
}
/* Joomla alert boxes in document content */
.fwdoc-content .alert {
    padding: 15px 20px;
    border-radius: 5px;
    margin: 15px 0;
    border-left: 4px solid;
}
.fwdoc-content .alert.bg-info,
.fwdoc-content .alert-icon-left {
    background: #f0f7ff;
    border-left-color: #1e87f0;
    color: #333;
}
.fwdoc-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}
.fwdoc-content th,
.fwdoc-content td {
    border: 1px solid #e5e5e5;
    padding: 10px;
    text-align: left;
}
.fwdoc-content th {
    background: #f8f8f8;
}

/* Subsections */
.fwdoc-subsections {
    margin-top: 40px;
}
.fwdoc-subsection-item {
    border-top: 3px solid var(--fw-primary, #1e87f0);
    height: 100%;
}
.fwdoc-subsection-image {
    padding: 8px 8px 0;
}
.fwdoc-subsection-image img {
    width: 100%;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--fw-primary, #1e87f0);
}
.fwdoc-subsection-text {
    padding: 15px;
}
.fwdoc-subsection-title {
    color: #333;
    text-decoration: none;
}
.fwdoc-subsection-title:hover {
    color: var(--fw-primary, #1e87f0);
}
.fwdoc-subsection-intro {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 60px;
}

/* Action links */
.fwdoc-action-links {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

/* Document voting */
.fwdoc-voting {
    padding-top: 20px;
}
.fwdoc-voting-question {
    color: #666;
}
.fwdoc-voting-buttons {
    display: flex;
    gap: 10px;
}
.fwdoc-voting-buttons .vote-btn {
    transition: all 0.2s ease;
}
.fwdoc-voting-buttons .vote-btn.voted {
    background: var(--fw-primary, #1e87f0);
    color: white;
    border-color: var(--fw-primary, #1e87f0);
}
.fwdoc-voting-buttons .vote-btn.voted[data-vote="1"] {
    background: #32d296;
    border-color: #32d296;
}
.fwdoc-voting-buttons .vote-btn.voted[data-vote="0"] {
    background: #f0506e;
    border-color: #f0506e;
}
.vote-count {
    opacity: 0.7;
    font-size: 0.85em;
}
.fwdoc-voting-message {
    font-size: 0.9rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media only screen and (max-width: 1200px) {
    .fw-service-card {
        font-size: 14px;
    }

    .fw-service-card h3 {
        font-size: 20px;
    }

    .fw-about-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .fw-product-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 959px) {
    .fws-product-list-item h2 {
        font-size: 32px;
    }
    .fws-product-list-item-extra-title {
        font-size: 60px;
        line-height: 45px;
    }
}

@media only screen and (max-width: 960px) {
    .fw-hero-top::before {
        height: 130px;
    }

    .fw-hero-slideshow::before {
        content: none;
    }

    .fw-hero-slideshow {
        padding-top: 50px;
    }

    .fw-hero-slideshow .fwk-slideshow-items {
        min-height: auto !important;
    }

    .fw-hero-slideshow .fwk-slider-items li .fw-service-card {
        height: auto;
        max-width: 70%;
        margin: auto;
    }

    .fw-hero-slideshow .fwk-slider-items li .fw-service-card svg {
        display: none;
    }

    .fw-hero-slideshow [fwk-slideshow] > a {
        z-index: 100;
    }

    .fw-about-image {
        display: none;
    }

    .fw-product-header {
        flex-direction: column;
    }

    .fw-product-header-image {
        flex: none;
        max-width: 100%;
    }

    /* Service page mobile */
    .fws-service-promo {
        padding-top: 90px !important;
    }
    .fws-service-variations .fwk-grid > div:first-child {
        display: none;
    }

    /* Addon page mobile */
    .fws-addon-promo {
        padding-top: 90px !important;
    }
}

@media only screen and (max-width: 639px) {
    .fws-product-list-item h2 {
        font-size: 26px;
    }
    .fws-product-list-item-extra-title {
        display: none;
    }
    .fws-product-list-item-features {
        margin: 15px 0;
    }
}

@media only screen and (max-width: 640px) {
    .fw-about-features {
        grid-template-columns: 1fr;
    }

    .fw-product-features {
        grid-template-columns: 1fr;
    }

    .fw-blog-section-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .fw-header,
    .fw-footer,
    .fw-totop {
        display: none !important;
    }

    body {
        font-size: 12pt;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }
}

/* ==========================================================================
   Checkout Modal
   ========================================================================== */

.fws-checkout-modal {
    padding: 10px 0;
}

.fws-checkout-section {
    padding: 15px 0;
    border-bottom: 1px solid var(--fw-grey-lighter, #e5e5e5);
}

.fws-checkout-section:last-of-type {
    border-bottom: none;
}

.fws-checkout-terms {
    padding: 10px 0;
}

.fws-checkout-payment {
    border-bottom: none;
}

#modal-card-element {
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 10px 12px;
    background: #fff;
    transition: border-color 0.15s;
}

#modal-card-element.StripeElement--focus {
    border-color: var(--fw-green, #34A55D);
}

#modal-card-element.StripeElement--invalid {
    border-color: #f0506e;
}

.fws-checkout-summary {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 20px;
}

.fws-checkout-price {
    font-size: 2em;
    font-weight: 700;
    color: var(--fw-green, #34A55D);
    line-height: 1.2;
}

.fws-checkout-totals {
    border-top: 1px solid #e5e5e5;
    padding-top: 10px;
}

/* Modal dialog sizing */
#checkout-modal .fwk-modal-dialog {
    max-width: 800px;
}

/* Responsive: stack columns on mobile */
@media (max-width: 639px) {
    .fws-checkout-modal .fws-checkout-summary {
        margin-top: 20px;
    }

    .fws-checkout-price {
        font-size: 1.5em;
    }
}

/* ===== Support Ticket Thread Modal ===== */

/* Modal dialog sizing */
.fws-thread-modal-dialog {
    width: 1100px;
    max-width: 95vw;
}

/* Rounded corners for thread modals (header + body, no footer) */
#fws-support-popup .fwk-modal-dialog,
#fws-thread-popup .fwk-modal-dialog {
    border-radius: 10px;
}
#fws-support-popup .fwk-modal-header,
#fws-thread-popup .fwk-modal-header {
    border-radius: 10px 10px 0 0;
}
#fws-support-popup .fwk-modal-body,
#fws-thread-popup .fwk-modal-body {
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

/* Split layout */
.fws-thread-layout {
    display: flex;
    height: calc(100vh - 160px);
    min-height: 500px;
}
.fws-thread-sidebar {
    width: 300px;
    flex-shrink: 0;
    border-right: 1px solid #e8eaed;
    overflow-y: auto;
    padding: 20px;
    background: #fafafa;
}
.fws-thread-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.fws-thread-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 40px;
}
.fws-thread-reply {
    border-top: 1px solid #e8eaed;
    padding: 24px 40px;
    background: #fff;
}
.fws-thread-reply-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    gap: 12px;
}
.fws-thread-reply-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Status banner */
.fws-thread-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: left;
}
.fws-thread-status .fwk-label { flex-shrink: 0; font-size: 11px; }
.fws-thread-status-text { font-size: 13px; }
.fws-status-closed {
    background: #f0f0f0;
    color: #666;
}
.fws-status-reviewing {
    background: #e8f4fd;
    color: #1e87f0;
}
.fws-status-answered {
    background: #eafaf1;
    color: #2e7d32;
}

/* Sidebar sections */
.fws-thread-section {
    margin-bottom: 20px;
}
.fws-thread-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fw-black);
    margin-bottom: 8px;
}

/* Agent card in sidebar */
.fws-thread-agent { display: flex; align-items: center; gap: 10px; }
.fws-thread-agent-avatar { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.fws-thread-agent-name { font-weight: 600; font-size: 13px; color: var(--fw-black); }
.fws-thread-agent-bio { font-size: 12px; color: var(--fw-grey); margin-top: 2px; }

/* Original request — overlay panel, button stays at bottom */
.fws-original-wrapper {
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    height: 35px; /* only enough for the toggle tab */
    text-align: center;
}
/* Dropdown: absolutely positioned, holds scroll + button */
.fws-original-dropdown {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}
/* Toggle button — always visible, centered, tab shape */
.fws-thread-show-original {
    display: inline-flex; align-items: center; gap: 8px;
    background: #f0f4f8;
    border: 1px solid #d0d7de;
    border-top: none;
    border-radius: 0 0 8px 8px;
    cursor: pointer; padding: 8px 18px;
    font-size: 13px; font-weight: 500; color: var(--fw-black);
    margin-top: -1px;
    position: relative;
}
.fws-thread-show-original:hover { background: #e4eaf0; }
/* Scrollable content — collapses to 0, expands on open */
.fws-original-scroll {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    opacity: 0;
    background: #f0f4f8;
    border-bottom: 1px solid #d0d7de;
}
.fws-original-wrapper.is-open .fws-original-scroll {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    opacity: 1;
}
.fws-original-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #d0d7de;
    position: sticky; top: 0; z-index: 1;
    background: #f0f4f8;
}
.fws-original-panel-title {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--fw-black);
}
.fws-original-panel-close {
    background: none; border: none; cursor: pointer;
    color: var(--fw-grey); padding: 2px;
}
.fws-original-panel-close:hover { color: var(--fw-black); }
.fws-original-panel-body {
    padding: 10px 20px 16px;
    font-size: 13px; line-height: 1.6;
    word-break: break-word;
    text-align: left;
}

/* Product info with image */
.fws-thread-product-img { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }

/* File attachment icon buttons */
.fws-thread-file-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.fws-thread-file-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fws-thread-file-size { font-size: 11px; color: #999; }
.fws-thread-file-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 10px;
    border: none; text-decoration: none; color: #fff;
    background: var(--fw-green);
}
.fws-thread-file-btn:hover { opacity: 0.85; text-decoration: none; color: #fff; }
.fws-chat-bubble-col .fws-thread-file-buttons { margin-top: 6px; }

/* File upload list with remove buttons */
.fws-thread-reply-actions [fwk-form-custom] .fwk-button { white-space: nowrap; }
.fws-file-names { margin-top: 6px; }
.fws-file-row { padding: 2px 0; }
.fws-file-remove { color: #dc3545; cursor: pointer; vertical-align: middle; }
.fws-file-remove:hover { color: #a71d2a; }

.fws-thread-params-table {
    width: 100%;
    font-size: 13px;
    text-align: left;
}
.fws-thread-params-table td {
    padding: 6px 10px;
    vertical-align: top;
    border-bottom: 1px solid #e2e8f0;
}
.fws-thread-params-table tr:last-child td { border-bottom: none; }
.fws-thread-params-table td:first-child {
    white-space: nowrap;
    width: 1%;
    color: var(--fw-grey);
}
.fws-thread-params-table td:last-child {
    word-break: break-word;
}

/* Ticket info list */
.fws-thread-info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fws-thread-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--fw-black);
}
.fws-thread-info-icon {
    color: var(--fw-grey);
    flex-shrink: 0;
}

/* Support terms */
.fws-thread-terms {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fws-thread-terms-row {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 6px 10px;
    align-items: center;
}
.fws-thread-term-icon {
    color: var(--fw-grey);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fws-thread-term {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.fws-thread-term-label {
    font-size: 11px;
    color: var(--fw-grey);
}
.fws-thread-term-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--fw-black);
}

/* Chat bubbles */
.fws-chat-bubble-wrap {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
}
.fws-chat-bubble-right {
    flex-direction: row-reverse;
}
.fws-chat-avatar {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    object-fit: cover;
}
.fws-chat-bubble-col {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    min-width: 0;
}
.fws-chat-bubble-right .fws-chat-bubble-col { align-items: flex-end; }
.fws-chat-bubble-left .fws-chat-bubble-col { align-items: flex-start; }
.fws-chat-bubble {
    min-width: 150px;
    width: fit-content;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}
.fws-chat-bubble-staff {
    background: #f0f2f5;
    color: var(--fw-black);
    border-bottom-left-radius: 4px;
}
.fws-chat-bubble-client {
    background: var(--fw-green, #34A55D);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.fws-chat-bubble-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.fws-chat-bubble-name {
    font-weight: 600;
    font-size: 12px;
}
.fws-chat-bubble-time {
    font-size: 11px;
    opacity: 0.6;
}
.fws-chat-bubble-client .fws-chat-bubble-time {
    opacity: 0.7;
}
.fws-chat-bubble-text {
    font-size: 14px;
}
.fws-chat-bubble-text p {
    margin: 0 0 6px;
}
.fws-chat-bubble-text p:last-child {
    margin-bottom: 0;
}

/* Closed bar */
.fws-thread-closed-bar {
    text-align: center;
    color: var(--fw-grey);
    font-size: 13px;
    padding: 16px 20px;
}

/* Sidebar attachment links (legacy) */
.fws-thread-sidebar .fws-ticket-files {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Lightbox links in chat bubbles */
/* Mobile: stack layout */
@media (max-width: 768px) {
    .fws-thread-layout {
        flex-direction: column;
        height: auto;
        max-height: calc(100vh - 120px);
    }
    .fws-thread-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e8eaed;
        max-height: 200px;
        overflow-y: auto;
        padding: 12px;
    }
    .fws-thread-messages {
        min-height: 200px;
        max-height: 40vh;
    }
    .fws-thread-reply-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .fws-thread-reply-buttons {
        justify-content: flex-end;
    }
    .fws-chat-bubble {
        max-width: 90%;
    }
}

/* ============================================================
   Service Order Wizard
   ============================================================ */

/* Dialog sizes */
.fws-wizard-dialog.fws-wizard-dialog-large {
    max-width: 960px;
    width: 960px;
}
.fws-wizard-dialog.fws-wizard-dialog-compact {
    max-width: 600px;
    width: 600px;
}

/* Modal: fill screen with 40px bottom gap, no outer scroll */
#service-order-modal.fwk-open {
    overflow: hidden;
    align-items: flex-start;
}
#service-order-modal .fwk-modal-dialog {
    max-height: calc(100vh - 40px);
    margin-top: 0;
}
.fws-wizard-form {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
    overflow: hidden;
}
.fws-wizard-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.fws-wizard-nav {
    flex-shrink: 0;
}

/* Step Indicator — flush to edges inside body */
.fws-wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    margin: -30px -30px 20px;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    gap: 0;
}
@media (min-width: 640px) {
    .fws-wizard-steps {
        margin: -45px -50px 20px;
    }
}
.fws-wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
    min-width: 60px;
}
.fws-wizard-step-completed {
    cursor: pointer;
}
.fws-wizard-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #e5e5e5;
    color: #999;
    background: #fff;
    transition: all 0.2s;
}
.fws-wizard-step-current .fws-wizard-step-circle {
    border-color: var(--fw-green, #34A55D);
    background: var(--fw-green, #34A55D);
    color: #fff;
}
.fws-wizard-step-completed .fws-wizard-step-circle {
    border-color: var(--fw-yellow, #FFBF00);
    background: var(--fw-yellow, #FFBF00);
    color: var(--fw-black, #323232);
}
.fws-wizard-step-label {
    font-size: 11px;
    margin-top: 4px;
    color: #999;
    white-space: nowrap;
}
.fws-wizard-step-current .fws-wizard-step-label {
    color: var(--fw-green, #34A55D);
    font-weight: 600;
}
.fws-wizard-step-completed .fws-wizard-step-label {
    color: var(--fw-black, #323232);
}
.fws-wizard-step-line {
    flex: 1;
    height: 2px;
    background: #e5e5e5;
    margin: 0 6px;
    margin-bottom: 18px; /* align with circle center */
}
.fws-wizard-step-line-done {
    background: var(--fw-yellow, #FFBF00);
}

/* Panels */
.fws-wizard-panel {
    display: none;
}
.fws-wizard-panel-active {
    display: block;
}

/* Layout (multi-step with sidebar) */
.fws-wizard-layout {
    display: flex;
    gap: 0;
}
.fws-wizard-main {
    flex: 1;
    min-width: 0;
}
.fws-wizard-sidebar {
    width: 40%;
    flex-shrink: 0;
    padding-left: 30px;
}
@media (max-width: 959px) {
    .fws-wizard-sidebar {
        display: none !important;
    }
}

/* Summary Sidebar */
.fws-wizard-summary {
    position: sticky;
    top: 0;
    background: #f8f8f8;
    border-radius: 8px;
    padding: 20px;
}
.fws-wizard-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}
.fws-wizard-summary-label {
    color: #777;
}
.fws-wizard-summary-value {
    font-weight: 500;
    color: var(--fw-black, #323232);
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}
.fws-wizard-summary-pricing {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 2px solid var(--fw-green, #34A55D);
    text-align: center;
}
.fws-wizard-summary-budget {
    font-size: 22px;
    font-weight: 700;
    color: var(--fw-green, #34A55D);
}
.fws-wizard-summary-delivery {
    font-size: 13px;
    color: #777;
    margin-top: 4px;
}

/* Mobile Summary Bar */
.fws-wizard-mobile-summary {
    position: sticky;
    bottom: 0;
    background: var(--fw-dark, #2E4857);
    color: #fff;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    border-radius: 6px;
    margin-top: 16px;
}

/* Tier Selection Cards */
.fws-wizard-tier {
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 16px;
}
.fws-wizard-tier:hover {
    border-color: var(--fw-green, #34A55D);
    background: #f9fdf9;
}
.fws-wizard-tier-selected {
    border-color: var(--fw-green, #34A55D);
    background: #f0faf3;
    box-shadow: 0 0 0 1px var(--fw-green, #34A55D);
}
.fws-wizard-tier-name {
    font-weight: 600;
    font-size: 16px;
    flex: 1;
}
.fws-wizard-tier-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--fw-green, #34A55D);
}
.fws-wizard-tier-delivery {
    font-size: 13px;
    color: #777;
}
.fws-wizard-tier-notsure {
    border-style: dashed;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* Auth Step */
.fws-wizard-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--fw-green, #34A55D);
}
.fws-wizard-auth {
    max-width: 360px;
    margin: 0 auto;
    padding: 20px 0;
}
.fws-wizard-auth-tab {
    display: inline-block;
    padding: 8px 20px;
    font-weight: 500;
    color: #777;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition: all 0.2s;
}
.fws-wizard-auth-tab:hover {
    color: var(--fw-black, #323232);
    text-decoration: none;
}
.fws-wizard-auth-tab.fwk-active {
    color: var(--fw-green, #34A55D);
    border-bottom-color: var(--fw-green, #34A55D);
}

/* Field Validation */
.fws-wizard-field-error .fwk-input,
.fws-wizard-field-error .fwk-select,
.fws-wizard-field-error .fwk-textarea {
    border-color: #f0506e;
}
.fws-wizard-error-msg {
    display: block;
    font-size: 12px;
    color: #f0506e;
    margin-top: 4px;
}

/* Navigation */
.fws-wizard-nav {
    border-top: 1px solid #e5e5e5;
}

/* Responsive */
@media (max-width: 639px) {
    .fws-wizard-dialog.fws-wizard-dialog-large,
    .fws-wizard-dialog.fws-wizard-dialog-compact {
        max-width: calc(100vw - 20px);
        width: auto;
        margin: 10px;
    }
    .fws-wizard-steps {
        padding: 12px 16px;
        overflow-x: auto;
    }
    .fws-wizard-step-label {
        font-size: 10px;
    }
    .fws-wizard-step-circle {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

/* Wizard Editor */
/* Wizard file upload field */
.fws-wizard-file-upload { position: relative; }
.fws-wizard-file-input {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.fws-wizard-file-dropzone {
    border: 2px dashed #ddd;
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    transition: border-color 0.2s;
    color: var(--fw-grey);
}
.fws-wizard-file-dropzone:hover,
.fws-wizard-file-upload.dragover .fws-wizard-file-dropzone {
    border-color: var(--fw-green);
    color: var(--fw-green);
}
.fws-wizard-file-dropzone p { margin: 8px 0 2px; font-size: 14px; }
.fws-wizard-file-list { margin-top: 8px; }
.fws-wizard-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f8f8f8;
    border-radius: 5px;
    margin-top: 4px;
    font-size: 13px;
}
.fws-wizard-file-item-name { flex: 1; }
.fws-wizard-file-item-size { color: var(--fw-grey); font-size: 12px; }
.fws-wizard-file-remove {
    cursor: pointer;
    color: var(--fw-grey);
    padding: 2px;
}
.fws-wizard-file-remove:hover { color: #ef2f2f; }

/* Wizard switch field */
.fws-wizard-switch-wrap .fwk-switch { flex-shrink: 0; }

.fws-wizard-editor-wrap {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
}
.fws-wizard-editor-wrap:focus-within {
    border-color: var(--fw-green, #34A55D);
}
.fws-wizard-editor {
    min-height: 300px;
    padding: 15px;
    outline: none;
    font-size: 14px;
    line-height: 1.6;
}
.fws-wizard-editor:empty::before {
    content: attr(data-placeholder);
    color: #999;
}
.fws-wizard-editor-toolbar {
    border-bottom: 1px solid #e5e5e5;
}