/* --- Gravity Forms Custom Product Selector (2-Plan Design) --- */

/* --- Hide Original Radio Buttons --- */
.gform_wrapper .gf_product_choice_radio { display: none !important; }

/* --- Region Selector --- */
.region-selector {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    padding: 6px;
    background-color: #EFEFEF;
    border-radius: 50px;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
}
.region-selector label { flex: 1; text-align: center; position: relative; cursor: pointer; }
.region-selector input[type="radio"] { position: absolute; opacity: 0; }
.region-selector span {
    display: block; padding: 8px 15px; border-radius: 50px;
    background-color: transparent; color: #333;
    font-weight: 500; transition: all 0.3s ease;
    font-family: "Montserrat", sans-serif; font-size: 14px;
}
.region-selector input[type="radio"]:checked + span {
    background-color: #F37021; color: #FFFFFF;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* --- Main Product Container --- */
.custom-gf-product-selector {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    align-items: stretch; /* Make boxes equal height */
    gap: 30px; /* Space between boxes */
    max-width: 900px; /* Max width of the component */
    margin: 0 auto;
}
@media (max-width: 768px) {
    .custom-gf-product-selector { grid-template-columns: 1fr; }
}

/* --- General Product Choice Box Styling --- */
.product-choice {
    border-radius: 9px; cursor: pointer;
    transition: all 0.3s ease-in-out; overflow: hidden;
    border: 2px solid transparent; 
    height: 100%; display: flex; flex-direction: column;
    background-color: #F9F9F9;
}
.product-box-content { display: flex; flex-direction: column; flex-grow: 1; }

/* --- Selection State --- */
.product-choice.deselected { opacity: 0.7; transform: scale(0.98); }
.product-choice.selected {
    border-color: #F37021;
    box-shadow: 0 0 20px rgba(243, 112, 33, 0.5);
}
.product-choice:not(.selected):not(.deselected):hover { transform: translateY(-5px); }

/* --- Fonts and General Text --- */
.product-choice h2, .product-choice span, .product-choice p, 
.product-choice li, .product-choice a, .product-choice label {
    font-family: "Montserrat", sans-serif;
    line-height: 1.4;
}
.product-choice .tooltip {
    display: inline-block; width: 16px; height: 16px;
    border-radius: 50%; border: 1px solid #FFF;
    font-size: 11px; text-align: center; line-height: 16px;
    margin-left: 8px; font-weight: bold;
}

/* --- Button Styling --- */
.selection-button-container { padding: 15px 0; }
.selection-button {
    display: block; width: 85%; margin: 0 auto; padding: 12px 20px;
    font-weight: 700; text-align: center; border-radius: 50px;
    transition: all 0.3s ease; font-size: 15px;
    background-color: #1A1A1A; color: #FFFFFF;
}
.product-choice.selected .selection-button::after { content: " ✔"; }

/* --- Shared Plan Styling (Header, Price, Details) --- */
.product-header { background-color: #1A1A1A; color: #fff; padding: 25px 20px; }
.product-name { font-size: 24px; font-weight: bold; color: #fff; }
.product-line2 { font-size: 13px; color: #fff; opacity: 0.8; }
.product-price { padding: 25px 20px; text-align: center; background-color: #F9F9F9; }
.product-price-value { font-size: 48px; color: #1A1A1A; font-weight: 500; }
.product-price-line2 { font-size: 14px; color: #1A1A1A; }
.est-price-container { margin-top: 20px; border-top: 1px solid #E0E0E0; padding-top: 15px; }
.est-price-label, .est-price-value { display: block; font-size: 14px; color: #1A1A1A; font-weight: 500; }
.est-price-value { font-weight: bold; }
.product-details { padding: 25px 20px; flex-grow: 1; display: flex; flex-direction: column; }
.product-details ul { margin: 0; padding: 0; list-style: none; flex-grow: 1; }
.product-details li {
    font-size: 14px; padding-left: 30px; margin-bottom: 12px; color: #333;
    background: url('https://energidrift.dk/wp-content/uploads/2025/07/flueben.svg') no-repeat left center;
    background-size: 20px;
}
.product-link a { color: #1A1A1A; text-decoration: none; font-size: 14px; text-align: center; display: block; }