/**
 * MiniCAD -- Pricing Component Styles
 *
 * Pricing cards, custom-quote card, guarantee, whatsapp link,
 * float animation, badge pulse.
 * Loaded on page-home.php AND page-pricing.php.
 *
 * @package MiniCAD
 */

/* -- Pricing section -------------------------------------------- */

.mc-pricing {
    background: var(--mc-calypso); position: relative; overflow: hidden;
    content-visibility: auto; contain-intrinsic-size: auto 900px;
}
.mc-pricing::after {
    content: ''; position: absolute; top: calc(-180px * var(--mc-scale)); right: calc(-180px * var(--mc-scale));
    width: calc(480px * var(--mc-scale)); height: calc(480px * var(--mc-scale)); pointer-events: none;
    background: radial-gradient(ellipse,rgba(var(--mc-spray-rgb),.05) 0%,transparent 55%);
}
.mc-pricing__top { display: grid; grid-template-columns: 60fr 40fr; gap: calc(28px * var(--mc-scale)); align-items: start; margin-bottom: calc(32px * var(--mc-scale)); }

/* -- Custom quote card ------------------------------------------ */

.mc-pricing-custom {
    background: var(--mc-deep); border: 1px solid rgba(var(--mc-amber-rgb),0.6);
    border-radius: var(--mc-radius); padding: calc(28px * var(--mc-scale)) calc(28px * var(--mc-scale)) calc(24px * var(--mc-scale));
    display: flex; flex-direction: column; align-self: start; width: 100%;
    position: relative; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(var(--mc-amber-rgb),0.15), 0 8px 32px rgba(var(--mc-deep-rgb),0.3);
    transition: transform 0.25s var(--mc-ease), box-shadow 0.25s var(--mc-ease);
}
.mc-pricing-custom:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(var(--mc-amber-rgb),0.6), 0 16px 40px rgba(var(--mc-amber-rgb),0.18); }

.mc-pricing-custom__top-row { display: flex; align-items: flex-start; gap: calc(14px * var(--mc-scale)); margin-bottom: calc(20px * var(--mc-scale)); }
.mc-pricing-custom__icon {
    width: calc(44px * var(--mc-scale)); height: calc(44px * var(--mc-scale)); flex-shrink: 0;
    background: rgba(var(--mc-amber-rgb),0.12); border: 1px solid rgba(var(--mc-amber-rgb),0.35);
    border-radius: calc(10px * var(--mc-scale)); display: flex; align-items: center; justify-content: center; color: var(--mc-amber);
}
.mc-pricing-custom__label { font-family: var(--mc-font-head); font-size: var(--mc-fs-2xs); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--mc-amber); margin-bottom: calc(5px * var(--mc-scale)); }
.mc-pricing-custom__price { font-family: var(--mc-font-head); font-size: var(--mc-fs-3xl); font-weight: 800; color: var(--mc-white); line-height: 1; }
.mc-pricing-custom__divider { height: 1px; background: rgba(var(--mc-white-rgb),0.08); margin-bottom: calc(20px * var(--mc-scale)); }
.mc-pricing-custom__desc { font-size: calc(var(--mc-fs) * 0.929); line-height: 1.65; color: rgba(var(--mc-light-rgb),0.75); margin-bottom: calc(22px * var(--mc-scale)); flex: 1; }
.mc-pricing-custom__desc p { margin-bottom: calc(8px * var(--mc-scale)); color: rgba(var(--mc-light-rgb),0.75); }
.mc-pricing-custom__desc p:last-child { margin-bottom: 0; }
.mc-pricing-custom__desc strong { color: var(--mc-light); font-weight: 700; }
.mc-pricing-custom__desc em { color: rgba(var(--mc-light-rgb),0.55); font-style: italic; }
.mc-pricing-custom__desc ul { list-style: none; padding: 0; margin: 0 0 calc(10px * var(--mc-scale)); display: flex; flex-direction: column; gap: calc(7px * var(--mc-scale)); }
.mc-pricing-custom__desc li { display: flex; align-items: flex-start; gap: calc(8px * var(--mc-scale)); font-size: calc(var(--mc-fs) * 0.929); color: rgba(var(--mc-light-rgb),0.75); line-height: 1.45; }
.mc-pricing-custom__desc li::before { content: '\2713'; color: var(--mc-amber); font-weight: 700; font-size: calc(var(--mc-fs) * 0.786); flex-shrink: 0; margin-top: 3px; }
.mc-pricing-custom__btn {
    justify-content: center; width: 100%; margin-top: auto;
}

/* -- Pricing grid ----------------------------------------------- */

.mc-pricing__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: calc(16px * var(--mc-scale)); }

/* -- Package card ----------------------------------------------- */

