/* --- UPDATED Premium Badge Style (Fix for Hover & Overlay) --- */

/* Targeting the badge in all states, including within a .loop-overlay */
.premium-meta-badge,
.loop-overlay .premium-meta-badge {
  /* Reset the main container to be transparent */
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;

  /* Use flexbox to align the icon box and text */
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
}

/* Targeting the icon in all states */
.premium-meta-badge .premium-crown-icon,
.loop-overlay .premium-meta-badge .premium-crown-icon {
  background: #4b4b4b !important;
  padding: 1px !important;
  border-radius: 3px !important;
  width: 16px !important;
  height: 16px !important;
  color: #ffd700 !important;
  box-sizing: content-box !important;
  transition: background 0.2s ease !important; /* Added for a smooth hover effect */
}

/* Targeting the text in all states */
.premium-meta-badge .premium-text,
.loop-overlay .premium-meta-badge .premium-text {
  /* 1. Set the background to a golden gradient */
  background: linear-gradient(
    180deg,
    #ffdc73 0%,
    #e8b923 50%,
    #bf953f 100%
  ) !important;
  /* 2. Clip the background to the text's shape */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  /* 3. Make the text color transparent to show the gradient */
  color: transparent !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  background: none !important;
}

/* --- FIX for Hover State --- */

/* This rule ensures the main container remains transparent on hover */
.premium-meta-badge:hover {
  background: transparent !important;
}

/* This rule adds a new, subtle hover effect to the icon box itself */
.premium-meta-badge:hover .premium-crown-icon {
  background: #333 !important; /* Darkens the icon box slightly on hover */
}

/* --- Contact Form 7 Specific Styles - ONLY for Premium Content Gate --- */

/* Target ONLY CF7 forms within the premium content gate */
#premium-content-gate .wpcf7 .premium-content-email-input {
  width: 100% !important;
  padding: 15px 5px !important;
  border: none !important;
  border-bottom: 2px solid #e1e5e9 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 16px !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
  margin-bottom: 25px !important;
  font-family: inherit !important;
}

#premium-content-gate .wpcf7 .premium-content-email-input:focus {
  outline: none !important;
  border-bottom-color: #667eea !important;
}

#premium-content-gate .wpcf7 .premium-content-email-input::placeholder {
  color: #999 !important;
}

/* --- NEW CSS-ONLY CHECKBOX STYLING (with Unique Class) --- */

/* This part styles the standard CF7 checkbox to look like the custom one */
#premium-content-gate
  .wpcf7
  .wpcf7-form-control-wrap
  .wpcf7-checkbox
  .wpcf7-list-item {
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide the actual checkbox input visually but keep it functional */
#premium-content-gate .wpcf7 .pc-cf7-checkbox {
  position: absolute !important;
  opacity: 0 !important;
  cursor: pointer !important;
  height: 0 !important;
  width: 0 !important;
}

/* Style the label which acts as the visible, clickable element */
#premium-content-gate .wpcf7 .wpcf7-list-item-label {
  position: relative !important;
  padding-left: 35px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  color: #666 !important;
  display: inline-block !important;
  line-height: 1.4 !important;
  margin-bottom: 15px !important;
}

/* Create the custom checkbox 'box' using a pseudo-element */
#premium-content-gate .wpcf7 .wpcf7-list-item-label:before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #ddd !important;
  border-radius: 4px !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
}

/* Style the 'box' when the hidden checkbox is checked */
#premium-content-gate
  .wpcf7
  .pc-cf7-checkbox:checked
  + .wpcf7-list-item-label:before {
  background: #667eea !important;
  border-color: #667eea !important;
}

/* Create the checkmark '✓' when the checkbox is checked */
#premium-content-gate
  .wpcf7
  .pc-cf7-checkbox:checked
  + .wpcf7-list-item-label:after {
  content: "✓" !important;
  position: absolute !important;
  left: 3px !important;
  top: 0px !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: bold !important;
}

/* --- End of New Checkbox Styling --- */

