/* ===== BASE ===== */

/* Reset Elementor/WordPress overrides inside our container */
#plans-container h1,
#plans-container h2,
#plans-container h3,
#plans-container h4,
#plans-container p,
#plans-container span,
#plans-container a,
#plans-container label,
#plans-container button,
#plans-container input,
#plans-container div {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
}

#plans-container img {
    max-width: none !important;
    height: auto !important;
}

/* ===== SHARED PHONE INPUT (used on buy + payment status pages) ===== */
.hbp-phone-input {
    display: flex;
    align-items: center;
    border: 2px solid #AAAAAA;
    border-radius: 8px;
    padding: 4px;
    font-size: 16px;
    font-weight: 500;
    position: relative;
}

.hbp-phone-input .country-select-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 4px;
    cursor: pointer;
}

.hbp-phone-input .country-flag {
    width: 28px;
    height: 20px;
    object-fit: cover;
    border-radius: 2px;
    pointer-events: none;
}

.hbp-phone-input .country-native-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    border: none;
    font-family: 'Montserrat', sans-serif !important;
}

.hbp-phone-input .country-dial-code {
    font-size: 16px;
    font-weight: 600;
    color: #000 !important;
    margin-left: 6px;
    pointer-events: none;
}

.hbp-phone-input input[type="tel"] {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    font-weight: 600;
    padding: 8px 8px 8px 4px;
    width: 100%;
    height: 47px;
}

/* Lock check/cross icon sizes — prevent Elementor and HTML attributes from overriding */
#plans-container img.check-icon {
    width: 24px !important;
    height: 20px !important;
}

#plans-container img.cross-icon {
    width: 16px !important;
    height: 16px !important;
}

#plans-container {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    box-sizing: border-box;
}

#plans-container *, #plans-container *::before, #plans-container *::after {
    box-sizing: border-box;
}

