/* ===================================================================
File: buttons.css
   =================================================================== */

/* -------------------------
   Design tokens (global)
   ------------------------- */
:root {
  --ll-blue: #0073aa;
  --ll-blue-hover: #005d8c;
  --ll-blue-press: #004f77;

  --ll-red: #d90000;
  --ll-red-hover: #b00000;
  --ll-red-press: #8d0000;

  --ll-neutral-100: #fff;
  --ll-neutral-800: #333;

  --ll-radius: 8px;

  --ll-font-size: 16px;
  --ll-pad-y: 10px;
  --ll-pad-x: 18px;
}

/* -------------------------
   Modal-scoped theme tokens
   (support both id and class roots)
   ------------------------- */
#dashboard-modal,
.dashboard-modal {
  --ll-btn-bg: #0073aa;
  --ll-btn-bg-hover: #006799;
  --ll-btn-fg: #fff;
  --ll-btn-radius: 6px;
  --ll-btn-pad-y: 12px;
  --ll-btn-pad-x: 16px;
  --ll-btn-font: 16px;
  --ll-danger: #d00;
}

/* ===================================================================
   Core button system (works anywhere)
   =================================================================== */

/* Base: applies to <button>, <a>, <input type="submit"> when using .ll-btn */
.ll-btn,
a.ll-btn,
input.ll-btn[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  font-size: var(--ll-font-size);
  font-weight: 500;
  line-height: 1.2;

  padding: var(--ll-pad-y) var(--ll-pad-x);
  border-radius: var(--ll-radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;

  background-color: var(--ll-neutral-100);
  color: var(--ll-neutral-800);
  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

/* Variants */
.ll-btn--primary { background-color: var(--ll-blue); color: #fff; }
.ll-btn--primary:hover { background-color: var(--ll-blue-hover); }
.ll-btn--primary:active { background-color: var(--ll-blue-press); }

.ll-btn--ghost {
  background-color: transparent;
  color: var(--ll-blue);
  border-color: var(--ll-blue);
}
.ll-btn--ghost:hover { background-color: rgba(0,0,0,.03); }

/* Layout helpers */
.ll-btn--full { display: block; width: 100%; }

/* States */
.ll-btn.is-processing,
button.is-processing {
  background-color: #fff;
  color: var(--ll-red);
  border-color: var(--ll-red);
}
.ll-btn:disabled,
.ll-btn.is-disabled,
button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Focus-visible for a11y */
.ll-btn:focus-visible,
button:focus-visible,
a.ll-btn:focus-visible {
  outline: 2px solid #fff;        /* inner */
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(0,115,170,.45); /* outer ring */
}

/* Remove underlines when .ll-btn used on links inside content areas */
a.ll-btn,
a.ll-btn:hover,
a.ll-btn:focus,
a.ll-btn:active {
  text-decoration: none !important;
  outline: none;
}
.single-post .entry-content a.ll-btn,
.page .entry a.ll-btn,
.post-status-actions-wrapper a.ll-btn {
  text-decoration: none !important;
}

/* ===================================================================
   Modal-scoped “normal buttons” (consolidated & safe)
   - excludes: hyperlink-like controls, tiny image ×, modal's own close
   - supports both #dashboard-modal and .dashboard-modal
   =================================================================== */
#dashboard-modal :is(.ll-btn, .button, button):not(.ll-linklike):not(.ll-remove-image):not(.mfp-close),
.dashboard-modal :is(.ll-btn, .button, button):not(.ll-linklike):not(.ll-remove-image):not(.mfp-close) {
  margin: 10px;
  background: var(--ll-btn-bg);
  color: var(--ll-btn-fg);
  border: none;
  border-radius: var(--ll-btn-radius);
  padding: var(--ll-btn-pad-y) var(--ll-btn-pad-x);
  cursor: pointer;
  font-size: var(--ll-btn-font);
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-decoration: none;
}
#dashboard-modal :is(.ll-btn, .button, button):not(.ll-linklike):not(.ll-remove-image):not(.mfp-close):hover,
#dashboard-modal :is(.ll-btn, .button, button):not(.ll-linklike):not(.ll-remove-image):not(.mfp-close):focus,
.dashboard-modal :is(.ll-btn, .button, button):not(.ll-linklike):not(.ll-remove-image):not(.mfp-close):hover,
.dashboard-modal :is(.ll-btn, .button, button):not(.ll-linklike):not(.ll-remove-image):not(.mfp-close):focus {
  background: var(--ll-btn-bg-hover);
  outline: none;
}

/* Legacy WP .button-primary inside modal should not fight */
#dashboard-modal .button-primary,
.dashboard-modal .button-primary {
  background: var(--ll-btn-bg) !important;
  color: var(--ll-btn-fg) !important;
  border: none !important;
}

/* Processing lock inside modal (optional) */
#dashboard-modal .button.processing,
#dashboard-modal button.processing,
.dashboard-modal .button.processing,
.dashboard-modal button.processing {
  opacity: 0.8;
  cursor: not-allowed;
  pointer-events: none;
}

/* Hyperlink-style control for secondary actions */
#dashboard-modal .ll-linklike,
.dashboard-modal .ll-linklike {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0;
  color: #0073aa;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  display: inline;
}
#dashboard-modal .ll-linklike:hover,
#dashboard-modal .ll-linklike:focus,
.dashboard-modal .ll-linklike:hover,
.dashboard-modal .ll-linklike:focus {
  color: #005177;
  text-decoration: none;
}

/* Modal library close (e.g., Magnific Popup) – keep it untouched */
#dashboard-modal .mfp-close,
.dashboard-modal .mfp-close {
  all: unset;
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
  z-index: 1000;
  line-height: 1;
}

/* ===================================================================
   Tiny image “×” (unified class only)
   =================================================================== */
#dashboard-modal .ll-remove-image,
.dashboard-modal .ll-remove-image {
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #fff !important;
  background: rgba(0,0,0,.75) !important;
  color: #fff !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 20px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2;
}
#dashboard-modal .ll-remove-image:hover,
.dashboard-modal .ll-remove-image:hover {
  background: rgba(0,0,0,.9) !important;
}

/* ===================================================================
   Extras you already use
   =================================================================== */

/* Prompt rows */
.ll-prompt-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

/* Offer cards / action rows */
.post-status-actions-wrapper .ll-btn { font-size: 14px; padding: 6px 12px; }

/* Start here */
.start-here-button {
  max-width: 600px;
  width: 100%;
  text-transform: uppercase;
  color: white;
  background: green;
  border-radius: 6px;
  padding: 5px;
}

/* Dashboard inline layout */
.business-line-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.upgrade-button-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}

/* Socials */
.ll-btn--facebook { background-color: #3b5998; color: #fff; }
.ll-btn--facebook:hover { background-color: #314e86; }
.ll-btn--twitter { background-color: #000; color: #fff; }
.ll-btn--twitter:hover { background-color: #333; }

/* Google Visibility Score Button */
.ll-google-score-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  background-color: #fff;
  color: #0073aa;
  border: 2px solid #0073aa;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.ll-google-score-btn:hover {
  background-color: #0073aa;
  color: #fff;
  border-color: #0073aa;
}
.ll-google-score-btn:active {
  background-color: #005d8c;
  border-color: #005d8c;
  color: #fff;
}
.ll-google-score-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(0,115,170,0.45);
}
/* Preserve the colorful “G” even on hover */
.ll-google-score-btn .fab.fa-google {
  background: conic-gradient(
    from -45deg,
    #ea4335 110deg,
    #4285f4 90deg 180deg,
    #34a853 180deg 270deg,
    #fbbc05 270deg
  ) 73% 55% / 150% 150% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-top: 1px;
  flex-shrink: 0;
}
.ll-google-score-btn:hover .fab.fa-google {
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Spinner (inherits current text color) */
.ll-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  margin-right: 8px;
  animation: llspin .8s linear infinite;
}
@keyframes llspin { to { transform: rotate(360deg); } }

/* Optional: fixed pay button */
.pay-button {
  position: fixed;
  top: 150px;
  right: 10px;
  z-index: 1000;
}

/* ============================================================
   Upgrade to Premium button (red background → white text)
   ============================================================ */
/* Upgrade button — final, winning rules */
.upgrade-button-wrapper .ll-btn.ll-btn--danger {
  background-color: var(--ll-red);
  color: #fff;
  border: 1px solid var(--ll-red);
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.upgrade-button-wrapper .ll-btn.ll-btn--danger:hover,
.upgrade-button-wrapper .ll-btn.ll-btn--danger:focus {
  background-color: #fff;
  color: var(--ll-red);
  border-color: var(--ll-red); /* stays 1px */
  text-decoration: none;
  outline: none;
}

/* Optional: keyboard-visible ring */
.upgrade-button-wrapper .ll-btn.ll-btn--danger:focus-visible {
  box-shadow: 0 0 0 3px rgba(217,0,0,.2);
}