/* =============================================
   Petsure Icon Box Grid Widget
   Inspired by Petona elementskit-infobox structure.
   Flat grid with:
   - ::after  = Vertical divider (right, 90% height, centered in gap)
   - ::before = Horizontal divider (top, 90% width, centered in gap)
                (hides on first row via nth-child)
   - Accent bar on hover via box-shadow inset
   ============================================= */

/* === Grid Container === */
.petsure-icon-box-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--petsure-row-gap, 20px);
    margin-top: 20px;
}

/* === Item Base === */
.petsure-icon-box-item {
    display: flex;
    align-items: flex-start;
    padding: 24px;
    border-radius: 12px;
    position: relative;
    height: 100%;
    background: var(--petsure-background);
}

/* ============================================
   HORIZONTAL DIVIDER (::before top, centered in gap)
   Applies to BOTH default and badge styles.
   Items in row 2+ get a ::before at the top,
   positioned in the middle of the gap above.
   90% width to avoid visual intersection.
   ============================================ */
.petsure-icon-box-item::before {
    content: '';
    position: absolute;
    top: calc(var(--petsure-row-gap) / -2);
    left: 5%;
    width: 90%;
    height: 1px;
    background: var(--petsure-divider);
    pointer-events: none;
}

/* Hide horizontal divider on first row items */

.petsure-col-4 .petsure-icon-box-item:nth-child(-n+4)::before {
    display: none;
}

.petsure-col-3 .petsure-icon-box-item:nth-child(-n+3)::before {
    display: none;
}

.petsure-col-2 .petsure-icon-box-item:nth-child(-n+2)::before {
    display: none;
}

.petsure-col-1 .petsure-icon-box-item:nth-child(-n+1)::before {
    display: none;
}

/* ============================================
   VERTICAL DIVIDER (::after right, centered in gap)
   Applies to BOTH default and badge styles.
   90% height to avoid visual intersection.
   ============================================ */
.petsure-icon-box-item::after {
    content: '';
    position: absolute;
    top: 5%;
    right: calc(var(--petsure-row-gap) / -2);
    width: 1px;
    height: 90%;
    background: var(--petsure-divider);
    pointer-events: none;
}

/* Hide vertical divider on last item in each row */

.petsure-col-4 .petsure-icon-box-item:nth-child(4n)::after {
    display: none;
}

.petsure-col-3 .petsure-icon-box-item:nth-child(3n)::after {
    display: none;
}

.petsure-col-2 .petsure-icon-box-item:nth-child(2n)::after {
    display: none;
}

/* 1 column: no vertical dividers, ::before handles horizontal separators */
.petsure-col-1 .petsure-icon-box-item::after {
    display: none;
}

/* ============================================
   LINK ITEMS — Petona style: no hover accent bar
   Clean and minimal, just cursor pointer
   ============================================ */

.petsure-icon-box-item.petsure-icon-box-link {
    cursor: pointer;
}

/* === LAYOUT: Icon Left === */
.petsure-icon-box-layout-left {
    flex-direction: row;
    text-align: left;
    gap: 15px;
}

.petsure-icon-box-layout-left .petsure-icon-box-body {
    flex: 1;
}

/* === LAYOUT: Icon Top (Centered) === */
.petsure-icon-box-layout-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.petsure-icon-box-layout-top .petsure-icon-box-body {
    padding-top: 15px;
}

.petsure-icon-box-layout-top .petsure-icon-box-icon-wrap {
    align-self: center;
}

/* === Icon Wrap (circular) === */
.petsure-icon-box-icon-wrap {
    width: 60px;
    height: 60px;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(var(--petsure-accent-rgb), 0.1);
    transition: all ease-in-out .7s;
}

/* === Icon === */
.petsure-icon-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: var(--petsure-accent);
}

/* SVG default properties */
.petsure-icon-box-icon svg {
    width: 35px;
    height: 35px;
    display: block;
    fill: currentColor;
    color: inherit;
}

/* Font icon default */
.petsure-icon-box-icon i {
    font-size: 28px;
    color: inherit;
}

/* Image default */
.petsure-icon-box-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* Custom SVG: no forced colors by default */
.petsure-icon-box-icon.petsure-svg-custom svg {
    width: auto;
    height: auto;
    max-width: 40px;
    max-height: 40px;
}

