/* ------------------------------------------- */
/* --- CUSTOM COLOR VARIABLES (HEX VALUES) --- */
/* ------------------------------------------- */
:root {
    --color-pv: #6E61FF; /* Blue Violet */
    --color-to: #FF611E; /* Tangelo Orange */
    --color-lb: #60AEFE; /* Lagoon Blue */
    --color-so: #FFA352; /* Soft Orange */
    --color-ag: #DAC3FF; /* Azure Green */
    --color-dw: #F1F6F1; /* Daisy White */
    --color-sg: #99D9B3; /* Seafoam Green */
    --color-pb: #ADDEFE; /* Paled Blue */
    --color-my: #FFEDA8; /* Mellow Yellow */
    --color-br: #312A73; /* Blue Rose */
    --color-ds: #29314D; /* Dark Space */
}

/* ------------------------------------------- */
/* --- GLOBAL & UTILITY STYLES --- */
/* ------------------------------------------- */

html { scroll-behavior: smooth; }

body {
    font-family: 'Poppins', sans-serif;
    background: var(--color-dw);
    color: var(--color-br);
    margin: 0;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: 'Space Grotesk', sans-serif;
}

/* Card Style dengan Border Tebal */
.card-style {
    border: 3px solid #000;
    border-radius: 1.5rem;
    box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.8);
    transition: transform 0.2s, box-shadow 0.2s;
    will-change: transform;
}
.card-style:hover {
    transform: translate(-2px, -2px);
    box-shadow: 10px 10px 0 0 rgba(0, 0, 0, 0.8);
}

/* Button Pill Style */
.btn-pill {
    padding: 0.85rem 2.2rem;
    border-radius: 9999px;
    border: 3px solid #000;
    font-weight: 700;
    transition: background-color 0.2s, transform 0.2s;
    display: inline-block;
}

@media (max-width: 640px) {
    .btn-pill {
        padding: 0.7rem 1.6rem !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        width: 100%;
        text-align: center;
    }
}

/* Hiasan Bintang */
.shape-star {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: var(--color-my);
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
        50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
    );
    border: 2px solid black;
    transform: rotate(15deg);
}

/* Addon Selection States */
.addon-card {
    position: relative;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

/* Tick mark */
.addon-tick {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 1.2rem;
    opacity: 0;
    transition: opacity 0.2s;
}

/* Active state for addon selection */
.addon-card:has(.addon-checkbox:checked) {
    background-color: var(--color-pv) !important;
    color: #fff !important;
    border-color: var(--color-pv) !important;
    transform: translate(-2px, -2px);
}

.addon-card:has(.addon-checkbox:checked) .addon-tick {
    opacity: 1;
}

/* Override card shadow for addon selected card */
.addon-card:has(.addon-checkbox:checked) {
    box-shadow: 10px 10px 0 0 rgba(0, 0, 0, 0.8); /* Reapply shadow */
}