/* =============================================================
   Pricing Cards — Unified Design System
   Applies to all XAXE service pages with .testi-card.style2
   ============================================================= */

/* ------------------------------------------------------------------
   1. SWIPER — cap width, equal-height slides, centered incomplete rows
   ------------------------------------------------------------------ */
.testi-slider2 {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

/* slides stretch to the tallest in each row */
.testi-slider2 .swiper-wrapper {
    align-items: stretch !important;
    justify-content: center;          /* centers slides when fewer than slidesPerView */
    height: auto !important;          /* override Swiper's JS-computed fixed height (autoHeight) */
}
.testi-slider2 .swiper-slide {
    height: auto !important;
    display: flex !important;
}
/* Drop trailing margin on the last .swiper-slide so total slide width matches
   wrapper width; otherwise justify-content:center on .swiper-wrapper shifts slides
   left and the first card's border gets clipped by the section overflow.
   :not(:has(~ .swiper-slide)) targets the last .swiper-slide regardless of
   pagination/scrollbar siblings after it. */
.testi-slider2 .swiper-slide:not(:has(~ .swiper-slide)) {
    margin-right: 0 !important;
}
.testi-slider2 .testi-card.style2 {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column;
    overflow: visible !important;     /* override theme's overflow:hidden — content must not be clipped */
}
.testi-slider2 .testi-card.style2 .box-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Desktop (all 3 cards visible, no horizontal swiping): allow container
   to grow freely so full card height and the top badge (top:-10px) are visible */
@media (min-width: 1200px) {
    .testi-slider2 .swiper.ot-slider {
        overflow: visible !important;
        padding-top: 14px !important; /* space for .price-tag.price-top (top:-10px) */
    }
}

/* Tablet & mobile: keep container overflow:hidden for swipe transitions,
   but give top-padding so the badge isn't clipped by the container edge */
@media (max-width: 1199px) {
    .testi-slider2 .swiper.ot-slider {
        padding-top: 14px !important;
    }
}

/* ------------------------------------------------------------------
   2. GRIDS — Flexbox so incomplete last rows are auto-centered
      Covers: fortinet-grid, fw-grid, sophos-grid
   ------------------------------------------------------------------ */
.fortinet-grid,
.fw-grid,
.sophos-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 24px !important;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
}

/* Each card: exactly 1/3 width, accounting for 2 × 24px gaps */
.fortinet-grid > .testi-card.style2,
.fw-grid > .testi-card.style2,
.sophos-grid > .testi-card.style2 {
    flex: 0 0 calc(33.333% - 16px) !important;
    max-width: calc(33.333% - 16px) !important;
    width: calc(33.333% - 16px) !important;
    min-width: 240px;
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
}

/* Sophos group-title rows span full width (replaces grid-column:1/-1) */
.sophos-grid > .sophos-group-title {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Card content fills remaining height for equal-height effect */
.fortinet-grid > .testi-card.style2 .box-content,
.fw-grid > .testi-card.style2 .box-content,
.sophos-grid > .testi-card.style2 .box-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Tablet — 2 columns, gaps: 1 × 24px */
@media (max-width: 1199px) {
    .fortinet-grid > .testi-card.style2,
    .fw-grid > .testi-card.style2,
    .sophos-grid > .testi-card.style2 {
        flex: 0 0 calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
        width: calc(50% - 12px) !important;
    }
}

/* Mobile — full width */
@media (max-width: 575px) {
    .fortinet-grid > .testi-card.style2,
    .fw-grid > .testi-card.style2,
    .sophos-grid > .testi-card.style2 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ------------------------------------------------------------------
   3. ICON CIRCLE
   ------------------------------------------------------------------ */
.testi-card.style2 .box-thumb,
.fw-icon-circle {
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0;
    margin-bottom: 14px !important;
}
.testi-card.style2 .box-thumb i,
.fw-icon-circle i {
    font-size: 24px !important;
}

/* ------------------------------------------------------------------
   4. PRODUCT NAME — h3.box-title inside pricing cards
   ------------------------------------------------------------------ */
.testi-card.style2 h3.box-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin-top: 10px !important;
    margin-bottom: 4px !important;
    color: #fff !important;
    word-break: break-word;
}

/* ------------------------------------------------------------------
   5. CARD SUBTITLE
   ------------------------------------------------------------------ */
.testi-card.style2 .box-subtitle {
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    color: rgba(255, 255, 255, 0.48) !important;
    display: block !important;
    margin-bottom: 0 !important;
}

/* ------------------------------------------------------------------
   6. PRICE BLOCK
   ------------------------------------------------------------------ */
.testi-card.style2 .price-tag:not(.price-top) {
    margin: 12px 0 14px !important;
    line-height: 1.4 !important;
}

/* Main price number — override the huge 30–55px defaults */
.small-font-idr,
.small-font-idr-2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    letter-spacing: -0.3px;
}

