/*
 * Theme Name:   Hello Child
 * Theme URI:    https://kre8ivtech.com
 * Description:  Hello Elementor child theme with wp-admin login and dashboard branding.
 * Author:       Kre8ivTech LLC
 * Author URI:   https://kre8ivtech.com
 * Template:     hello-elementor
 * Version:      1.0.0
 * Requires at least: 6.9
 * Requires PHP: 8.3
 * Text Domain:  hello-child
 * License:      GPL-2.0-or-later
 */

body {
	margin: 0 !important;
}

/* ============================================
   GF PRICE CARDS — Matches MFO Donate Layout
   
   Add CSS class "gf-price-cards" to your 
   Gravity Forms Radio or Product field.
   
   Paste into: Appearance → Customize → Additional CSS
   ============================================ */

/* Grid layout - 3 columns */
.gf-price-cards .gfield_radio {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}

/* Each choice container */
.gf-price-cards .gfield_radio .gchoice {
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide the radio button */
.gf-price-cards .gfield_radio .gchoice input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* The label IS the card */
.gf-price-cards .gfield_radio .gchoice label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 22px 16px !important;
  cursor: pointer !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  text-align: center !important;
  min-height: 85px !important;
  margin: 0 !important;
  width: 250px !important;
  font-size: 0 !important; /* hide default text, we restyle children */
}

/* Hover */
.gf-price-cards .gfield_radio .gchoice label:hover {
  border-color: #1a3a5c !important;
}

/* Selected card */
.gf-price-cards .gfield_radio .gchoice input[type="radio"]:checked + label {
  border-color: #1a3a5c !important;
  box-shadow: 0 0 0 1px #1a3a5c !important;
}

/* Focus for accessibility */
.gf-price-cards .gfield_radio .gchoice input[type="radio"]:focus + label {
  border-color: #1a3a5c !important;
  box-shadow: 0 0 0 2px rgba(26, 58, 92, 0.2) !important;
}

/* Responsive - 2 col on tablet, 1 on mobile */
@media (max-width: 768px) {
  .gf-price-cards .gfield_radio,
  .gf-price-cards .ginput_container_radio {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .gf-price-cards .gfield_radio,
  .gf-price-cards .ginput_container_radio {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================
   OPTION A: Regular Radio Button Field
   (NOT a Product field)
   
   Set up choices like:
   Label: "$100"  Value: "100"
   Label: "$250"  Value: "250"
   etc.
   
   Then add the description as a SECOND line
   using a <br> or handle with CSS below.
   
   OR use this format for the label:
   "$100|Repair a broken well"
   and split with CSS.
   
   SIMPLEST: Just put "$100" as the label,
   and we style it. Add descriptions via HTML.
   ============================================ */

/* Style the choice label text as the price */
.gf-price-cards .gfield_radio .gchoice label {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0B1D3A !important;
  font-family: 'Montserrat', sans-serif !important;
  line-height: 1.4 !important;
}


/* ============================================
   OPTION B: Product Radio Field
   
   Gravity Forms Product fields output markup
   like: <label>Choice Name <span>$100.00</span></label>
   
   The CSS below hides the choice name and 
   only shows the price, styled large and bold.
   ============================================ */

/* If using a PRODUCT field - style the price span */
.gf-price-cards .gfield_radio .gchoice label span.ginput_price {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0B1D3A !important;
  font-family: 'Montserrat', sans-serif !important;
  line-height: 1 !important;
  display: block !important;
}

/* ============================================
   DESCRIPTION TEXT BELOW PRICE
   
   In your GF choice labels, enter:
   $100<br><span class="price-desc">Repair a broken well</span>
   
   NOTE: You may need to enable HTML in labels. 
   Go to Forms → Settings and check 
   "Output HTML" or use the filter below.
   
   If GF strips HTML from labels, use 
   Approach B (the PHP snippet) instead.
   ============================================ */

/* Description text styling */
.gf-price-cards .gfield_radio .gchoice label small,
.gf-price-cards .gfield_radio .gchoice label .price-desc {
  display: block !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #7A8A9E !important;
  font-family: 'Open Sans', sans-serif !important;
  margin-top: 4px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}


/* ============================================
   APPROACH B — PHP SNIPPET
   
   If Gravity Forms strips HTML from labels,
   add this PHP to your theme's functions.php
   or a code snippets plugin.
   
   This allows HTML in radio choice labels.
   ============================================ */

/*  --- PASTE THIS PHP INTO functions.php ---

add_filter( 'gform_field_choice_markup_pre_render', 'allow_html_in_radio_labels', 10, 4 );
function allow_html_in_radio_labels( $choice_markup, $choice, $field, $value ) {
    // Only apply to fields with the gf-price-cards class
    if ( strpos( $field->cssClass, 'gf-price-cards' ) !== false ) {
        // Decode HTML entities so <br> and <small> render properly
        $choice_markup = html_entity_decode( $choice_markup );
    }
    return $choice_markup;
}

   --- END PHP ---
*/

/* ============================================
   GF PILL TOGGLE — HORIZONTAL FIX
   Add CSS class "gf-pill-toggle" to field
   ============================================ */

/* Container - horizontal pill */
.gf-pill-toggle .gfield_radio,
.gf-pill-toggle .ginput_container_radio {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  background: #F1F5F9 !important;
  border-radius: 8px !important;
  padding: 4px !important;
  gap: 0 !important;
  border: 1px solid #E2E8F0 !important;
}

/* Hide radio buttons */
.gf-pill-toggle .gfield_radio .gchoice input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Each choice takes half width */
.gf-pill-toggle .gfield_radio .gchoice {
  flex: 1 1 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Label is the button */
.gf-pill-toggle .gfield_radio .gchoice label {
  display: block !important;
  text-align: center !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  font-family: 'Montserrat', 'Open Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #7A8A9E !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  white-space: nowrap !important;
}

/* Hover */
.gf-pill-toggle .gfield_radio .gchoice label:hover {
  color: #0B1D3A !important;
}

/* Selected — filled blue */
.gf-pill-toggle .gfield_radio .gchoice input[type="radio"]:checked + label {
  background: #1889C4 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(24, 137, 196, 0.25) !important;
}