.petsure-icon-box-icon.petsure-svg-custom svg * {
    fill: initial;
    stroke: initial;
}

/* === Title === */
.petsure-icon-box-title {
    font-size: 20px !important;
    font-weight: 700;
    color: var(--petsure-primary) !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3;
}

/* === Description === */
.petsure-icon-box-description {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* === List Items (replaces description) === */
.petsure-icon-box-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.petsure-icon-box-list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: inherit;
    position: relative;
}

/* Accent dot bullet, hidden when icon is set */
.petsure-icon-box-list-item::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--petsure-accent);
    margin-top: 6px;
    opacity: 0.7;
}

.petsure-icon-box-list-item.has-icon::before {
    display: none;
}

.petsure-icon-box-list-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--petsure-accent);
    margin-top: 2px;
}

.petsure-icon-box-list-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.petsure-icon-box-list-icon i {
    font-size: 14px;
}

.petsure-icon-box-list-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Badge style list adjustments */
.petsure-icon-box-style-badge .petsure-icon-box-list {
    gap: 6px;
    margin-bottom: 16px;
}

.petsure-icon-box-style-badge .petsure-icon-box-list-item {
    font-size: 13px;
}

.petsure-icon-box-style-badge .petsure-icon-box-list-item::before {
    width: 5px;
    height: 5px;
    margin-top: 8px;
}

/* === Link base styles === */
.petsure-icon-box-item.petsure-icon-box-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    display: flex;
}

/* === PETONA-STYLE BUTTON (position-aware) === */
.petsure-icon-box-btn-wrap {
    margin-top: 12px;
}

.petsure-icon-box-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    font-size: 16px;
    background: var(--petsure-accent);
    color: var(--petsure-primary);
    border-radius: 10px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-transform: capitalize;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s ease-in-out;
}

/* === Hover: Button === */
.petsure-icon-box-btn:hover {
    color: var(--petsure-white);
}

.petsure-icon-box-btn:hover .petsure-btn-icon {
    background: var(--petsure-primary);
    color: var(--petsure-white);
}

/* === Button mode item === */
.petsure-icon-box-has-button {
    display: flex;
}

/* === HOVER: Petona minimal style, subtle shadow only === */
.petsure-icon-box-item.petsure-icon-box-link:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.petsure-icon-box-item.petsure-icon-box-link.petsure-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.petsure-icon-box-item.petsure-icon-box-link.petsure-hover-glow:hover {
    box-shadow: 0 0 0 2px rgba(var(--petsure-accent-rgb), 0.1), 0 8px 25px rgba(0, 0, 0, 0.06);
}

/* ============================================
   BADGE CARD STYLE (#13)
   Base badge look applies to ANY column count:
   flat card, no default divider background trick.
   The special "merged pill" look (alternating
   bg + rounded outer corners) is reserved for
   the 3-column case, since it was designed for
   exactly 3 items sharing one visual bar.
   ============================================ */

.petsure-icon-box-style-badge .petsure-icon-box-item {
    flex-direction: column;
    text-align: left;
    padding: 30px 24px;
    border-radius: 0;
    background: transparent;
    height: 100%;
}

.petsure-icon-box-style-badge .petsure-icon-box-icon-wrap {
    width: 56px;
    height: 56px;
    min-width: 56px;
    background: rgba(var(--petsure-accent-rgb), 0.12);
    margin-bottom: 16px;
}

.petsure-icon-box-style-badge .petsure-icon-box-icon svg {
    width: 30px;
    height: 30px;
}

.petsure-icon-box-style-badge .petsure-icon-box-icon i {
    font-size: 30px;
}

.petsure-icon-box-style-badge .petsure-icon-box-body {
    padding-top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.petsure-icon-box-style-badge .petsure-icon-box-title {
    font-size: 18px !important;
    font-weight: 700;
    margin-bottom: 6px !important;
}

.petsure-icon-box-style-badge .petsure-icon-box-description {
    font-size: 13px;
    margin-bottom: 16px;
}

/* Sub-items row */
.petsure-icon-box-sub-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.petsure-icon-box-sub-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.petsure-icon-box-sub-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--petsure-accent);
}

.petsure-icon-box-sub-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.petsure-icon-box-sub-icon i {
    font-size: 16px;
}

.petsure-icon-box-sub-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--petsure-primary);
    line-height: 1.3;
}