.mc-pkg-card {
    background: rgba(var(--mc-deep-rgb),0.5); border: 1px solid rgba(var(--mc-fountain-rgb),0.2);
    border-radius: var(--mc-radius); padding: calc(28px * var(--mc-scale)) calc(28px * var(--mc-scale)) calc(28px * var(--mc-scale));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
        flex-direction: column;
        position: relative;
        overflow: visible;
    transition: transform 0.25s var(--mc-ease),box-shadow 0.25s var(--mc-ease);
}
.mc-pkg-card:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(var(--mc-deep-rgb),0.2); }
.mc-pkg-card--featured {
    background: rgba(var(--mc-dark-rgb),0.85); border-color: var(--mc-keppel);
    box-shadow: 0 0 0 1px rgba(var(--mc-keppel-rgb),0.3),0 0 40px rgba(var(--mc-keppel-rgb),0.15);
}

.mc-pkg-card__badge {
    position: absolute; top: calc(-13px * var(--mc-scale)); left: 50%; transform: translateX(-50%);
    background: var(--mc-amber); color: var(--mc-deep);
    font-family: var(--mc-font-head); font-size: var(--mc-fs-xs); font-weight: 800;
    letter-spacing: var(--mc-ls-label); text-transform: uppercase;
    padding: calc(5px * var(--mc-scale)) calc(16px * var(--mc-scale)); border-radius: var(--mc-radius-pill); white-space: nowrap;
    box-shadow: 0 2px 8px rgba(var(--mc-amber-rgb),0.3);
}

.mc-pkg-card__name { font-family: var(--mc-font-head); font-size: var(--mc-fs-xs); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--mc-fountain); margin-bottom: calc(12px * var(--mc-scale)); }

/* -- Card header (image + name/price) --------------------------- */
.mc-pkg-card__header { display: flex; align-items: center; gap: calc(16px * var(--mc-scale)); }
.mc-pkg-card__img { width: calc(72px * var(--mc-scale)); height: calc(72px * var(--mc-scale)); border-radius: calc(12px * var(--mc-scale)); object-fit: cover; flex-shrink: 0; border: 1px solid rgba(var(--mc-fountain-rgb), 0.15); }
.mc-pkg-card__header-text { min-width: 0; }
.mc-pkg-card__header .mc-pkg-card__name { margin-bottom: calc(4px * var(--mc-scale)); }

.mc-pkg-card__price { font-family: var(--mc-font-head); font-size: calc(var(--mc-fs) * 3.714); font-weight: 800; color: var(--mc-light); letter-spacing: -2px; line-height: 1; margin-bottom: calc(4px * var(--mc-scale)); }
.mc-pkg-card__price sup { font-size: calc(var(--mc-fs) * 1.714); vertical-align: super; letter-spacing: 0; font-weight: 600; }
.mc-pkg-card__divider { height: 1px; background: rgba(var(--mc-fountain-rgb),0.15); margin: calc(14px * var(--mc-scale)) 0; }
.mc-pkg-card__desc { font-size: var(--mc-fs-body); color: rgba(var(--mc-light-rgb),0.75); line-height: 1.65; flex: 1; margin-bottom: calc(20px * var(--mc-scale)); }
.mc-pkg-card__desc p { margin-bottom: calc(10px * var(--mc-scale)); }
.mc-pkg-card__desc p:last-child { margin-bottom: 0; }
.mc-pkg-card__desc ul { list-style: none; padding: 0; margin: 0 0 calc(10px * var(--mc-scale)); display: flex; flex-direction: column; gap: calc(6px * var(--mc-scale)); }
.mc-pkg-card__desc li { display: flex; align-items: flex-start; gap: calc(8px * var(--mc-scale)); }
.mc-pkg-card__desc li::before { content: '\2713'; color: var(--mc-keppel); font-weight: 700; font-size: var(--mc-fs-sm); flex-shrink: 0; margin-top: 3px; }
.mc-pkg-card__desc strong { color: var(--mc-light); }
.mc-pkg-card__desc em { color: rgba(var(--mc-light-rgb),0.45); font-style: italic; }

/* Package buttons — extend .mc-btn base */
.mc-pkg-btn,.mc-pkg-btn--ghost {
    display: flex; width: 100%; justify-content: center;
    margin-top: auto;
}
.mc-pkg-btn--ghost { border-width: 1.5px; }

/* -- Guarantee -------------------------------------------------- */

.mc-pricing__guarantee {
    display: flex; align-items: flex-start; gap: calc(12px * var(--mc-scale)); margin-top: calc(20px * var(--mc-scale));
    padding: calc(18px * var(--mc-scale)) calc(24px * var(--mc-scale)); background: rgba(var(--mc-deep-rgb),0.4);
    border: 1px solid rgba(var(--mc-fountain-rgb),0.15); border-radius: calc(10px * var(--mc-scale));
    color: rgba(var(--mc-light-rgb),0.7); font-size: var(--mc-fs); line-height: 1.6;
}
.mc-pricing__guarantee svg { flex-shrink: 0; color: var(--mc-keppel); margin-top: 2px; }
.mc-pricing__guarantee span { flex: 1; }

