/*
 Theme Name:   WP Coupon Pro Child
 Theme URI:    
 Description:  Child theme for WP Coupon Pro — Mobile coupon fix + GiveAsYouLive-style homepage
 Author:       Your Name
 Author URI:   
 Template:     wp-coupon-pro
 Version:      1.0.0
 Text Domain:  wp-coupon-pro-child
*/

/* ============================================================
   0. GET CODE — FULL MASK FIX
   Problem: .get-code overlay only covers ~55% of the button,
   the actual code (e.g. JAAZIHD) is visible on the right side.
   Fix: Force .get-code to cover 100% width so code is hidden
   until user clicks.
   ============================================================ */

/* Force the purple GET CODE label to cover the FULL button */
.coupon-button-type .coupon-code .get-code,
.coupon-button.coupon-code .get-code {
    min-width: 100% !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    z-index: 5 !important;
}

/* Hide the diagonal arrow (not needed when full-width) */
.coupon-button-type .coupon-code .get-code:after,
.coupon-button.coupon-code .get-code:after {
    display: none !important;
}

/* Blur the code text as extra layer of protection */
.coupon-button-type .coupon-code .code-text,
.coupon-button.coupon-code .code-text {
    filter: blur(5px) !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: filter 0.3s ease;
}

/* On mobile — same fix */
@media screen and (max-width: 790px) {
    .coupon-button.coupon-code .get-code {
        min-width: 100% !important;
        width: 100% !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        background: rgba(99, 60, 180, 0.92) !important;
    }
    /* Make coupon-code button position:relative so overlay works */
    .coupon-button.coupon-code {
        position: relative !important;
        overflow: hidden !important;
    }
}

/* ============================================================
   1. MOBILE COUPON BUTTON FIX
   Issue: coupon-detail (Get Code / Get Deal button) is hidden
   on mobile screens in the parent theme. This restores it with
   a clean Vouchercloud-style layout.
   ============================================================ */

/* Override parent theme: coupon-detail was display:none on mobile (<=790px) */
@media screen and (max-width: 790px) {
  .store-listing-item .coupon-detail {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 0 !important;
    text-align: center !important;
  }
}

/* Override: coupon button was display:none on very small screens (<=500px) */
@media screen and (max-width: 500px) {
  .store-listings:not(.couponstore-tpl-full) .store-listing-item .coupon-detail .coupon-button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  /* coupon-detail wrapper also needs to be full-width */
  .store-listings:not(.couponstore-tpl-full) .store-listing-item .coupon-detail {
    display: block !important;
    float: none !important;
    width: 100% !important;
    overflow: visible !important;
    margin-top: 10px !important;
  }
}