/* ===== SKELETON LOADER ===== */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.skeleton-line {
    background-color: #e5e7eb;
    border-radius: 4px;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-circle {
    width: 20px;
    height: 20px;
    background-color: #e5e7eb;
    border-radius: 50%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-card {
    pointer-events: none;
}

.skeleton-name {
    height: 24px;
    width: 80%;
    margin-bottom: 16px;
    margin-top: 8px;
}

.skeleton-price-row {
    height: 14px;
    width: 100%;
    margin-bottom: 8px;
}

.skeleton-amount {
    height: 28px;
    width: 60%;
    margin-bottom: 12px;
}

.skeleton-btn {
    height: 36px;
    width: 100%;
    border-radius: 8px;
}

.skeleton-label {
    height: 16px;
    width: 70%;
}

.skeleton-col-header {
    height: 20px;
    width: 80%;
    margin: 0 auto 8px;
}

/* ===== OUTER WRAPPER ===== */
/* Original: bg-white mb-8 */
.plans-page {
    background-color: #ffffff;
    margin-bottom: 32px;
}

/* ===== HEADING ===== */
/* Original: mb-8 */
.plans-heading {
    margin-bottom: 32px;
}

/* Original: text-[40px] max-[640px]:text-[20px] text-[#046E75] font-bold text-center */
.plans-heading h1 {
    font-size: 40px;
    color: #046E75;
    font-weight: 700;
    text-align: center;
    margin: 0;
}

/* Original: text-[20px] max-[640px]:text-[16px] font-bold text-[#3B3A3A] text-center */
.plans-heading p {
    font-size: 20px;
    font-weight: 700;
    color: #3B3A3A;
    text-align: center;
    margin: 0;
}

/* ===== CARDS WRAPPER ===== */
/* Original: lg:w-fit lg:mx-auto md:w-3/5 md:mx-auto */
.plans-cards-wrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Original: flex items-end gap-2 overflow-x-auto px-3 mb-4 lg:justify-center md:justify-center */
.plans-cards {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 16px;
    justify-content: center;
}

/* ===== PLAN CARD OUTER ===== */
/* Original: bg-white pt-2 lg:w-3/5 */
.plan-card-outer {
    background-color: #ffffff;
    padding-top: 8px;
    position: relative;
}

/* ===== PLAN CARD ===== */
/* Original: rounded-lg p-2 flex-shrink-0 w-full relative cursor-pointer max-[640px]:w-[16rem] */
.plan-card {
    border-radius: 8px;
    padding: 8px;
    flex-shrink: 0;
    width: 100%;
    position: relative;
    cursor: pointer;
    overflow: visible;
}

/* Original: border-[2.5px] border-[#046E75] */
.plan-card.selected {
    border: 2.5px solid #046E75;
}

/* Original: border border-[#C7C7C7] */
.plan-card.unselected {
    border: 1px solid #C7C7C7;
}

/* ===== BEST SELLER BADGE ===== */
/* Original: bg-[#046E75] border rounded-t-md border-[#046E75] px-5 py-[2px] flex gap-1 justify-center items-center absolute top-0 left-0 w-full */
.best-seller-badge {
    background-color: #046E75;
    border: 1px solid #046E75;
    border-radius: 6px 6px 0 0;
    padding: 2px 20px;
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.best-seller-badge img {
    width: 20px;
    height: 20px;
}

/* Original: text-white text-[12px] italic */
.best-seller-badge span {
    color: #ffffff;
    font-size: 12px;
    font-style: italic;
}

/* ===== SELECTED CHECKMARK ===== */
/* Original: bg-white absolute top-[-8px] right-[-9px] rounded-full */
.selected-checkmark {
    background-color: #ffffff;
    position: absolute;
    top: -8px;
    right: -9px;
    border-radius: 50%;
    z-index: 1;
    line-height: 0;
    padding: 0;
    margin: 0;
}

.selected-checkmark img {
    width: 24px;
    height: 24px;
    display: block;
}

/* ===== PLAN NAME ===== */
/* Original: text-[#222] whitespace-nowrap h-[45px] */
.plan-name {
    color: #222222;
    white-space: nowrap;
    margin: 0;
}

/* Original selected: text-[24px] font-extrabold */
.plan-card.selected .plan-name {
    font-size: 24px;
    font-weight: 800;
}

/* Original unselected: text-[20px] font-bold */
.plan-card.unselected .plan-name {
    font-size: 20px;
    font-weight: 700;
}

/* Original: mt-5 (when has best seller badge) */
.plan-name.has-badge {
    margin-top: 20px;
}

/* ===== FESTIVAL BONUS TEXT ===== */
/* Original: text-[#F75E00] text-[20px] font-bold mt-[-0.8em] */
.festival-bonus {
    color: #F75E00;
    font-size: 20px;
    font-weight: 700;
    margin-top: -0.8em;
}

/* ===== PRICING ROW ===== */
/* Original: flex justify-between gap-2 */
.plan-pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* Original: text-[#464646] line-through text-[14px] font-semibold whitespace-nowrap */
.plan-original-price {
    color: #464646;
    text-decoration: line-through;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    margin: 0;
}

/* Original: text-[12px] text-white rounded-lg whitespace-nowrap px-[10px] py-[2px] uppercase */
.plan-discount-badge {
    font-size: 12px;
    color: #ffffff;
    border-radius: 8px;
    white-space: nowrap;
    padding: 2px 10px;
    text-transform: uppercase;
    margin: 0;
}

/* Original selected: bg-[#E23232] */
.plan-card.selected .plan-discount-badge {
    background-color: #E23232;
}

/* Original unselected: bg-[#F78F8F] */
.plan-card.unselected .plan-discount-badge {
    background-color: #F78F8F;
}

/* ===== DISCOUNTED PRICE ===== */
/* Original: font-bold pb-3 */
.plan-discounted-price {
    font-weight: 700;
    padding-bottom: 16px;
    margin: 6px 0 0 0;
}

/* Original selected: text-[#046E75] text-[32px] underline */
.plan-card.selected .plan-discounted-price {
    color: #046E75;
    font-size: 32px;
    text-decoration: underline;
}

/* Original unselected: text-[#535353] text-[20px] */
.plan-card.unselected .plan-discounted-price {
    color: #535353;
    font-size: 20px;
}

/* ===== BUY NOW BUTTON ===== */
/* Original: px-4 py-2 rounded-lg bg-[#FFA924] text-[#523200] font-bold w-full block text-center */
.plan-buy-btn {
    display: block;
    width: 100%;
    padding: 8px 16px;
    border-radius: 8px;
    background-color: #FFA924;
    color: #523200;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    position: relative;
    overflow: hidden;
}

.plan-card.selected .plan-buy-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 70%,
        transparent 100%
    );
    animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 150%; }
}

.plan-buy-btn:hover {
    opacity: 0.9;
}

/* ===== FEATURES TABLE WRAPPER ===== */
/* Original: border-2 border-t-[#EBEBEB] border-b-0 border-x-0 px-[0.5px] rounded-xl */
.features-table-wrapper {
    border-top: 2px solid #EBEBEB;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    padding-left: 0.5px;
    padding-right: 0.5px;
    border-radius: 12px;
}

/* Original: rounded-xl px-2 + inline backgroundImage gradient */
.features-table {
    background-image: linear-gradient(180deg, #EBFEFE 0.03%, rgba(190, 231, 233, 0.00) 107.08%);
    border-radius: 12px;
    padding-left: 8px;
    padding-right: 8px;
}

/* Original: flex */
.features-table-inner {
    display: flex;
}

/* ===== FEATURES LABELS (left column) ===== */
/* Original: max-[640px]:min-w-[35%] lg:w-[37%] pt-5 lg:pt-9 lg:pl-[3em] */
.features-labels {
    min-width: 35%;
    padding-top: 20px;
}

/* Original: border-2 border-b-[#9BE1E3] border-x-0 border-t-0 px-1 h-[62px] flex items-center lg:justify-start lg:pr-[2em] */
.feature-label-row {
    border-bottom: 2px solid #9BE1E3;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    padding-left: 4px;
    padding-right: 4px;
    height: 62px;
    display: flex;
    align-items: center;
}

/* Original: text-[#093035] text-[12px] font-bold lg:text-[16px] lg:whitespace-nowrap */
.feature-label-text {
    color: #093035;
    font-size: 12px;
    font-weight: 700;
    margin: 0;
}

/* Original: text-[#093035] text-[12px] lg:text-[16px] font-medium */
.feature-label-desc {
    color: #093035;
    font-size: 12px;
    font-weight: 500;
    margin: 0;
}

/* ===== FEATURES COLUMNS (right side) ===== */
/* Original: flex justify-evenly gap-2 pt-1 max-[640px]:pl-2 */
.features-columns {
    display: flex;
    justify-content: space-evenly;
    gap: 8px;
    padding-top: 4px;
    flex: 1;
}

.feature-column {
    text-align: center;
}

/* Original: text-center whitespace-nowrap text-[14px] lg:text-[24px] */
.feature-column-header {
    white-space: nowrap;
    font-size: 14px;
    margin: 0;
}

/* Original selected: text-[#046E75] font-extrabold */
.feature-column.selected .feature-column-header {
    color: #046E75;
    font-weight: 800;
}

/* Original unselected: text-[#505050] font-semibold */
.feature-column.unselected .feature-column-header {
    color: #505050;
    font-weight: 600;
}

/* Original selected: rounded-t-[4px] pricing-gradient px-1 relative top-[-10px] pt-3 */
.feature-column.selected {
    border-radius: 4px 4px 0 0;
    background-image: linear-gradient(180deg, #bee7e9 0%, rgba(190, 231, 233, 0) 100%);
    padding-left: 4px;
    padding-right: 4px;
    position: relative;
    top: -10px;
    padding-top: 12px;
}

/* Original unselected: lg:px-5 */
.feature-column.unselected {
    padding-left: 20px;
    padding-right: 20px;
}

/* Original: flex justify-center h-[62px] pt-[1em] */
.feature-check-row {
    display: flex;
    justify-content: center;
    height: 62px;
    padding-top: 1em;
}

/* Original: w-6 h-5 */
.feature-check-row img.check-icon {
    width: 24px;
    height: 20px;
}

/* Original: w-4 h-4 */
.feature-check-row img.cross-icon {
    width: 16px;
    height: 16px;
}

/* ===== RESPONSIVE — MOBILE (max-width: 640px) ===== */
@media (max-width: 640px) {
    .plans-heading h1 {
        font-size: 20px;
    }

    .plans-heading p {
        font-size: 16px;
    }

    /* Cards scroll horizontally */
    .plan-card {
        width: 16rem;
    }

    .plans-cards {
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }

    /* Feature table: all 3 columns visible, no scroll */
    .features-table-wrapper {
        width: 100%;
    }

    .features-columns {
        padding-left: 8px;
        gap: 4px;
    }

    /* Match source: px-2 = 8px on mobile */
    .feature-column.unselected {
        padding-left: 8px;
        padding-right: 8px;
    }

    .feature-column.selected {
        padding-left: 2px;
        padding-right: 2px;
    }

    .feature-column-header {
        font-size: 12px;
    }
}

/* ===== RESPONSIVE — TABLET (min-width: 768px) ===== */
@media (min-width: 768px) {
    /* md:w-3/5 md:mx-auto */
    .plans-cards-wrapper {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }

    /* md:justify-center */
    .plans-cards {
        justify-content: center;
    }
}

/* ===== RESPONSIVE — DESKTOP (min-width: 1024px) ===== */
@media (min-width: 1024px) {
    /* lg:w-fit lg:mx-auto */
    .plans-cards-wrapper {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    /* lg:w-3/5 on card outer */
    .plan-card-outer {
        width: 60%;
    }

    /* lg:justify-center */
    .plans-cards {
        justify-content: center;
    }

    /* lg:w-[37%] lg:pt-9 lg:pl-[3em] */
    .features-labels {
        width: 37%;
        padding-top: 36px;
        padding-left: 3em;
    }

    /* lg:text-[16px] lg:whitespace-nowrap */
    .feature-label-text {
        font-size: 16px;
        white-space: nowrap;
    }

    /* lg:text-[16px] */
    .feature-label-desc {
        font-size: 16px;
    }

    /* lg:pr-[2em] */
    .feature-label-row {
        padding-right: 2em;
    }

    /* lg:text-[24px] */
    .feature-column-header {
        font-size: 24px;
    }

    /* lg:px-5 for unselected */
    .feature-column.unselected {
        padding-left: 20px;
        padding-right: 20px;
    }
}