/* ============================================
   BADGE — 1 / 2 / 4 COLUMNS
   No merged-pill background trick. Behaves like
   a flat card grid and reuses the standard
   ::before / ::after divider logic defined above
   (already scoped per petsure-col-N, so it just
   works here without extra rules).
   ============================================ */

.petsure-col-1.petsure-icon-box-style-badge .petsure-icon-box-item,
.petsure-col-2.petsure-icon-box-style-badge .petsure-icon-box-item,
.petsure-col-4.petsure-icon-box-style-badge .petsure-icon-box-item {
    border-radius: 12px;
}

/* ============================================
   BADGE — 3 COLUMNS (merged pill layout)
   Only this configuration disables the standard
   dividers and grid gap, replacing them with the
   alternating background + shared outer radius.
   ============================================ */

.petsure-col-3.petsure-icon-box-style-badge .petsure-icon-box-grid {
    gap: 0;
}

.petsure-col-3.petsure-icon-box-style-badge .petsure-icon-box-item::before,
.petsure-col-3.petsure-icon-box-style-badge .petsure-icon-box-item::after {
    display: none !important;
}

.petsure-col-3.petsure-icon-box-style-badge .petsure-icon-box-item:first-child {
    background: var(--petsure-white);
    border-radius: 16px 0 0 16px;
}

.petsure-col-3.petsure-icon-box-style-badge .petsure-icon-box-item:nth-child(2) {
    background: var(--petsure-background);
}

.petsure-col-3.petsure-icon-box-style-badge .petsure-icon-box-item:nth-child(3) {
    background: var(--petsure-white);
    border-radius: 0 16px 16px 0;
}

.petsure-icon-box-grid .petsure-icon-box-item:last-child::after {
    display: none !important;
}

/* Tablet: 3-column badge collapses to stacked pill */
@media (max-width: 1024px) {

    .petsure-col-3.petsure-icon-box-style-badge .petsure-icon-box-item:first-child,
    .petsure-col-3.petsure-icon-box-style-badge .petsure-icon-box-item:nth-child(2),
    .petsure-col-3.petsure-icon-box-style-badge .petsure-icon-box-item:nth-child(3) {
        background: var(--petsure-white);
        border-radius: 0;
    }

    .petsure-col-3.petsure-icon-box-style-badge .petsure-icon-box-item:first-child {
        border-radius: 16px 16px 0 0;
    }

    .petsure-col-3.petsure-icon-box-style-badge .petsure-icon-box-item:nth-child(2) {
        background: var(--petsure-background);
    }

    .petsure-col-3.petsure-icon-box-style-badge .petsure-icon-box-item:nth-child(3) {
        border-radius: 0 0 16px 16px;
    }
}

@media (max-width: 767px) {
    .petsure-col-3.petsure-icon-box-style-badge .petsure-icon-box-item:first-child {
        border-radius: 12px 12px 0 0;
    }

    .petsure-col-3.petsure-icon-box-style-badge .petsure-icon-box-item:nth-child(3) {
        border-radius: 0 0 12px 12px;
    }

    .petsure-icon-box-sub-items {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }
}

/* ============================================
   RESPONSIVE
   Tablet (1024px) -> 2 columns
   Mobile (767px)  -> 1 column

   IMPORTANT: Each responsive block MUST first
   override the desktop nth-child rules (same
   specificity, wins by source order), then
   apply the correct nth-child for the current
   breakpoint. Without the override, desktop
   nth-child rules persist due to equal
   specificity. Applies to both default and
   badge styles (badge col-3 dividers stay
   disabled via the !important rule above, so
   these have no visible effect there).
   ============================================ */

@media (max-width: 1024px) {
    .petsure-icon-box-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .petsure-icon-box-item {
        padding: 20px;
    }

    .petsure-col-2 .petsure-icon-box-item:nth-child(n)::before,
    .petsure-col-3 .petsure-icon-box-item:nth-child(n)::before,
    .petsure-col-4 .petsure-icon-box-item:nth-child(n)::before {
        display: block;
    }

    .petsure-col-2 .petsure-icon-box-item:nth-child(-n+2)::before,
    .petsure-col-3 .petsure-icon-box-item:nth-child(-n+2)::before,
    .petsure-col-4 .petsure-icon-box-item:nth-child(-n+2)::before {
        display: none;
    }

    .petsure-col-2 .petsure-icon-box-item:nth-child(n)::after,
    .petsure-col-3 .petsure-icon-box-item:nth-child(n)::after,
    .petsure-col-4 .petsure-icon-box-item:nth-child(n)::after {
        display: block;
    }

    .petsure-col-2 .petsure-icon-box-item:nth-child(2n)::after,
    .petsure-col-3 .petsure-icon-box-item:nth-child(2n)::after,
    .petsure-col-4 .petsure-icon-box-item:nth-child(2n)::after {
        display: none;
    }
}

