/**
 * Vini Uvita Occasions
 * Styles for the [vini_uvita_occasions] shortcode
 */

/* Container */
.vini-occasions {
    max-width: 100%;
}

@media (max-width: 768px) {
    .vini-occasions {
        padding: 0 16px;
    }
}

/* Title */
.vini-occasions__title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.02em;
    color: #181d27;
    margin: 0;
    padding: 16px 0 20px;
    border-bottom: 1px solid #d5d7da;
}

@media (max-width: 768px) {
    .vini-occasions__title {
        font-size: 24px;
        line-height: 32px;
        padding: 8px 0 12px;
    }
}

/* Occasion cards grid */
.vini-occasions__grid {
    display: flex;
    gap: 0;
    align-items: center;
}

@media (max-width: 768px) {
    .vini-occasions__grid {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 8px;
    }

    .vini-occasions__grid::-webkit-scrollbar {
        display: none;
    }
}

/* Individual occasion card */
/* Selector reforzado: 2 clases gana sobre .elementor-kit-7 button y .uvita-trigger-btn */
.vini-occasions .vini-occasions__card {
    flex: 1 1 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 32px !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-right: 1px solid #d5d7da !important;
    border-bottom: 1px solid #d5d7da !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
    color: #000 !important;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    font-family: inherit;
    min-height: unset !important;
    max-height: unset !important;
    height: auto !important;
    box-shadow: none !important;
}

.vini-occasions .vini-occasions__card:last-child {
    border-right: none !important;
}

.vini-occasions .vini-occasions__card:hover {
    transform: translateY(-4px) !important;
    background-color: #f9fafb !important;
    box-shadow: none !important;
    color: #000 !important;
}

.vini-occasions .vini-occasions__card:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .vini-occasions .vini-occasions__card {
        flex: 0 0 160px;
        scroll-snap-align: start;
        padding: 20px 16px;
        gap: 12px;
    }
}

/* Card image */
.vini-occasions__card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
}

.vini-occasions__card-image img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .vini-occasions__card-image,
    .vini-occasions__card-image img {
        width: 90px;
        height: 90px;
    }
}

/* Card label */
.vini-occasions__card-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #000;
}

@media (max-width: 768px) {
    .vini-occasions__card-label {
        font-size: 18px;
        line-height: 24px;
    }
}

/* CTA section */
.vini-occasions__cta {
    display: flex;
    justify-content: center;
    padding: 32px 0;
}

/* CTA card */
.vini-occasions__cta-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 592px;
    width: 100%;
    padding: 32px;
    background: #fff;
    border: 1px solid #d5d7da;
    border-radius: 24px;
    overflow: hidden;
}

/* Uvita logo */
.vini-uvita-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.vini-uvita-logo__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #7579FF 0%, #B224EF 100%);
    border-radius: 12px;
}

.vini-uvita-logo__icon svg {
    width: 20px;
    height: 24px;
}

.vini-uvita-logo__wordmark {
    display: flex;
    align-items: center;
}

.vini-uvita-logo__wordmark svg {
    width: 94px;
    height: 30px;
}

/* CTA heading */
.vini-occasions__cta-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 30px!important;
    line-height: 38px!important;
    color: #181d27;
    text-align: center;
    margin: 0;
}

@media (max-width: 768px) {
    .vini-occasions__cta-heading {
        font-size: 22px;
        line-height: 30px;
    }
}

/* CTA subtitle */
.vini-occasions__cta-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: #181d27;
    text-align: center;
    margin: 0;
}

@media (max-width: 768px) {
    .vini-occasions__cta-subtitle {
        font-size: 16px;
        line-height: 24px;
    }
}

/* CTA button */
.vini-occasions__cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background-color: #f45a2f;
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    box-shadow:
        0 1px 2px rgba(10, 13, 18, 0.003),
        inset 0 -2px 0 rgba(10, 13, 18, 0.003),
        inset 0 0 0 1px rgba(10, 13, 18, 0.032);
}

.vini-occasions__cta-button:hover {
    background-color: #e04d25;
    color: #fff;
}

.vini-occasions__cta-button:active {
    background-color: #d04420;
}

/* The global reset in vini-buttons-reset.css strips background/border/color from any
   `button:focus` / `button:active` with !important. After clicking the CTA while the chat
   is already open the button keeps focus (openChat() is not called, so the focus is not
   moved to the chat input) and it lost its look, leaving only the label. Keep it styled
   in every state (hover/active go last so they win over focus). */
.vini-occasions__cta .vini-occasions__cta-button:focus,
.vini-occasions__cta .vini-occasions__cta-button:focus-visible {
    background-color: #f45a2f !important;
    color: #fff !important;
    box-shadow:
        0 1px 2px rgba(10, 13, 18, 0.003),
        inset 0 -2px 0 rgba(10, 13, 18, 0.003),
        inset 0 0 0 1px rgba(10, 13, 18, 0.032) !important;
}

.vini-occasions__cta .vini-occasions__cta-button:hover {
    background-color: #e04d25 !important;
    color: #fff !important;
}

.vini-occasions__cta .vini-occasions__cta-button:active {
    background-color: #d04420 !important;
    color: #fff !important;
}