/* ============================================================
   Job Funnel Builder — front-end styles
   Reproduced 1:1 from jobs.techdealreview.com
   ============================================================ */

/* ---- Article: "Are you interested?" box ---- */
.custom-box {
  margin: 0 0 15px 0;
  padding: 5px;
  border: 3px dashed orange;
  border-radius: 15px;
  background-color: #fff9f0;
  font-family: 'Arial', sans-serif;
  box-shadow: 0 0 10px rgba(255,165,0,0.1);
  animation: borderBlink 1.2s infinite;   /* red blink */
}
@keyframes borderBlink {
  0%   { border-color: red; }
  50%  { border-color: transparent; }
  100% { border-color: red; }
}

.question-box h2 {
  color: #d6450b;
  text-align: center;
  font-size: 26px;
  margin-bottom: 10px;
}
.question-box p {
  text-align: center;
  color: #4b2e1f;
  font-size: 18px;
  margin-bottom: 7px;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 25px;
}

/* YES/NO buttons */
.btn-yes,
.btn-no {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: none;
  border-radius: 50px;
  font-size: 20px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-yes { background-color: #00cc44; }
.btn-no  { background-color: #ff3333; }
.btn-yes:hover { background-color: #00a738; color: white; text-decoration: none; }
.btn-no:hover  { background-color: #cc0000; color: white; text-decoration: none; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
}
.green-icon svg { fill: green; }
.red-icon svg   { fill: red; }

/* blinking heading */
.blinks {
  color: red;
  font-size: 1.3em;
  animation: blinkAnimation 2.2s infinite;
}
@keyframes blinkAnimation {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* ============================================================
   RELATED-JOB BARS — gradient pill cards
   Shared look for .cat-button, .tan a, and .custom-button
   ============================================================ */
.san,
.tan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 18px 0;
}

.cat-button,
.tan a,
.custom-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 14px 14px;
  border-radius: 22px;
  text-decoration: none;
  background: linear-gradient(135deg, #bc2b95 0%, #7c1668 100%);
  box-shadow: 0 6px 16px rgba(120, 20, 100, 0.25);
  transition: background 0.3s ease, transform 0.2s ease;
}
.cat-button:hover,
.tan a:hover,
.custom-button:hover {
  background: linear-gradient(135deg, #c93aa4 0%, #8a1c76 100%);
  transform: translateY(-2px);
  text-decoration: none !important;
  color: #fff;
}

/* left ▶ — translucent circle with a gold triangle */
.cat-button .left-icon,
.tan .left-icon,
.custom-button .left-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffce2e;
  font-size: 16px;
  text-align: center;
}

/* label — left-aligned, bold, wraps cleanly to 2 lines */
.cat-button .label,
.tan .label,
.custom-button .label {
  flex: 1;
  text-align: left;
  color: #fff;
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.3;
}

/* right » — solid yellow rounded-square button */
.cat-button .right-icon,
.tan .right-icon,
.custom-button .right-icon {
  width: 46px;
  height: 40px;
  flex: 0 0 46px;
  border-radius: 12px;
  background: #f5c518;
  color: #6a1259;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

/* ============================================================
   TAG PAGE — "Select Your Choice" category list (.jc-cats)
   ============================================================ */
.jc-cats{width:100%;flex:1 1 100%;margin:0 0 20px;display:flex;flex-direction:column;gap:14px;box-sizing:border-box}
.jc-cats .san{margin:4px 0 6px}
.jc-cats .san .blinks{font-size:20px;font-weight:800;color:#e5057e;margin:0;letter-spacing:.2px;animation:jcBlink 1.8s ease-in-out infinite}
@keyframes jcBlink{0%,100%{opacity:1}50%{opacity:.15}}
.jc-cat{position:relative;display:flex;align-items:center;gap:14px;text-decoration:none!important;color:#fff!important;font-weight:700;font-size:15.5px;line-height:1.3;padding:14px 16px;border-radius:22px;background:linear-gradient(135deg,#bc2b95 0%,#7c1668 100%);box-shadow:0 6px 16px rgba(120,20,100,.25);transition:transform .18s ease,box-shadow .18s ease,background .3s ease}
.jc-cat:hover{transform:translateY(-2px);background:linear-gradient(135deg,#c93aa4 0%,#8a1c76 100%);box-shadow:0 9px 22px rgba(120,20,100,.38)}
.jc-cat:active{transform:translateY(1px)}
.jc-cat .play{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:14px;color:#ffce2e}
.jc-cat .l{flex:1 1 auto;text-align:left;font-weight:700;color:#fff}
.jc-cat .seat{font-weight:700;white-space:nowrap;color:#fff}
.jc-cat .ar{flex:0 0 46px;width:46px;height:40px;border-radius:12px;background:#f5c518;color:#6a1259;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:bold}
@media(prefers-reduced-motion:reduce){.jc-cats .san .blinks{animation:none}.jc-cat{transition:none}.jc-cat:hover{transform:none}}
@media(max-width:560px){.jc-cat{font-size:14.5px;padding:12px 13px;gap:11px}.jc-cat .play{flex:0 0 40px;width:40px;height:40px}.jc-cat .ar{flex:0 0 42px;width:42px}.jc-cats .san .blinks{font-size:18px}}

/* ============================================================
   CATEGORY PAGE — "Submit Your Application" CTA (.jgx-apply)
   ============================================================ */
.jgx-apply{border:2px dashed #ff2d9b;background:#fdf1e7;border-radius:14px;padding:22px 18px;text-align:center;margin:0 0 20px}
.jgx-apply h3{color:#e04a17;font-size:22px;font-weight:800;margin:0 0 14px;line-height:1.3}
.jgx-apply .jgx-apply-btn{display:inline-flex;align-items:center;gap:10px;background:#22b24c;color:#fff!important;text-decoration:none!important;font-size:18px;font-weight:700;padding:14px 28px;border-radius:40px;box-shadow:0 6px 16px rgba(34,178,76,.35);transition:transform .15s ease,filter .15s ease}
.jgx-apply .jgx-apply-btn:hover{transform:translateY(-2px);filter:brightness(1.05);color:#fff!important}
.jgx-apply .jgx-apply-btn .tick{width:26px;height:26px;border-radius:50%;background:#fff;color:#22b24c;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;flex:0 0 auto}
@media(max-width:560px){.jgx-apply h3{font-size:18px}.jgx-apply .jgx-apply-btn{font-size:16px;padding:13px 22px}}