/* ============================================================
   Community Draws — Theme Card Setup
   File: /wp-content/themes/martfury-child/css/cd-theme-card-setup.css

   IMPORTANT:
   - This file is ONLY enqueued on Theme products (product_cat = themes)
   - We target REAL Martfury + WooCommerce + Barn2/WPO markup (no assumptions)
   - Purpose: clean “2-step” flow:
       Step 1) Pick a Card Size
       Step 2) Schedule Your Draw
   ============================================================ */


/* ------------------------------------------------------------
   1) STOCK / AVAILABILITY (Martfury + Woo variants)
------------------------------------------------------------ */
.woocommerce div.product p.stock,
.woocommerce div.product .stock,
.woocommerce div.product .product-stock,
.woocommerce div.product .woocommerce-variation-availability,
.woocommerce div.product .availability,
.woocommerce div.product .stock-wrapper,
.woocommerce div.product .mf-summary-header .stock,
.woocommerce div.product .product_meta .stock {
  display: none !important;
}


/* ------------------------------------------------------------
   2) QUANTITY (entire control + steppers)
------------------------------------------------------------ */
.woocommerce div.product form.cart .quantity,
.woocommerce div.product .quantity,
.woocommerce div.product input.qty,
.woocommerce div.product .qty {
  display: none !important;
}


/* ------------------------------------------------------------
   3) CART BUTTON CLEANUP
   Keep ONLY the real "Add to basket" button
------------------------------------------------------------ */
.woocommerce div.product form.cart button:not(.single_add_to_cart_button),
.woocommerce div.product form.cart a.button:not(.single_add_to_cart_button),
.woocommerce div.product form.cart a:not(.single_add_to_cart_button) {
  display: none !important;
}


/* ------------------------------------------------------------
   4) GRID SELECTOR — STEP HEADING + SUBHEADING
   Barn2 option title is: <p class="wpo-option-name">...</p>
------------------------------------------------------------ */

