/* buttons.css */

/* Scoped theme tokens for the modal (easy to tweak in one place) */
.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;
}

/* One rule for all buttons you allow in the modal:
   - Your custom .ll-btn
   - Legacy WP .button / .button-primary (via :is())
*/
.dashboard-modal :is(.ll-btn, .button, button) {
    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; /* for <a class="button"> cases */
}

/* Hover/Focus */
.dashboard-modal :is(.ll-btn, .button, button):hover,
.dashboard-modal :is(.ll-btn, .button, button):focus {
  background: var(--ll-btn-bg-hover);
  outline: none;
}

/* Full-width modifier (used all over your forms) */
.dashboard-modal .ll-btn--full {
  width: 100%;
  box-sizing: border-box;
}

/* “Primary” variant (optional; keeps BEM semantics if you want variants later) */
.dashboard-modal .ll-btn--primary {
  /* inherits the base colors above; override here if needed */
}

/* Processing state (prefer a modifier class and aria-busy for a11y) */
.dashboard-modal :is(.ll-btn, .button, button).is-processing,
.dashboard-modal :is(.ll-btn, .button, button)[aria-busy="true"] {
  background: #fff;
  color: var(--ll-danger);
  border: 1px solid var(--ll-danger);
  cursor: progress;
}

/* The animated dots used in your “processing” buttons */
.dashboard-modal .dots {
  display: inline-block;
  margin-left: .25rem;
  animation: ll-blink 1s infinite steps(1, end);
}

@keyframes ll-blink {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}

/* Ensure legacy WP .button-primary doesn’t fight you inside the modal */
.dashboard-modal .button-primary {
  background: var(--ll-btn-bg) !important;
  color: var(--ll-btn-fg) !important;
  border: none !important;
}

/* Optional: a “fullwidth-blue” utility used in your fallback HTML */
.dashboard-modal .fullwidth-blue {
  width: 100%;
  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);
}

/* ================================
   Local Leader Button System
   (replace prior button rules)
   ================================ */

/* Design tokens */
: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;
}

/* Base: applies to <button>, <a>, <input type="submit"> */
.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); }

/* Base: white text on red background */
.ll-btn--danger {
  background-color: #d90000;     /* red */
  color: #fff;                   /* white text */
  border: 2px solid #d90000;     /* matching red border */
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Hover: white background with red text and border */
.ll-btn--danger:hover {
  background-color: #fff;
  color: #d90000;
  border-color: #d90000;
}

/* Optional: pressed state (slightly darker red) */
.ll-btn--danger:active {
  background-color: #b00000;
  color: #fff;
  border-color: #b00000;
}

/* Optional: focus-visible outline for accessibility */
.ll-btn--danger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(217, 0, 0, 0.45);
}

.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 .dots,
button .dots { animation: blinking 1s infinite; }

.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 */
}

/* =================================
   Scoped contexts
   ================================= */

/* Modal: just ensure we use the same system */
#dashboard-modal .ll-step-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: flex-end;
}
#dashboard-modal .ll-step-buttons .prev-step { margin-right: auto; }

/* Use primary buttons inside step nav */
#dashboard-modal .ll-step-buttons .ll-btn { /* inherit base */ }
#dashboard-modal .ll-step-buttons .ll-btn.ll-btn--primary { /* already blue */ }

/* Generic 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; }
.post-status-actions-wrapper .ll-btn--danger { /* upgrade button stands out */ }

/* “Start Here” can just be a full primary */
.start-here-button { /* legacy hook if used as a class */
  max-width: 600px;
  width: 100%;
  text-transform: uppercase;
}

/* Full-width blue (replace old .fullwidth-blue) */
.ll-btn--full.ll-btn--primary { /* already covered by modifiers */ }

/* Socials (fix invalid selector and keep separate brand colors) */
.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; }

/* Delete image “X” button (kept as is, just ensure clarity) */
.delete-image-button {
  background: rgba(0,0,0,.5);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  width: 30px; height: 30px;
  position: absolute; top: 5px; right: 5px;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  transition: background-color .2s ease;
}
.delete-image-button:hover { background-color: rgba(255,0,0,.7); }

/* Payment floating button (if you truly need fixed) */
.pay-button {
  position: fixed; top: 150px; right: 10px; z-index: 1000;
}
.pay-button.ll-btn--primary { /* inherits primary visuals */ }