/* -- WhatsApp link ---------------------------------------------- */

.mc-pricing__whatsapp {
    display: flex; align-items: center; justify-content: center;
    gap: calc(12px * var(--mc-scale)); margin-top: calc(16px * var(--mc-scale)); font-size: calc(var(--mc-fs) * 0.929);
    color: rgba(var(--mc-light-rgb),0.6); flex-wrap: wrap;
}
.mc-pricing__whatsapp-link {
    display: inline-flex; align-items: center; gap: calc(6px * var(--mc-scale));
    font-family: var(--mc-font-head); font-size: calc(var(--mc-fs) * 0.929); font-weight: 600;
    color: var(--mc-fountain); text-decoration: none; transition: color 0.2s;
}
.mc-pricing__whatsapp-link:hover { color: var(--mc-spray); }
.mc-pricing__whatsapp-link svg { flex-shrink: 0; }

/* -- Standalone hero (page-pricing.php) ------------------------- */

/* Standalone-only overrides (scoped via hero sibling) */
.mc-page-hero--pricing ~ .mc-pricing::before { background: var(--mc-calypso); }
.mc-page-hero--pricing ~ .mc-pricing .mc-pricing__lead { display: none; }
.mc-page-hero--pricing ~ .mc-pricing .mc-pricing__top { grid-template-columns: 1fr; }
.mc-page-hero--pricing ~ .mc-pricing { padding-top: calc(var(--mc-section-y) - 8px); }

/* Responsive */

@media (max-width: 1024px) {
    .mc-pricing__top { grid-template-columns: 1fr 1fr; }
    .mc-pricing__grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
    .mc-pricing__top { grid-template-columns: 1fr; }
    .mc-pricing-custom { width: 100%; }
    .mc-pricing__grid { grid-template-columns: 1fr; }
    .mc-pkg-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (max-width: 480px) {
    .mc-pkg-card {
            padding: calc(22px * var(--mc-scale)) calc(18px * var(--mc-scale)) calc(24px * var(--mc-scale));
        }
    .mc-pkg-card__price { font-size: calc(var(--mc-fs) * 3.143); }
    .mc-pkg-card__img { width: calc(56px * var(--mc-scale)); height: calc(56px * var(--mc-scale)); border-radius: calc(10px * var(--mc-scale)); }
        .mc-pkg-card__header {
            gap: calc(10px * var(--mc-scale));
        }
    
        .mc-pkg-card__desc {
            font-size: calc(var(--mc-fs) * 0.893);
            margin-bottom: calc(20px * var(--mc-scale));
        }
    
        .mc-pkg-card__divider {
            margin: calc(12px * var(--mc-scale)) 0;
        }
    
        .mc-pricing-custom {
            padding: calc(20px * var(--mc-scale)) calc(18px * var(--mc-scale)) calc(20px * var(--mc-scale));
        }
    
        .mc-pricing-custom__desc {
            font-size: calc(var(--mc-fs) * 0.857);
            margin-bottom: calc(18px * var(--mc-scale));
        }
    
        .mc-pricing-custom__top-row {
            gap: calc(10px * var(--mc-scale));
            margin-bottom: calc(16px * var(--mc-scale));
        }
    
        .mc-pricing-custom__icon {
            width: calc(38px * var(--mc-scale));
            height: calc(38px * var(--mc-scale));
        }
    
        .mc-pricing__guarantee {
            padding: calc(14px * var(--mc-scale)) calc(16px * var(--mc-scale));
            font-size: calc(var(--mc-fs) * 0.929);
            gap: calc(10px * var(--mc-scale));
        }
    
    .mc-pricing__whatsapp {
        font-size: calc(var(--mc-fs) * 0.857);
        gap: calc(8px * var(--mc-scale));
    }
}

@media (max-width: 320px) {
    .mc-pkg-card {
        padding: calc(18px * var(--mc-scale)) calc(14px * var(--mc-scale)) calc(24px * var(--mc-scale));
    }

    .mc-pkg-card__price {
        font-size: calc(var(--mc-fs) * 2.714);
    }

    .mc-pricing-custom {
        padding: calc(16px * var(--mc-scale)) calc(14px * var(--mc-scale)) calc(18px * var(--mc-scale));
    }

    .mc-pricing__guarantee {
        padding: calc(12px * var(--mc-scale)) calc(12px * var(--mc-scale));
        font-size: var(--mc-fs-sm);
    }
}

/* -- Reduced Motion --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mc-pkg-card,
    .mc-pricing-custom { transition: none; }
    .mc-pkg-card:hover,
    .mc-pricing-custom:hover { transform: none; }
}