/* =========================================================
   free-likes.css — FREE LIKES (Likedrom) modern pills UI
   Scope: body.ld + #freelike (safe override)
   Theme detection:
     - body.ld[data-theme="light"]
     - html[data-theme="light"] body.ld
     - body.ld.theme-light / body.ld.light
   No gradients. Telegram-like capsules.
========================================================= */

/* -------------------------
   TOKENS (DEFAULT = DARK)
-------------------------- */
body.ld{
  --fl-page-text: rgba(255,255,255,.92);
  --fl-muted: rgba(255,255,255,.72);
  --fl-muted2: rgba(255,255,255,.60);

  --fl-section-bg: transparent;

  --fl-box-bg: rgba(255,255,255,.03);
  --fl-box-border: rgba(255,255,255,.10);
  --fl-box-shadow: 0 14px 40px rgba(0,0,0,.18);

  --fl-card-bg: rgba(255,255,255,.06);
  --fl-card-bg2: rgba(255,255,255,.085);
  --fl-border: rgba(255,255,255,.12);
  --fl-border2: rgba(255,255,255,.18);

  --fl-input-bg: rgba(255,255,255,.06);
  --fl-input-bg2: rgba(255,255,255,.09);
  --fl-input-border: rgba(255,255,255,.14);
  --fl-input-border2: rgba(255,255,255,.22);

  --fl-pill-bg: rgba(255,255,255,.06);
  --fl-pill-border: rgba(255,255,255,.12);

  --fl-accent: #4aa3ff;

  --fl-success-bg: rgba(46, 204, 113, .10);
  --fl-success-border: rgba(46, 204, 113, .24);
  --fl-success-text: rgba(255,255,255,.90);

  --fl-warn-bg: rgba(245, 158, 11, .10);
  --fl-warn-border: rgba(245, 158, 11, .24);
  --fl-warn-text: rgba(255,255,255,.88);

  --fl-danger-bg: rgba(239, 68, 68, .10);
  --fl-danger-border: rgba(239, 68, 68, .24);
  --fl-danger-text: rgba(255,255,255,.92);

  --fl-radius: 22px;
  --fl-radius2: 28px;
  --fl-pill-radius: 999px;

  --fl-transition: all .25s cubic-bezier(.4,0,.2,1);
}

/* -------------------------
   TOKENS (LIGHT)
-------------------------- */
body.ld[data-theme="light"],
html[data-theme="light"] body.ld,
body.ld.theme-light,
body.ld.light{
  --fl-page-text: rgba(10,22,40,.92);
  --fl-muted: rgba(10,22,40,.68);
  --fl-muted2: rgba(10,22,40,.55);

  --fl-section-bg: transparent;

  --fl-box-bg: rgba(255,255,255,.92);
  --fl-box-border: rgba(15,23,42,.10);
  --fl-box-shadow: 0 16px 42px rgba(15,23,42,.08);

  --fl-card-bg: rgba(255,255,255,.85);
  --fl-card-bg2: rgba(255,255,255,.95);
  --fl-border: rgba(15,23,42,.08);
  --fl-border2: rgba(15,23,42,.15);

  --fl-input-bg: rgba(255,255,255,.98);
  --fl-input-bg2: rgba(255,255,255,1);
  --fl-input-border: rgba(15,23,42,.10);
  --fl-input-border2: rgba(15,23,42,.18);

  --fl-pill-bg: rgba(15,23,42,.05);
  --fl-pill-border: rgba(15,23,42,.10);

  --fl-success-bg: rgba(46, 204, 113, .10);
  --fl-success-border: rgba(46, 204, 113, .22);
  --fl-success-text: rgba(10,22,40,.90);

  --fl-warn-bg: rgba(245, 158, 11, .10);
  --fl-warn-border: rgba(245, 158, 11, .22);
  --fl-warn-text: rgba(10,22,40,.86);

  --fl-danger-bg: rgba(239, 68, 68, .10);
  --fl-danger-border: rgba(239, 68, 68, .22);
  --fl-danger-text: rgba(10,22,40,.92);
}

/* ---------------------------------------------------------
   SECTION BASE (kill legacy)
--------------------------------------------------------- */
body.ld #freelike{ color: var(--fl-page-text) !important; }

body.ld #freelike.screenShots{
  background: var(--fl-section-bg) !important;
}

/* ---------------------------------------------------------
   SECTION TITLE (force theme)
--------------------------------------------------------- */
body.ld #freelike .section-title h3,
body.ld #freelike .section-title h3#like{
  color: var(--fl-page-text) !important;
}
body.ld #freelike .section-title h3 noindex{ color: inherit !important; }