/* Radio “button-like” styling kept, but namespaced */
#ll-multi-type-group .button-like-radio {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 6px;
  background-color: #f4f4f4; border: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
  font-weight: 500; user-select: none;
}
#ll-multi-type-group .button-like-radio:hover { background-color: #e7e7e7; }
#ll-multi-type-group .button-like-radio input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
#ll-multi-type-group .button-like-radio input[type="radio"]:checked + span {
  background-color: var(--ll-blue); color: #fff; padding: 4px 8px; border-radius: 4px;
}


/* Restore inline layout for status + upgrade button on the same line */
.business-line-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;              /* small gap between text and button */
  flex-wrap: wrap;        /* allows wrap on mobile */
}

/* Ensure the wrapper doesn’t force centering */
.upgrade-button-wrapper {
  display: inline-flex;   /* keep inline so it flows beside text */
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}

/* Optional tweak for dashboard list rows */
.post-status-actions-wrapper .business-line-row {
  align-items: center;
  justify-content: flex-start;
}

/* ================================
   Override Theme Link Styling for LL Buttons
   ================================ */

/* Base override: remove underline and enforce color for all LL buttons */
a.ll-btn,
a.ll-btn:hover,
a.ll-btn:focus,
a.ll-btn:active {
  text-decoration: none !important; /* prevent theme underline */
  outline: none;
}

/* Ensure danger variant wins color/background battles */
.ll-btn.ll-btn--danger,
a.ll-btn.ll-btn--danger {
  background-color: #d90000;     /* red background */
  color: #fff;                   /* white text */
  border: 2px solid #d90000;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Hover: invert to white background, red text, red border */
.ll-btn.ll-btn--danger:hover,
a.ll-btn.ll-btn--danger:hover {
  background-color: #fff;
  color: #d90000;
  border-color: #d90000;
  text-decoration: none;
}

/* Active: darker red background, white text */
.ll-btn.ll-btn--danger:active,
a.ll-btn.ll-btn--danger:active {
  background-color: #b00000;
  color: #fff;
  border-color: #b00000;
}

/* Optional: focus-visible outline for accessibility */
.ll-btn.ll-btn--danger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(217, 0, 0, 0.45);
}

/* Remove underlines globally for LL buttons in any post/page content */
.single-post .entry-content a.ll-btn,
.page .entry a.ll-btn,
.post-status-actions-wrapper a.ll-btn {
  text-decoration: none !important;
}

/* =================================
   Google Visibility Score Button
   ================================= */

.ll-google-score-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  background-color: #fff;          /* white background */
  color: #0073aa;                  /* blue text for label */
  border: 2px solid #0073aa;       /* blue border */
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* Hover: invert colors */
.ll-google-score-btn:hover {
  background-color: #0073aa;
  color: #fff;
  border-color: #0073aa;
}

/* Pressed and focus states */
.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);
}

/* Keep the Google "G" multicolor style intact */
.ll-google-score-btn .fab.fa-google {
  background: conic-gradient(
    from -45deg,
    #ea4335 110deg,        /* red */
    #4285f4 90deg 180deg,  /* blue */
    #34a853 180deg 270deg, /* green */
    #fbbc05 270deg         /* yellow */
  ) 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; /* prevents resizing on hover color invert */
}

/* Preserve the colorful G even on hover */
.ll-google-score-btn:hover .fab.fa-google {
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Spinner that 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: dim/lock the button while processing */
.dashboard-modal .button.processing,
.dashboard-modal button.processing {
  opacity: 0.8;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================
   Survey Intro Step Layout
   ========================== */

/* Center the whole intro step by default */
.ll-survey-intro {
  text-align: center;
}

/* Headings stay centered */
.ll-survey-intro .ll-question-heading,
.ll-survey-intro .ll-sub-note {
  text-align: center;
}

/* Body copy (normal paragraphs) left-aligned, optionally constrained */
.ll-survey-intro p:not(.ll-question-heading):not(.ll-sub-note) {
  text-align: left;
  margin-left: auto;   /* keeps it centered as a block within the step */
  margin-right: auto;
  max-width: 720px;    /* tweak as you like; remove if you want full width */
}

/* Buttons centered */
.ll-survey-intro .ll-intro-buttons {
  display: flex;
  justify-content: center !important;
  margin-top: 2rem;
}

/* Skip link centered as well */
.ll-survey-intro .ll-skip-link {
  text-align: center;
  margin-top: 1rem;
  font-size: 15px;
}

/* Your hyperlink-style button */
.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 {
  color: #005177;
  text-decoration: none;
}

/* Keep your modal button baseline, but exclude linklike */
.dashboard-modal :is(.ll-btn, .button, button):not(.ll-linklike) {
  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;
}