/**
 * 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;
    }
}

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

.fw-hero-top {
    color: #fff;
    margin-bottom: 60px;
    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,
.fw-hero-slideshow .fwk-slider-container {
    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;
}

/* Slideshow item visibility - ensure proper show/hide */
.fw-hero-slideshow .fwk-slideshow-items {
    position: relative;
    min-height: 418px !important;
    z-index: 100;
}

.fw-hero-slideshow .fwk-slideshow-items > li {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0 !important;
    visibility: hidden;
    z-index: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.fw-hero-slideshow .fwk-slideshow-items > li.fwk-active {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible;
    z-index: 1;
}

.fw-hero-slideshow .fwk-text-lead {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    line-height: 1.6;
}

/* 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);
    height: 340px;
    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; */
    margin-bottom: 40px!important;
}

.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;
}

.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 */
.fw-blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-bottom: 3px solid var(--fw-green);
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--fw-box-shadow);
    transition: all var(--fw-transition);
}

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

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

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

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

.fw-blog-card .fw-blog-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fw-green-warm);
    font-weight: 600;
}

.fw-blog-card .fw-blog-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 15px;
    line-height: 1.54;
    flex: 1;
}

.fw-blog-card:hover .fw-blog-title {
    color: var(--fw-green);
}

.fw-blog-card .fw-blog-excerpt {
    color: var(--fw-grey);
    font-size: 14px;
    margin-bottom: 15px;
}

.fw-blog-card .fw-blog-meta {
    font-size: 0.85rem;
    color: var(--fw-muted);
}

.fw-blog-card .fw-blog-link {
    display: inline-block;
    padding: 0 30px;
    line-height: 46px;
    border: none;
    border-radius: 10px;
    background: #f4f4f4;
    color: var(--fw-green);
    font-size: 15px;
    font-weight: 500;
    transition: all var(--fw-transition);
    margin-top: auto;
    text-align: center;
}

.fw-blog-card .fw-blog-link:hover,
.fw-blog-card:hover .fw-blog-link {
    color: #fff;
    background: var(--fw-green-warm);
}

/* ==========================================================================
   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 Area
   ========================================================================== */

.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 - 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 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%);
}

.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;
    font-weight: 500;
    letter-spacing: 0;
    border-radius: 5px;
}