/* ---------------------------------------------------------
   PLACEHOLDERS
--------------------------------------------------------- */
body.ld #freelike ::placeholder{ color: rgba(120,130,145,.90) !important; opacity: 1 !important; }
body.ld[data-theme="light"] #freelike ::placeholder,
html[data-theme="light"] body.ld #freelike ::placeholder,
body.ld.theme-light #freelike ::placeholder,
body.ld.light #freelike ::placeholder{
  color: rgba(110,120,135,.85) !important;
}

/* ---------------------------------------------------------
   OUTER BOX (strong override)
--------------------------------------------------------- */
body.ld #freelike .free-likes-box{
  max-width: 860px;
  margin: 0 auto;
  padding: 18px;

  border-radius: var(--fl-radius2) !important;
  background: var(--fl-box-bg) !important;
  border: 1px solid var(--fl-box-border) !important;
  box-shadow: var(--fl-box-shadow) !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---------------------------------------------------------
   TABS
--------------------------------------------------------- */
body.ld #freelike .network-tabs,
body.ld #freelike .service-tabs{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 10px 12px;
  margin: 14px auto 10px;
  max-width: 900px;
}

body.ld #freelike .tab-btn,
body.ld #freelike .service-btn{
  appearance: none;
  -webkit-appearance: none;

  border: 1px solid var(--fl-pill-border) !important;
  background: var(--fl-pill-bg) !important;
  color: var(--fl-page-text) !important;

  font-weight: 900;
  padding: 11px 18px;
  font-size: 15px;
  border-radius: var(--fl-pill-radius) !important;

  cursor: pointer;
  transition: var(--fl-transition);
  box-shadow: none !important;

  min-width: 120px;
  white-space: nowrap;
}

body.ld #freelike .service-btn{
  min-width: 110px;
  max-width: 170px;
  font-size: 14px;
  padding: 10px 16px;
  font-weight: 900;
}

body.ld #freelike .tab-btn:hover,
body.ld #freelike .service-btn:hover{
  transform: translateY(-1px);
  border-color: var(--fl-border2) !important;
  background: var(--fl-card-bg2) !important;
}

body.ld #freelike .tab-btn.active,
body.ld #freelike .service-btn.active{
  background: rgba(74,163,255,.14) !important;
  border-color: rgba(74,163,255,.35) !important;
  color: var(--fl-page-text) !important;
  box-shadow: 0 0 0 3px rgba(74,163,255,.10) !important;
}

/* ---------------------------------------------------------
   DIVIDER (no gradients)
--------------------------------------------------------- */
body.ld #freelike .bonus-divider{
  width: 100%;
  max-width: 560px;
  height: 1px;
  background: var(--fl-border) !important;
  margin: 16px auto 10px;
  opacity: 1;
}

/* ---------------------------------------------------------
   FORM (THIS IS WHAT “ОСТАЛОСЬ КАК БЫЛО”)
   -> усиливаем, чтобы перебить legacy/Bootstrap
--------------------------------------------------------- */
body.ld #freelike .free-likes-form.styled{
  max-width: 760px;
  margin: 14px auto 0;

  padding: 22px 18px;

  border-radius: var(--fl-radius2) !important;
  background: var(--fl-card-bg) !important;
  border: 1px solid var(--fl-border) !important;

  box-shadow: 0 12px 26px rgba(0,0,0,.10) !important;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  text-align: center;
}

/* Inputs (URL + captcha) — жестко перебиваем */
body.ld #freelike #free-likes-url,
body.ld #freelike #captcha_input,
body.ld #freelike .free-likes-form.styled input[type="text"]{
  width: 100% !important;

  border-radius: 18px !important;
  background: var(--fl-input-bg) !important;
  border: 2px solid var(--fl-input-border) !important;

  color: var(--fl-page-text) !important;

  padding: 14px 16px !important;
  font-size: 16px !important;
  outline: none !important;

  box-shadow: none !important;
  transition: var(--fl-transition);
}

body.ld #freelike #free-likes-url:focus,
body.ld #freelike #captcha_input:focus,
body.ld #freelike .free-likes-form.styled input[type="text"]:focus{
  background: var(--fl-input-bg2) !important;
  border-color: rgba(74,163,255,.70) !important;
  box-shadow: 0 0 0 4px rgba(74,163,255,.12) !important;
}

/* Captcha text */
body.ld #freelike #captcha-block{
  margin: 14px 0 18px !important;
}
body.ld #freelike #captcha-block > div{
  font-size: 14px !important;
  font-weight: 900 !important;
  color: var(--fl-page-text) !important;
  margin-bottom: 10px !important;
}

/* Checkbox row */
body.ld #freelike .free-followers-row{
  margin: 12px 0 8px !important;
  font-size: 14px !important;
  color: var(--fl-muted) !important;
  user-select: none;

  display:flex !important;
  justify-content:center !important;
}
body.ld #freelike .free-followers-row label{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  margin: 0 !important;
}

/* Checkbox itself */
body.ld #freelike #free-followers-check{
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  accent-color: var(--fl-accent);
}