/* CF7 Submit button styling - ONLY in premium content gate */
#premium-content-gate .wpcf7 .premium-content-submit-button {
  background: #2c3e50 !important;
  color: white !important;
  padding: 10px 40px !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  display: block !important;
  margin: 0 !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  height: 56px !important;
}

#premium-content-gate .wpcf7 .premium-content-submit-button::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: #667eea !important;
  transition: left 0.3s ease !important;
  z-index: 1 !important;
}

#premium-content-gate .wpcf7 .premium-content-submit-button:hover::before {
  left: 0 !important;
}

#premium-content-gate
  .wpcf7
  .premium-content-submit-button
  input[type="submit"] {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
}

/* Remove CF7 default form styling that might interfere - ONLY in premium content gate */
#premium-content-gate .wpcf7-form p {
  margin: 0 0 15px 0 !important;
}

#premium-content-gate .wpcf7-form .wpcf7-form-control-wrap {
  position: static !important;
}

#premium-content-gate .wpcf7-form .wpcf7-not-valid-tip {
  color: #dc3232 !important;
  font-size: 12px !important;
  margin-top: 5px !important;
  display: block !important;
}

#premium-content-gate .wpcf7-form .wpcf7-response-output {
  margin: 15px 0 !important;
  padding: 10px !important;
  border-radius: 4px !important;
}

#premium-content-gate .wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
  background: #d4edda !important;
  border: 1px solid #c3e6cb !important;
  color: #155724 !important;
}

#premium-content-gate
  .wpcf7-form
  .wpcf7-response-output.wpcf7-validation-errors {
  background: #f8d7da !important;
  border: 1px solid #f5c6cb !important;
  color: #721c24 !important;
}

/* Ensure proper spacing in CF7 mode - ONLY in premium content gate */
#premium-content-gate .wpcf7-form {
  margin-bottom: 25px !important;
}


/* === Single plug-and-play checkbox style for checkbox3 === */

/* 1) Hide the native input visually but keep it focusable/accessible */
#premium-content-gate .wpcf7 input[type="checkbox"][name="checkbox3[]"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;     /* accessible hiding */
  white-space: nowrap !important;
  border: 0 !important;
  left: -9999px !important;
  opacity: 0 !important;
}

/* 2) Style the visible label text (the span CF7 outputs) */
#premium-content-gate .wpcf7 .wpcf7-list-item-label {
  position: relative !important;
  padding-left: 36px !important;     /* room for the fake box */
  cursor: pointer !important;
  font-size: 14px !important;
  color: #666 !important;
  display: inline-block !important;
  line-height: 1.4 !important;
  margin-bottom: 15px !important;
}

/* 3) Fake checkbox (drawn by :before on the label span) */
#premium-content-gate .wpcf7 .wpcf7-list-item-label:before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid #ddd !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-sizing: border-box !important;
  transition: all .15s ease !important;
  z-index: 1 !important;
}

/* 4) Checked state: change color of fake box */
/* Use both + and ~ so it works whether the span is immediate or general sibling */
#premium-content-gate .wpcf7 input[type="checkbox"][name="checkbox3[]"]:checked + .wpcf7-list-item-label:before,
#premium-content-gate .wpcf7 input[type="checkbox"][name="checkbox3[]"]:checked ~ .wpcf7-list-item-label:before {
  background: #667eea !important;
  border-color: #667eea !important;
}

/* 5) Check mark */
#premium-content-gate .wpcf7 input[type="checkbox"][name="checkbox3[]"]:checked + .wpcf7-list-item-label:after,
#premium-content-gate .wpcf7 input[type="checkbox"][name="checkbox3[]"]:checked ~ .wpcf7-list-item-label:after {
  content: "✓" !important;
  position: absolute !important;
  left: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  z-index: 2 !important;
}

/* 6) Focus outline for keyboard users */
#premium-content-gate .wpcf7 input[type="checkbox"][name="checkbox3[]"]:focus + .wpcf7-list-item-label:before,
#premium-content-gate .wpcf7 input[type="checkbox"][name="checkbox3[]"]:focus ~ .wpcf7-list-item-label:before {
  box-shadow: 0 0 0 3px rgba(102,126,234,0.18) !important;
}