/* ============================================
   COMPLEMENT CELL
   Optional decorative grid cell: renders only an
   icon / image / custom SVG, centered vertically
   and horizontally. No background, no text, no
   button — keeps the icon-box visual language.
   ============================================ */

.petsure-icon-box-complement {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 100%;
    position: relative;
}

/* Complement cell gets the same grid dividers as the items:
   horizontal ::before on top (hidden when it starts on the first
   row) and vertical ::after on the right (hidden when it is the
   last cell — which it always is since it renders at the end). */
.petsure-icon-box-complement::before {
    content: '';
    position: absolute;
    top: calc(var(--petsure-row-gap) / -2);
    left: 5%;
    width: 90%;
    height: 1px;
    background: var(--petsure-divider);
    pointer-events: none;
}

.petsure-icon-box-complement::after {
    content: '';
    position: absolute;
    top: 5%;
    right: calc(var(--petsure-row-gap) / -2);
    width: 1px;
    height: 90%;
    background: var(--petsure-divider);
    pointer-events: none;
    display: none;
}

/* Hide the horizontal divider when the complement starts on the
   first row of the CURRENT breakpoint (fewer items than columns).
   Three classes are emitted per breakpoint; each media block only
   hides the one that matters at that width. */
.petsure-icon-box-complement.petsure-complement-first-row-d::before,
.petsure-icon-box-complement.petsure-complement-first-row-t::before,
.petsure-icon-box-complement.petsure-complement-first-row-m::before {
    display: none;
}

@media (max-width: 1024px) {
    .petsure-icon-box-complement.petsure-complement-first-row-d::before {
        display: block;
    }
}

@media (max-width: 767px) {
    .petsure-icon-box-complement.petsure-complement-first-row-d::before,
    .petsure-icon-box-complement.petsure-complement-first-row-t::before {
        display: block;
    }
}

.petsure-icon-box-complement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Size fallbacks when the Complement Cell Style controls are not set.
   The 80px applies to the icon WRAP (container); the inner svg/img/i
   adapts to ~40px keeping a 30-40px difference for padding. Elementor-generated rules
   (same selectors, printed later) override these when configured. */
.petsure-icon-box-complement .petsure-icon-box-icon-wrap {
    width: 80px;
    height: 80px;
    min-width: 80px;
}

.petsure-icon-box-complement .petsure-icon-box-icon svg,
.petsure-icon-box-complement .petsure-icon-box-icon img {
    width: 40px;
    height: 40px;
}

.petsure-icon-box-complement .petsure-icon-box-icon i {
    font-size: 40px;
}

@media (max-width: 767px) {
    .petsure-icon-box-grid {
        grid-template-columns: 1fr;
    }

    .petsure-icon-box-layout-left {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .petsure-icon-box-layout-left .petsure-icon-box-body {
        padding-left: 0;
        padding-top: 15px;
    }

    .petsure-icon-box-item {
        padding: 20px;
    }

    .petsure-col-2 .petsure-icon-box-item:nth-child(n)::before,
    .petsure-col-3 .petsure-icon-box-item:nth-child(n)::before,
    .petsure-col-4 .petsure-icon-box-item:nth-child(n)::before {
        display: block;
    }

    .petsure-col-2 .petsure-icon-box-item:nth-child(-n+1)::before,
    .petsure-col-3 .petsure-icon-box-item:nth-child(-n+1)::before,
    .petsure-col-4 .petsure-icon-box-item:nth-child(-n+1)::before {
        display: none;
    }

    .petsure-col-2 .petsure-icon-box-item:nth-child(n)::after,
    .petsure-col-3 .petsure-icon-box-item:nth-child(n)::after,
    .petsure-col-4 .petsure-icon-box-item:nth-child(n)::after {
        display: none;
    }
}