.fwk-label-success {
    background-color: var(--fw-green);
    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-lead {
    font-size: 1rem;
    line-height: 1.4;
}

.fws-user-menu-list .fwk-text-meta {
    font-size: 0.75rem;
    color: #989898;
}

/* ==========================================================================
   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);
}

/* Support ticket action buttons */
.fws-support-buttons .fwk-button.fwk-button-secondary {
    padding: 6px 20px;
    border-color: var(--fw-yellow);
    background: transparent;
}

.fws-support-buttons .fwk-button.fwk-button-secondary:hover {
    background: var(--fw-yellow);
    color: #fff;
}

.fws-support-buttons .fwk-button.fwk-button-secondary svg {
    color: var(--fw-yellow);
    margin-right: 5px;
}

.fws-support-buttons .fwk-button.fwk-button-secondary:hover svg {
    color: #fff;
}

/* 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: 170px 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;
}

/* Features Section */
.fws-product-features {
    padding: 60px 0;
    background: #f8f8f8;
}
.fws-product-features-side svg {
    color: var(--fw-green, #34A55D);
    width: 50px;
    height: 50px;
}
.fws-product-features-side .fwk-text-lead {
    font-size: 18px;
}
.fws-product-features-side .fwk-label {
    color: var(--fw-green, #34A55D);
    background: #DEF5E7;
}
.fws-product-features-side .fwk-text-small {
    line-height: 1.83;
}
.fws-product-features-side div + div {
    margin-top: 50px;
}
.fws-product-features-screen img {
    padding: 15px;
    box-shadow: var(--fw-box-shadow, 0 19px 41px rgba(50, 52, 62, .15));
    border-radius: 10px;
}
.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;
}
.fws-product-addon .fwk-card-media-top .fws-product-addon-free {
    width: 57px;
    height: 57px;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../images/products/addon_free.png') 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: 20;
}
.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; }

/* 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 2px 8px rgba(0,0,0,0.08));
}
.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 .fws-product-list-item-service-price,
.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-service-text {
    color: var(--fw-grey, #989898);
    height: 57px;
    margin: 0 0 15px;
    font-size: 12px;
    line-height: 1.55;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fws-product-list-item-service-price {
    color: var(--fw-black, #323232);
    font-size: 14px;
    line-height: 1.7;
}

/* Translations Section */
.fws-product-translations {
    padding: 60px 0;
    position: relative;
    min-height: 535px;
}
.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;
}
.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: 30px;
    margin-left: -10px;
}
/* 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;
}
/* Highlighted 3rd pricing card (green background) */
.fws-product-plans .fws-pricing-wrp > div:nth-child(3) .fwk-card {
    color: #fff;
    background: var(--fw-green, #34A55D);
}
.fws-product-plans .fws-pricing-wrp > div:nth-child(3) .fwk-card .fwk-text-lead,
.fws-product-plans .fws-pricing-wrp > div:nth-child(3) .fwk-card .fw-text-green,
.fws-product-plans .fws-pricing-wrp > div:nth-child(3) .fwk-card svg,
.fws-product-plans .fws-pricing-wrp > div:nth-child(3) .fws-packages-price {
    color: #fff !important;
}

/* 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-benefits {
    color: rgba(255, 255, 255, .43);
}
.fws-service-benefits strong {
    color: #fff;
}

/* 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-number {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
}

/* 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;
}

/* 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 .fwk-grid > div:first-child {
    background: url(../images/site/process_bg.png) no-repeat center center;
    background-size: contain;
}
.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;
}
.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;
}

/* Service Reviews Section */
.fws-service-reviews .fwk-slider-container {
    padding: 5px 20px 40px;
}
.fws-service-reviews-item {
    padding: 30px 30px 10px;
    box-shadow: var(--fw-box-shadow-short) !important;
    border-bottom: 3px solid var(--fw-green);
}
.fws-service-reviews-item-avatar {
    width: 65px;
    height: 65px;
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
}
.fws-service-reviews-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.fws-service-reviews-item-stars svg {
    color: var(--fw-yellow);
    margin-right: 5px;
}
.fws-service-reviews-item-text p:first-child {
    font-size: 18px;
    font-weight: 500;
}

/* 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;
}

.fws-product-list-item-services .fws-service-card {
    border-top: 3px solid var(--fw-green) !important;
    transition: all 0.3s ease;
}

.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-product-list-item-services .fws-service-price {
    color: var(--fw-black);
    font-size: 14px;
    line-height: 1.7;
    background: none;
    padding: 0;
    padding-left: 15px;
    margin: 0;
    border-radius: 0;
}

.fws-product-list-item-services .fws-service-card:hover {
    color: #fff !important;
    background: var(--fw-green-cold) !important;
}

.fws-product-list-item-services .fws-service-card:hover .fws-service-icon,
.fws-product-list-item-services .fws-service-card:hover .fwk-h6,
.fws-product-list-item-services .fws-service-card:hover .fws-service-price,
.fws-product-list-item-services .fws-service-card:hover .fws-service-text {
    color: #fff !important;
}

.fws-product-list-item-services .fws-service-card:hover .fwk-button {
    color: #fff;
    background: var(--fw-green-warm);
    border-color: var(--fw-green-warm);
}

/* Lead Service Items (Services Listing) */
.fws-lead-service-item,
.fws-lead-service-item canvas {
    height: 454px;
}
.fws-lead-service-item .fwk-grid-collapse > div:first-child {
    align-self: stretch;
}
.fws-lead-service-item .fwk-card-media {
    width: 653px;
    max-width: 100%;
    height: 100%;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}
.fws-lead-service-item .fwk-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fws-lead-service-item:nth-child(2n + 1) .fwk-grid-collapse {
    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) .fws-lead-service-text {
    padding-right: 55px;
}
.fws-lead-service-item:nth-child(2n + 1) .fws-lead-service-text {
    padding-left: 55px;
}

/* ==========================================================================
   Products - Addon Page (extracted from products/addon.php)
   ========================================================================== */

/* Addon Promo Hero */
.fws-addon-promo.fws-product-top {
    color: #fff;
    padding: 140px 0 40px;
    background: var(--fw-linear-dark, linear-gradient(to right, #2E4857, #1C313E));
}
.fws-addon-promo h1 {
    font-size: 2rem;
    margin: 0 0 15px;
}

/* Green labels row */
.fws-addon-type {
    margin-bottom: 10px;
}
.fws-label-green {
    background: var(--fw-green, #34A55D);
    color: #fff;
}

/* Description text */
.fws-addon-description-text {
    opacity: 0.9;
    line-height: 1.6;
}

/* Compatibility & links */
.fws-addon-compatibility {
    color: #fff;
}
.fws-addon-links a.fwk-button-link {
    color: #fff;
}
.fws-addon-links a.fwk-button-link:hover {
    color: rgba(255,255,255,0.8);
}

/* Addon image */
.fws-addon-image img {
    max-height: 300px;
    max-width: 100%;
}
.fws-addon-details a {
    color: rgba(255,255,255,0.8);
}
.fws-addon-details a:hover {
    color: #fff;
}

/* All Features Section */
.fws-addon-features {
    padding: 40px 0;
}
.fws-addon-features h2 {
    text-transform: uppercase;
    font-size: 1.3rem;
    font-weight: 500;
}
.fws-addon-feature .feature-icon {
    color: #ffbe00;
}

/* Description Content */
.fws-addon-content-section {
    padding: 40px 0;
    background: #f8f8f8;
}
.fws-addon-content {
    line-height: 1.8;
}
.fws-addon-content img {
    max-width: 100%;
    height: auto;
    margin: 20px auto;
    display: block;
}

/* Packages Section */
.fws-addon-packages {
    padding: 60px 0;
    background: var(--fw-linear-dark, linear-gradient(to right, #2E4857, #1C313E));
}
.fws-package-card {
    height: 100%;
}
.fws-package-card .fws-package-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--fw-green, #34A55D);
}

/* Related Addons Section */
.fws-addon-related .fwk-card-media-top {
    padding: 20px;
    background: #f8f8f8;
    text-align: center;
}
.fws-addon-related .fwk-card-media-top img {
    max-height: 100px;
    width: auto;
}

/* CTA Section */
.fws-addon-cta {
    padding: 40px 0;
}

/* ==========================================================================
   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
   ==== */
.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;
}

/* ==========================================================================
   Client - Support Listing (extracted from client/support/index.php)
   ========================================================================== */

.fws-support-buttons-info {
    background-color: #f8f8f8;
    border-radius: 5px;
}
.fws-support-item {
    height: 100%;
}
.fws-support-item > .fwk-card {
    height: 100%;
    border-left: 4px solid #ddd;
    transition: all 0.2s ease;
}
.fws-support-item.status-closed .fwk-card .fwk-label {
    background: #BEBEBE;
}
.fws-support-item.status-closed > .fwk-card {
    border-left-color: #666;
    opacity: 0.7;
}
.fws-support-item.status-answered > .fwk-card {
    border-left-color: #32d296;
}
.fws-support-item.status-idle > .fwk-card {
    border-left-color: #32d296;
}
.fws-support-item.status-incomplete > .fwk-card {
    border-left-color: #faa05a;
}
.fws-support-item:hover > .fwk-card {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.fws-support-item-header img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 5px;
}
.fws-support-item-id {
    color: #999;
    font-size: 0.85em;
}
.fwk-badge-new {
    background: #f0506e;
    color: #fff;
    font-size: 0.75em;
    padding: 2px 8px;
    border-radius: 10px;
}
.fwcs-sl-item-rating {
    display: flex;
    gap: 8px;
    align-items: center;
}
.fwcs-sl-item-rating span[fwk-icon] {
    color: #faa05a;
}
.fws-ticket-rating button {
    min-width: 36px;
}
.fws-ticket-rating button.fwk-active {
    background-color: var(--fw-green);
    color: #fff;
}

/* ==========================================================================
   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 (extracted from layouts/auth.php)
   ========================================================================== */

.fw-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #1e5799 0%, #1e87f0 100%);
}
.fw-auth-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    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;
}

/* ==========================================================================
   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: 40px;
    }
}

@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 ===== */
.fwk-modal-dialog .fws-ticket-original-badge .fwk-badge {
    color: white !important;
    padding: 9px 18px;
    font: bold 14px/1.73 inherit !important;
    text-transform: uppercase;
    background: var(--fw-green, #34A55D);
    border-radius: 10px 10px 0 0;
}
.fwk-modal-dialog .fws-ticket-original {
    border: 2px solid var(--fw-green, #34A55D);
    border-radius: 10px 0 10px 10px;
}
.fwk-modal-dialog .fws-ticket-original-footer {
    border-radius: 0 0 10px 10px;
}
.fwk-modal-dialog .fws-ticket-original-photo img {
    width: 90px;
}
.fwk-modal-dialog .fws-ticket-message {
    width: 75%;
    margin-right: 25%;
    margin-bottom: 25px;
    position: relative;
    background: #f8f8f8;
    border-radius: 10px;
}
.fwk-modal-dialog .fws-ticket-message::before {
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    left: 15px;
    bottom: -17px;
    border-top: solid 19px #f8f8f8;
    border-left: solid 19px #f8f8f8;
    border-right: solid 19px transparent;
    border-bottom: solid 19px transparent;
    z-index: -1;
}
.fwk-modal-dialog .fws-ticket-message-photo img {
    width: 60px;
    border: 1px solid white;
}
.fwk-modal-dialog .fws-ticket-message-client {
    color: white !important;
    margin-left: 25%;
    margin-right: 0;
    background: var(--fw-green, #34A55D);
}
.fwk-modal-dialog .fws-ticket-message-client .fwk-text-muted {
    color: rgba(255, 255, 255, .41) !important;
}
.fwk-modal-dialog .fws-ticket-message-client::before {
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    left: auto;
    right: 15px;
    bottom: -19px;
    border-top: solid 19px var(--fw-green, #34A55D);
    border-right: solid 19px var(--fw-green, #34A55D);
    border-left: solid 19px transparent;
    border-bottom: solid 19px transparent;
}