/**
 * USP Info Card Widget Styles
 * 
 * Cards that display icon and title by default, with body text revealed on hover (desktop) or click (mobile).
 * Default state: filled with color. Hover/click state: hollowed out (border with color, white inside).
 * Uses squircle corner shape that animates on hover/click.
 */

.usp-info-card-wrapper {
    width: 100%;
    height: 100%;
}

.usp-info-card {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
    padding: 20px;
    overflow: hidden;
    cursor: pointer;
    /* Squircle shape using modern CSS corner-shape property */
    corner-shape: squircle;
    border-radius: 45px;
    /* Default state: filled background - color applied via Elementor selectors */
    /* Elementor's selectors set: --usp-bg-color, background-color, and border-color */
    /* We only set border-width here, colors come from Elementor */
    border: 3px solid;
    /* Fallback colors only if Elementor hasn't set them yet */
    background-color: var(--usp-bg-color, #FED535);
    border-color: var(--usp-bg-color, #FED535);
    transition: transform 0.3s ease, border-radius 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Fallback for browsers that don't support corner-shape - just use rounded corners */
@supports not (corner-shape: squircle) {
    .usp-info-card {
        border-radius: 45px;
    }
}

.usp-info-card:hover,
.usp-info-card:focus {
    transform: translateY(-2px);
    /* Slightly reduce border-radius on hover - makes squircle more rounded */
    border-radius: 36px;
    /* Hollow out on hover - white background with colored border */
    background-color: #ffffff !important;
    border-color: var(--usp-bg-color, #FED535) !important;
    outline: none;
}

.usp-info-card:focus-visible {
    outline: 2px solid var(--usp-bg-color, #FED535);
    outline-offset: 2px;
}

/* Hide the background div since we're using the card's background directly */
.usp-info-card-bg {
    display: none;
}

/* Animation directions - no longer needed for background animation, but keeping for potential future use */

.usp-info-card-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: inherit;
    text-align: center;
}

.usp-info-card-default {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.usp-info-card.active .usp-info-card-default,
.usp-info-card:hover .usp-info-card-default,
.usp-info-card:focus .usp-info-card-default {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.usp-info-card-hover {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    text-align: center;
    box-sizing: border-box;
    z-index: 3;
}

.usp-info-card.active .usp-info-card-hover,
.usp-info-card:hover .usp-info-card-hover,
.usp-info-card:focus .usp-info-card-hover {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.usp-info-card-icon {
    font-size: 48px;
    line-height: 1;
    color: #000000;
    transition: transform 0.3s ease;
}

.usp-info-card:hover .usp-info-card-icon,
.usp-info-card:focus .usp-info-card-icon {
    transform: scale(1.1);
}

.usp-info-card.active .usp-info-card-icon {
    transform: scale(0.9);
}

.usp-info-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    line-height: 1.4;
}

.usp-info-card-body {
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

/* Desktop: Hover behavior - ensure hollow out works on desktop */
@media (hover: hover) and (pointer: fine) {
    .usp-info-card:hover,
    .usp-info-card:focus {
        background-color: #ffffff !important;
        border-color: var(--usp-bg-color, #FED535) !important;
    }
    
    .usp-info-card-body {
        max-width: 40ch;
    }
}

/* Mobile: Click behavior (handled by JavaScript) - hollow out the card */
@media (max-width: 768px) {
    .usp-info-card {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .usp-info-card-body {
    font-size: 16px;
    line-height: 1.2;
    color: #000000;
}
    
    .usp-info-card.active {
        background-color: #ffffff !important;
        border-color: var(--usp-bg-color, #FED535) !important;
        /* Slightly reduce border-radius on active - makes squircle more rounded */
        border-radius: 36px;
    }
    
    .usp-info-card-default,
    .usp-info-card-hover {
        transition: opacity 0.35s ease, transform 0.35s ease;
    }
}

/* Reverse animation on exit */
.usp-info-card.exiting {
    background-color: var(--usp-bg-color, #FED535);
    border-color: var(--usp-bg-color, #FED535);
    border-radius: 45px;
    transition: background-color 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease;
}

.usp-info-card.exiting .usp-info-card-default {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.usp-info-card.exiting .usp-info-card-hover {
    transition: opacity 0.25s ease, transform 0.25s ease;
}