/* Step 1 heading */
.grid-selector > p.wpo-option-name {
  margin: 0 0 6px !important;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

/* Injected subheading under Step 1 heading */
.grid-selector .cd-grid-subheading {
  margin: 0 0 14px !important;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.85;
}


/* ------------------------------------------------------------
   5) GRID OPTIONS SPACING
------------------------------------------------------------ */
.grid-selector .wpo-image-buttons {
  margin-top: 8px !important;
}


/* ------------------------------------------------------------
   6) IMAGE BUTTON POLISH (optional but recommended)
------------------------------------------------------------ */
.grid-selector .wpo-image-buttons label {
  border-radius: 8px;
  transition: transform .12s ease;
}

.grid-selector .wpo-image-buttons label:hover {
  transform: translateY(-1px);
}

/* Note:
   Barn2 image-button markup can vary; these selectors are "best effort"
   and are safe if nodes are not present. */
.grid-selector .wpo-image-buttons input:checked + img,
.grid-selector .wpo-image-buttons input:checked + span,
.grid-selector .wpo-image-buttons input:checked + div {
  outline: 2px solid #6cc46f;
  outline-offset: 2px;
}


/* ============================================================
   7) STEP FLOW POLISH
   Make the two stages obvious but still "one scroll"
============================================================ */

/* Step headings (general) */
.grid-selector > p.wpo-option-name,
.cd-frequency.wpo-field > p.wpo-option-name,
.cd-frequency .wpo-option-name {
  font-weight: 700;
  margin: 0 0 6px !important;
}

/* Visual separation before Step 2 ("Schedule Your Draw") */
.cd-frequency.wpo-field,
.cd-frequency.wpo-field-radio {
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(17, 24, 39, 0.10) !important; /* subtle but intentional */
}

/* Keep radio group tight + clean */
.cd-frequency .wpo-option-label,
.cd-frequency label,
.cd-frequency .wpo-label-text {
  font-size: 14px;
}


/* Optional: schedule preview feels like an "explanation block" */
.cd-schedule-preview {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px dashed rgba(17, 24, 39, 0.12);
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.95;
}


/* ============================================================
   8) SPACING + DIVIDERS POLISH (HR / mystery lines)
============================================================ */

/* If any literal <hr> exists in cart/Barn2 area */
.woocommerce div.product form.cart hr,
.woocommerce div.product .wpo-field hr,
.woocommerce div.product .wpo-options-container hr {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Barn2/WPO sometimes adds subtle borders between fields */
.woocommerce div.product .wpo-field,
.woocommerce div.product .wpo-field-with-label {
  border-top: 0 !important;
}

/* Specifically: the field immediately following the revenue summary */
.woocommerce div.product .cd-grid-revenue-summary + .wpo-field,
.woocommerce div.product .cd-grid-revenue-summary + .wpo-field-with-label {
  border-top: 0 !important;
  margin-top: 18px !important; /* controlled spacing instead */
  padding-top: 0 !important;
}

/* Preview should not inherit any default rules */
.woocommerce div.product .cd-schedule-preview {
  box-shadow: none !important;
  background-image: none !important;
}


/* ============================================================
   9) KILL MARTFURY PRODUCT SUMMARY SEPARATOR (faint HR)
   Source element:
     <div class="summary-sep clear"></div>
============================================================ */
.woocommerce div.product .summary-sep,
.woocommerce div.product .summary-sep.clear {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Belt + braces: if the line is actually a border/shadow nearby */
.woocommerce div.product .mf-summary-header,
.woocommerce div.product .mf-summary-meta,
.woocommerce div.product .mf-product-summary {
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}


/* ============================================================
   10) MOBILE: Reduce top gap so Step 1 fits in viewport
   Goal: halve the unnecessary whitespace above the card on mobile
============================================================ */
@media (max-width: 768px) {

  /* Reduce space ABOVE the product block/card */
  body.cd-theme-product.single-product .mf-product-detail {
    margin-top: 12px !important;
    padding-top: 0 !important;
  }

  /* Common Woo wrappers that can add top spacing */
  body.cd-theme-product.single-product .site-content,
  body.cd-theme-product.single-product #content,
  body.cd-theme-product.single-product .content-area {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Reduce top spacing on the summary area itself */
  .woocommerce div.product div.summary,
  .woocommerce div.product .entry-summary,
  .woocommerce div.product .mf-entry-summary {
    margin-top: 12px !important;
    padding-top: 0 !important;
  }

  /* Keep notices from creating unnecessary height */
  body.cd-theme-product.single-product .woocommerce-notices-wrapper {
    margin-bottom: 8px !important;
  }

  /* Ensure the cart form doesn't add extra top margin */
  .woocommerce div.product form.cart {
    margin-top: 0 !important;
  }

  /* If you're using a custom card wrapper, keep it flush */
  body.cd-theme-product.single-product .cd-theme-card {
    margin-top: 0 !important;
  }

}
/* ============================================================
   Community Draws — Theme Card Setup
   Micro spacing tune-back (less cramped, more premium)
   Add to bottom of cd-theme-card-setup.css
   ============================================================ */

/* --------------------------------------------
   1) Step 1: tighten heading → subheader gap
-------------------------------------------- */
.grid-selector > p.wpo-option-name{
  margin: 0 0 2px !important; /* was 6px */
}

.grid-selector .cd-grid-subheading{
  margin: 0 0 20px !important; /* more air before cards */
  line-height: 1.35;
}

/* --------------------------------------------
   2) Step 1: increase subheader → grid cards gap
      (Barn2 container can vary, so we give the image buttons room)
-------------------------------------------- */
.grid-selector .wpo-image-buttons{
  margin-top: 14px !important; /* was 8px */
}

/* --------------------------------------------
   3) Step 2 divider: reintroduce HR-style separation
      We remove the previous border-top on the schedule field,
      then add our own intentional divider with spacing.
-------------------------------------------- */

/* Kill the earlier border-top separator so we can control it */
.cd-frequency.wpo-field,
.cd-frequency.wpo-field-radio{
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 22px !important; /* space after the summary box */
}

/* Add a clean divider ABOVE Step 2 heading */
.cd-frequency.wpo-field > p.wpo-option-name,
.cd-frequency.wpo-field-radio > p.wpo-option-name,
.cd-frequency .wpo-option-name{
  position: relative;
  padding-top: 18px !important; /* gap below divider */
  margin-top: 16px !important;  /* gap above divider */
}

/* The “HR” itself */
.cd-frequency.wpo-field > p.wpo-option-name::before,
.cd-frequency.wpo-field-radio > p.wpo-option-name::before,
.cd-frequency .wpo-option-name::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(17, 24, 39, 0.10);
}

/* --------------------------------------------
   4) Mobile: don’t over-tighten the top
   (a touch more breathing room than the “cramped” version)
-------------------------------------------- */
@media (max-width: 768px){

  /* Slightly more space above the card area */
  body.cd-theme-product.single-product .mf-product-detail{
    margin-top: 16px !important; /* was 12px */
  }

  .woocommerce div.product div.summary,
  .woocommerce div.product .entry-summary,
  .woocommerce div.product .mf-entry-summary{
    margin-top: 16px !important; /* was 12px */
  }
}
/* ------------------------------------------------------------
   Emphasise "Estimated funds raised" (primary outcome)
------------------------------------------------------------ */

/* Default summary text stays calm */
.cd-grid-revenue-summary p {
  font-size: 14px;
  line-height: 1.5;
}

/* Target ONLY the final line (funds raised) */
.cd-grid-revenue-summary p:last-child {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(17, 24, 39, 0.12);

  font-size: 16px;                 /* slightly larger */
  font-weight: 600;
  color: #15803d;                  /* calm success green */
}

/* Make the £ amount stand out just a bit more */
.cd-grid-revenue-summary p:last-child strong {
  font-size: 18px;
  font-weight: 700;
}
/* ------------------------------------------------------------
   Step 2 reassurance copy
------------------------------------------------------------ */

.cd-step2-helper {
  margin: 4px 0 14px !important;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(17, 24, 39, 0.65);
}