/**
 * Custom styles for reward points display - Simple Two Column Layout
 */

/* Main container - Target both cart and checkout reward points containers */
.woocommerce-reward-points-text-cart,
.woocommerce-reward-points-text-checkout {
    background-color: #3171EE !important;
    background-image: url('https://corbycraft.com/wp-content/uploads/2025/07/rewards-banner.png') !important;
    background-size: cover !important;
    background-position: center !important;
    color: #FFFFFF !important;
    padding: 25px !important;
    border-radius: 8px !important;
    margin-bottom: 30px !important;
    font-family: inherit !important;
}

/* Create simple two-column flex layout - target the correct container */
.woocommerce-reward-points-earning-text-container {
    display: block !important; /* Reset to block first */
    width: 100% !important;  /* Override plugin's 60% width */
    float: none !important;  /* Override plugin's float: left */
}

/* Force two-column layout regardless of structure */
.woocommerce-reward-points-earning-text-container::after {
    content: "";
    display: table;
    clear: both;
}

/* Simple approach - earning container always floats left, redemption always floats right */
.woocommerce-reward-points-earning-text-container {
    float: left !important;
    width: 48% !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

.woocommerce-reward-points-redemption-form-container {
    float: right !important;
    width: 48% !important;
    text-align: center !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Additional earning points list - smaller text */
.woocommerce-reward-points-additional {
    font-size: 16px !important;
    color: #FFFFFF !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-reward-points-additional li {
    margin-bottom: 8px !important;
    color: #FFFFFF !important;
}

/* Right column - Redemption section - always float right */
.woocommerce-reward-points-redemption-form-container {
    float: right !important;
    width: 48% !important;
    text-align: center !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Redemption heading - larger, bold */
.woocommerce-reward-points-redemption-text {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    margin-bottom: 15px !important;
    display: block !important;
}

/* Redemption form inputs */
.woocommerce-reward-points-redemption-form-inputs {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
    flex-wrap: wrap !important;
}

.woocommerce-reward-points-redemption-form-points {
    padding: 10px 15px !important;
    border-radius: 4px !important;
    border: 1px solid #FFFFFF !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    width: 150px !important;
}

.woocommerce-reward-points-redemption-form-button {
    padding: 10px 20px !important;
    border-radius: 4px !important;
    background-color: #FFFFFF !important;
    color: #3171EE !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

/* Small text under redemption form */
.woocommerce-reward-points-redemption-text-below,
.woocommerce-reward-points-redemption-text-remove-points {
    font-size: 14px !important;
    color: #FFFFFF !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Success container */
.woocommerce-reward-points-redemption-success-container {
    text-align: center !important;
}

/* Make sure all text is white */
.woocommerce-reward-points-text-container *,
.woocommerce-reward-points-text-cart *,
.woocommerce-reward-points-text-checkout * {
    color: #FFFFFF !important;
}

/* Except the redeem button */
.woocommerce-reward-points-redemption-form-button {
    color: #3171EE !important;
}

/* Thank you page container styling */
.woocommerce-reward-points-text-thank-you {
    background-color: #3171EE !important;
    background-image: url('https://corbycraft.com/wp-content/uploads/2025/07/rewards-banner.png') !important;
    background-size: cover !important;
    background-position: center !important;
    color: #FFFFFF !important;
    padding: 20px !important; /* slightly smaller than cart */
    border-radius: 8px !important;
    margin-bottom: 30px !important;
    font-family: inherit !important;
}

/* Ensure thank-you CTA button text is visible and padding reduced */
.woocommerce-reward-points-thank-you-button {
    background-color: #FFFFFF !important;
    color: #3171EE !important;
    border: none !important;
    padding: 0.55em 1.0em !important; /* reduced padding */
    white-space: nowrap !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    display: inline-block !important;
}

/* Prevent global white color from affecting the thank-you CTA */
.woocommerce-reward-points-text-thank-you .woocommerce-reward-points-thank-you-button * {
    color: #3171EE !important;
}

/* Responsive - stack on mobile */
@media (max-width: 768px) {
    .woocommerce-reward-points-main-earning-text,
    .woocommerce-reward-points-redemption-form-container,
    .woocommerce-reward-points-earning-text-container {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 20px !important;
    }
    
    .woocommerce-reward-points-redemption-form-container {
        text-align: center !important;
    }
}

/* My Account > My Points: hide progress/levels UI inside our wrapper (keep rewards list visible) */
.corby-mypoints .woocommerce-my-points-bar,
.corby-mypoints .woocommerce-my-points-current-level-container,
.corby-mypoints .woocommerce-my-points-bar-text-below,
.corby-mypoints .woocommerce-my-points-bar-text-redemption {
    display: none !important;
}

/* Ensure no gap from hidden progress elements */
.corby-mypoints .woocommerce-my-points-bar,
.corby-mypoints .woocommerce-my-points-bar-text-below,
.corby-mypoints .woocommerce-my-points-current-level-container,
.corby-mypoints .woocommerce-my-points-clear {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* My Account > My Points: tighten spacing under top summary */
.corby-mypoints .corby-mypoints__content {
  margin-top: 8px !important;
}

/* Remove large top margin added by plugin container variants */
.corby-mypoints .woocommerce-my-points-container-line,
.corby-mypoints .woocommerce-my-points-container-circle {
  margin-top: 8px !important;
}

/* My Rewards & Achievements container: match light blue card */
.corby-mypoints .woocommerce-my-points-rewards {
  background: #f7f9ff;
  border: 1px solid #e1e7ff;
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
}
.corby-mypoints .woocommerce-my-points-rewards-title {
  margin: 0 0 12px 0;
  font-size: 18px;
}

/* Modern rewards list as responsive grid */
.corby-mypoints .woocommerce-my-points-rewards ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.corby-mypoints .woocommerce-my-points-rewards ul li {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  position: relative;
  padding-top: 16px;
}

/* Hide legacy icons, we provide our own indicator */
/* .corby-mypoints .woocommerce-my-points-rewards ul li i { display: none !important; } */
/* Hide only the checklist icons before the text; keep brand/share icons visible */
.corby-mypoints .woocommerce-my-points-rewards ul li > i,
.corby-mypoints .woocommerce-my-points-rewards ul li .rp-title > i { display: none !important; }
/* Indicator circle */
.corby-mypoints .woocommerce-my-points-rewards ul li::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #d1d5db; /* neutral */
  display: inline-block;
  flex: 0 0 10px;
}

/* Rewards state styles */
.corby-mypoints .woocommerce-my-points-rewards ul li {
  position: relative;
  padding-top: 16px;
}
.corby-mypoints .woocommerce-my-points-rewards ul li::before { background: #d1d5db; }
.corby-mypoints .woocommerce-my-points-rewards ul li.state-completed {
  background: #ecfdf5; /* green tint */
  border-color: #a7f3d0;
}
.corby-mypoints .woocommerce-my-points-rewards ul li.state-completed::before { background: #22c55e; }
.corby-mypoints .woocommerce-my-points-rewards ul li.state-repeatable-seen {
  background: #eff6ff; /* blue tint */
  border-color: #bfdbfe;
}
.corby-mypoints .woocommerce-my-points-rewards ul li.state-repeatable-seen::before { background: #3b82f6; }
.corby-mypoints .woocommerce-my-points-rewards ul li.state-repeatable-notyet {
  background: #f9fafb;
  border-color: #d1d5db;
}
.corby-mypoints .woocommerce-my-points-rewards ul li.state-available {
  background: #f9fafb;
  border-color: #e5e7eb;
}
.corby-mypoints .woocommerce-my-points-rewards ul li .reward-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 11px;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 9999px;
  background: #e5e7eb;
  color: #374151;
}
.corby-mypoints .woocommerce-my-points-rewards ul li.state-completed .reward-badge { background: #d1fae5; color: #065f46; }
.corby-mypoints .woocommerce-my-points-rewards ul li.state-repeatable-seen .reward-badge { background: #dbeafe; color: #1e3a8a; }
.corby-mypoints .woocommerce-my-points-rewards ul li.state-repeatable-notyet .reward-badge { background: #f3f4f6; color: #374151; }
.corby-mypoints .woocommerce-my-points-rewards ul li.state-available .reward-badge { background: #f3f4f6; color: #374151; }

/* Recommend to friend input modern styles */
.corby-mypoints .woocommerce-reward-points-recommended-text {
  background: #f9fafb !important;
  border: 1px solid #d1d5db !important;
  color: #111827 !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  width: 100% !important;
  max-width: 520px !important;
}
.corby-mypoints .corby-mypoints__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #111827;
  cursor: pointer;
  font-size: 13px;
}
.corby-mypoints .corby-mypoints__copy-btn.copied {
  border-color: #22c55e;
  color: #065f46;
}

/* Share buttons: simplify and modernize */
.corby-mypoints .woocommerce-reward-points-share-buttons a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px 10px;
  color: #111827 !important;
  text-decoration: none !important;
  font-size: 13px;
}
/* Hide outdated services */
.corby-mypoints .woocommerce-reward-points-share-tumblr,
.corby-mypoints .woocommerce-reward-points-share-linkedin { display: none !important; }

/* Brand accents */
.corby-mypoints .woocommerce-reward-points-share-facebook { border-color: #c7d2fe; }
.corby-mypoints .woocommerce-reward-points-share-twitter { border-color: #d1d5db; }
.corby-mypoints .woocommerce-reward-points-share-pinterest { border-color: #fecaca; }
.corby-mypoints .woocommerce-reward-points-share-reddit { border-color: #fcd34d; }
.corby-mypoints .woocommerce-reward-points-share-envelope { border-color: #d1fae5; }

/* Rewards grid: 2 columns on desktop, 1 column under 1100px */
.corby-mypoints .woocommerce-my-points-rewards ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .corby-mypoints .woocommerce-my-points-rewards ul { grid-template-columns: 1fr; }
}

/* Recommend & Share cards: stack content to avoid bunching */
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningrecommend,
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningshare {
  display: block;
  align-items: stretch;
}
/* Share buttons container: wrap neatly */
.corby-mypoints .woocommerce-reward-points-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Copy button stacks under input on narrow space */
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningrecommend .corby-mypoints__copy-btn {
  margin-left: 0;
  margin-top: 8px;
}

/* Recommend: place input and copy button on a new row below the title */
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningrecommend .rp-title { display:block; margin:6px 0 8px; }
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningrecommend .rp-actions { display:flex; align-items:center; gap:8px; margin-top:0; }
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningrecommend .woocommerce-reward-points-recommended-text { flex:1 1 auto; max-width:none !important; }
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningrecommend .corby-mypoints__copy-btn { margin-left:0; }

/* Share: put links on their own line under the title */
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningshare .rp-title { display:block; margin:6px 0 8px; }
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningshare .woocommerce-reward-points-share-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-top:0; }

/* Force Recommend & Share to stack under title and occupy full width inside card */
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningrecommend,
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningshare { display:block !important; }
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningrecommend .rp-actions { display:flex; gap:8px; width:100%; }
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningrecommend .woocommerce-reward-points-recommended-text { flex:1 1 auto; }
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningshare .woocommerce-reward-points-share-buttons { display:flex; flex-wrap:wrap; gap:8px; width:100%; }

/* Recommend/Share: move dot inline with title text */
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningrecommend::before,
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningshare::before { display: none !important; }
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningrecommend .rp-title,
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningshare .rp-title { display:flex; align-items:center; gap:8px; }
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningrecommend .rp-title::before,
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningshare .rp-title::before {
  content: '';
  width: 10px; height: 10px; border-radius: 50%;
  background: #d1d5db; flex: 0 0 10px;
}
/* State colors for inline dot */
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningrecommend.state-completed .rp-title::before,
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningshare.state-completed .rp-title::before { background:#22c55e; }
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningrecommend.state-repeatable-seen .rp-title::before,
.corby-mypoints li.woocommerce-my-points-rewards-reward-pointearningshare.state-repeatable-seen .rp-title::before { background:#3b82f6; }