/* Price unit text (/month, /year, etc.) */
.testi-card.style2 .per-month {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    vertical-align: baseline !important;
    margin-left: 2px !important;
}

/* .current-price used on SOC cards */
.testi-card.style2 .current-price {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.3 !important;
}
.testi-card.style2 .current-price .per-month {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ------------------------------------------------------------------
   7. FEATURE LISTS — check-list & uncheck-list
   ------------------------------------------------------------------ */
.testi-card.style2 .check-list ul,
.testi-card.style2 .uncheck-list ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

.testi-card.style2 .check-list ul li,
.testi-card.style2 .uncheck-list ul li {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    color: rgba(255, 255, 255, 0.82) !important;
}

.testi-card.style2 .check-list ul li:last-child,
.testi-card.style2 .uncheck-list ul li:last-child {
    border-bottom: none !important;
}

/* Icon inside list item */
.testi-card.style2 .check-list ul li i,
.testi-card.style2 .uncheck-list ul li i {
    flex-shrink: 0 !important;
    margin-top: 3px !important;
    font-size: 12px !important;
    width: 13px !important;
    text-align: center !important;
    line-height: 1.5 !important;
}

/* Reset font-size bleed from .check-list.small-font-idr-2 on green-terms divs */
.testi-card.style2 div.check-list.small-font-idr-2 {
    font-size: inherit !important;
}

/* Spacing between consecutive list blocks */
.testi-card.style2 .check-list + .check-list,
.testi-card.style2 .uncheck-list + .check-list {
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ------------------------------------------------------------------
   8. YEAR / SERIES BADGE (Fortinet, Sangfor, WatchGuard)
   ------------------------------------------------------------------ */
.year-badge {
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    letter-spacing: 0.3px;
}

/* ------------------------------------------------------------------
   9. ADD-TO-CART BUTTON — force full width in all card contexts
   ------------------------------------------------------------------ */
.testi-card.style2 .btn-add-to-cart {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ------------------------------------------------------------------
   10. RESPONSIVE ADJUSTMENTS
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
    .small-font-idr,
    .small-font-idr-2,
    .testi-card.style2 .current-price {
        font-size: 18px !important;
    }
    .testi-card.style2 h3.box-title {
        font-size: 14px !important;
    }
}

@media (max-width: 575px) {
    .testi-card.style2 .box-thumb,
    .fw-icon-circle {
        width: 56px !important;
        height: 56px !important;
    }
    .testi-card.style2 .box-thumb i,
    .fw-icon-circle i {
        font-size: 22px !important;
    }
    .testi-card.style2 .check-list ul li,
    .testi-card.style2 .uncheck-list ul li {
        font-size: 12.5px !important;
    }
    .small-font-idr,
    .small-font-idr-2,
    .testi-card.style2 .current-price {
        font-size: 18px !important;
    }
    .testi-card.style2 .per-month {
        font-size: 11px !important;
    }
}