/* Links inside checkbox row */
body.ld #freelike .free-followers-row a{
  color: var(--fl-accent) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}
body.ld #freelike .free-followers-row a:hover{
  text-decoration: underline !important;
}

/* Button */
body.ld #freelike #free-likes-submit{
  width: 100% !important;
  margin-top: 14px !important;

  background: rgba(74,163,255,.95) !important;
  color: #fff !important;

  border: 1px solid rgba(74,163,255,.55) !important;
  border-radius: 16px !important;

  padding: 13px 18px !important;
  font-size: 16px !important;
  font-weight: 950 !important;

  cursor: pointer !important;
  transition: var(--fl-transition) !important;

  box-shadow: 0 14px 30px rgba(74,163,255,.18) !important;
}
body.ld #freelike #free-likes-submit:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}
body.ld #freelike #free-likes-submit:active{
  transform: translateY(0);
}

/* Message */
body.ld #freelike #free-likes-message{
  margin-top: 14px !important;
  display:none;
  font-size: 14px !important;

  border-radius: 16px !important;
  padding: 12px 14px !important;

  border: 1px solid var(--fl-border) !important;
  background: var(--fl-card-bg) !important;
  color: var(--fl-muted) !important;
}

body.ld #freelike #free-likes-message.info{
  background: rgba(74,163,255,.10) !important;
  border-color: rgba(74,163,255,.24) !important;
  color: var(--fl-page-text) !important;
}
body.ld #freelike #free-likes-message.success{
  background: var(--fl-success-bg) !important;
  border-color: var(--fl-success-border) !important;
  color: var(--fl-success-text) !important;
}
body.ld #freelike #free-likes-message.error{
  background: var(--fl-danger-bg) !important;
  border-color: var(--fl-danger-border) !important;
  color: var(--fl-danger-text) !important;
}

/* ---------------------------------------------------------
   BONUS CARD (result) — оставляем как было, тоже усилили
--------------------------------------------------------- */
body.ld #freelike .bonus-card.styled{
  max-width: 820px;
  margin: 16px auto 0;
  padding: 18px;

  border-radius: var(--fl-radius2) !important;
  background: var(--fl-card-bg) !important;
  border: 1px solid var(--fl-border) !important;

  box-shadow: var(--fl-box-shadow) !important;
}

body.ld #freelike .bonus-box{
  display:flex;
  gap: 16px;
  flex-wrap:wrap;
}

body.ld #freelike .bonus-left{
  flex: 1 1 280px;
  min-height: 190px;
  border-radius: 18px;

  background: rgba(255,255,255,.04) url('https://likedrom.com/images/isq.gif') center/cover no-repeat;
  border: 1px solid var(--fl-border) !important;
  overflow:hidden;
}

body.ld #freelike .bonus-right{
  flex: 1 1 280px;
  padding: 6px 6px 6px 2px;
}

body.ld #freelike .bonus-line{
  padding: 10px 0;
  border-bottom: 1px solid var(--fl-border) !important;
  font-size: 14px;
  line-height: 1.45;
  color: var(--fl-page-text) !important;
  word-break: break-word;
  text-align: left;
}
body.ld #freelike .bonus-line:last-child{ border-bottom: none; }

body.ld #freelike .bonus-footer{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  text-align:center;
  font-size: 14px;
  background: var(--fl-success-bg) !important;
  border: 1px solid var(--fl-success-border) !important;
  color: var(--fl-success-text) !important;
}

body.ld #freelike .banner-footer{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  text-align:center;
  font-size: 14px;
  background: var(--fl-warn-bg) !important;
  border: 1px solid var(--fl-warn-border) !important;
  color: var(--fl-warn-text) !important;
}

body.ld #freelike .bonus-cancel-wrap{
  text-align:center;
  margin-top: 14px;
}

body.ld #freelike .cancel-bonus-btn{
  padding: 11px 18px;
  font-size: 14px;

  border-radius: 16px !important;
  background: var(--fl-card-bg) !important;
  border: 1px solid var(--fl-border2) !important;
  color: var(--fl-page-text) !important;

  cursor: pointer;
  transition: var(--fl-transition);
}
body.ld #freelike .cancel-bonus-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(74,163,255,.35) !important;
  box-shadow: 0 0 0 3px rgba(74,163,255,.10) !important;
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */
@media (max-width: 600px){
  body.ld #freelike .network-tabs{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 380px;
  }
  body.ld #freelike .tab-btn{ min-width: 0; width: 100%; }
  body.ld #freelike .service-btn{ max-width: none; }

  body.ld #freelike .free-likes-box{ padding: 14px; }
  body.ld #freelike .free-likes-form.styled{ padding: 18px 14px !important; }

  body.ld #freelike .bonus-box{ flex-direction: column; }
  body.ld #freelike .bonus-right{ padding: 10px 2px 0 2px; }
}