/* ---- Mobile Coupon Card Layout (Vouchercloud-style) ---- */
@media screen and (max-width: 790px) {
  /* Make each coupon item a vertical stack on mobile */
  .coupon-item.store-listing-item {
    display: flex !important;
    flex-direction: column !important;
    padding: 14px 14px 12px !important;
  }

  /* Thumbnail goes top-left inline if present */
  .coupon-item.store-listing-item .store-thumb-link {
    float: left;
    width: 60px;
    margin-right: 12px;
    margin-bottom: 8px;
  }

  /* Coupon title + meta takes remaining width */
  .coupon-item.store-listing-item .latest-coupon {
    width: 100% !important;
    float: none !important;
    display: block !important;
  }

  /* Full-width bright button at the bottom of card - like vouchercloud mobile */
  .coupon-item .coupon-detail.coupon-button-type {
    width: 100% !important;
    float: none !important;
    display: block !important;
    margin-top: 12px !important;
  }

  /* Get Code button */
  .coupon-item .coupon-button.coupon-code,
  .coupon-item .coupon-button.coupon-deal {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    min-height: 46px !important;
  }

  /* Code text on left, "Get Code" on right - vouchercloud style */
  .coupon-item .coupon-button.coupon-code .code-text {
    flex: 1;
    text-align: left;
    font-size: 13px;
    letter-spacing: 1px;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .coupon-item .coupon-button.coupon-code .get-code {
    background: rgba(0,0,0,0.18);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    margin-left: 10px;
    flex-shrink: 0;
  }

  /* Rating buttons - keep them visible but compact */
  .coupon-item .coupon-detail .user-ratting {
    margin-top: 8px;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 4px;
  }

  .coupon-item .coupon-detail .voted-value {
    display: block;
    margin-top: 4px;
    font-size: 10px;
  }

  /* Expiry label */
  .coupon-item .c-type {
    margin-bottom: 6px;
  }
  .coupon-item .c-type .exp {
    font-size: 12px;
  }
}


/* ============================================================
   2. HOMEPAGE — GiveAsYouLive Style
   Applied when body has class .home or the front page template.
   ============================================================ */

/* Hero Section */
.gayl-hero {
  background: linear-gradient(135deg, #1a7a4a 0%, #0d5c38 100%);
  color: #fff;
  padding: 70px 20px 60px;
  text-align: center;
}
.gayl-hero h1 {
  font-size: 2.4em;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 16px;
  color: #fff;
}
.gayl-hero h1 span {
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.5);
}
.gayl-hero p {
  font-size: 1.1em;
  color: rgba(255,255,255,0.85);
  margin-bottom: 30px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.gayl-hero .gayl-cta-btn {
  display: inline-block;
  background: #f5a623;
  color: #fff;
  font-size: 1.1em;
  font-weight: 700;
  padding: 14px 36px;
  border-radius: 32px;
  text-decoration: none;
  transition: background 0.2s;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}
.gayl-hero .gayl-cta-btn:hover {
  background: #e09214;
  color: #fff;
}

/* Stats Bar */
.gayl-stats-bar {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 20px 0;
  text-align: center;
}
.gayl-stats-bar .gayl-stats-inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}
.gayl-stats-bar .stat-item {
  text-align: center;
}
.gayl-stats-bar .stat-number {
  font-size: 1.6em;
  font-weight: 800;
  color: #1a7a4a;
  display: block;
}
.gayl-stats-bar .stat-label {
  font-size: 0.82em;
  color: #666;
  display: block;
}

/* Section titles */
.gayl-section {
  padding: 50px 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.gayl-section-title {
  font-size: 1.6em;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 8px;
  text-align: center;
}
.gayl-section-subtitle {
  text-align: center;
  color: #666;
  font-size: 0.97em;
  margin-bottom: 30px;
}

/* Store Logo Grid (like GiveAsYouLive partner logos) */
.gayl-store-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.gayl-store-logos .logo-item {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  min-height: 52px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s;
}
.gayl-store-logos .logo-item:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.gayl-store-logos .logo-item img {
  max-height: 36px;
  max-width: 100px;
  object-fit: contain;
}

/* How it works steps */
.gayl-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin: 30px 0;
}
.gayl-step {
  flex: 1 1 200px;
  max-width: 240px;
  text-align: center;
  padding: 20px 16px;
}
.gayl-step-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 1.5em;
}
.gayl-step:nth-child(1) .gayl-step-icon { background: #e8f5ee; color: #1a7a4a; }
.gayl-step:nth-child(2) .gayl-step-icon { background: #eef4ff; color: #3b6fd4; }
.gayl-step:nth-child(3) .gayl-step-icon { background: #fff7e6; color: #e07b00; }
.gayl-step:nth-child(4) .gayl-step-icon { background: #fef0f0; color: #d43b3b; }
.gayl-step h4 {
  font-weight: 700;
  font-size: 1em;
  margin-bottom: 6px;
  color: #1a1a1a;
}
.gayl-step p {
  font-size: 0.9em;
  color: #666;
  line-height: 1.5;
}

/* Total raised counter */
.gayl-raised-banner {
  background: #f9f5ff;
  border-top: 3px solid #1a7a4a;
  text-align: center;
  padding: 40px 20px;
}
.gayl-raised-banner .raised-amount {
  font-size: 3em;
  font-weight: 900;
  color: #1a7a4a;
  display: block;
  line-height: 1;
}
.gayl-raised-banner .raised-label {
  font-size: 1.05em;
  color: #444;
  margin-top: 6px;
  display: block;
}

/* Charity search box */
.gayl-charity-search {
  background: #f4f4f4;
  padding: 50px 20px;
  text-align: center;
}
.gayl-charity-search input[type="text"] {
  width: 100%;
  max-width: 460px;
  padding: 14px 18px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 1em;
  outline: none;
  transition: border-color 0.2s;
}
.gayl-charity-search input[type="text"]:focus {
  border-color: #1a7a4a;
}
.gayl-charity-search .gayl-search-btn {
  display: inline-block;
  background: #1a7a4a;
  color: #fff;
  padding: 14px 28px;
  border: none;
  border-radius: 6px;
  font-size: 1em;
  font-weight: 600;
  margin-left: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.gayl-charity-search .gayl-search-btn:hover {
  background: #0d5c38;
}

/* Category pills */
.gayl-cat-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.gayl-cat-pills a {
  display: inline-block;
  background: #fff;
  border: 1px solid #ddd;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.88em;
  color: #444;
  text-decoration: none;
  transition: all 0.2s;
}
.gayl-cat-pills a:hover {
  background: #1a7a4a;
  color: #fff;
  border-color: #1a7a4a;
}

/* Responsive tweaks for homepage sections */
@media (max-width: 600px) {
  .gayl-hero h1 { font-size: 1.7em; }
  .gayl-steps { flex-direction: column; align-items: center; }
  .gayl-stats-bar .gayl-stats-inner { gap: 20px; }
  .gayl-raised-banner .raised-amount { font-size: 2.2em; }
}