/* FlashTopup WooCommerce product fields — premium mobile-first Player ID UI. */
.ftr-wc-fields {
  --ftr-field-primary: #4169f6;
  --ftr-field-primary-2: #6947f5;
  --ftr-field-text: #151a2c;
  --ftr-field-muted: #667085;
  --ftr-field-border: #dbe2f2;
  --ftr-field-surface: #fff;
  --ftr-field-soft: #f5f7ff;
  --ftr-field-success: #30a763;
  width: 100%;
  margin: 20px 0 18px;
  padding: 20px;
  border: 1px solid rgba(85, 104, 180, .12);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,250,255,.96));
  box-shadow: 0 18px 50px rgba(31, 45, 98, .09);
}
.ftr-wc-fields *, .ftr-wc-fields *::before, .ftr-wc-fields *::after { box-sizing: border-box; }
.ftr-wc-fields .ftr-wc-row { display: block; width: 100%; margin: 0 0 15px; padding: 0; float: none; }
.ftr-wc-fields .ftr-wc-label-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.ftr-wc-fields label { margin: 0; color: var(--ftr-field-text); font-size: 15px; line-height: 1.3; font-weight: 800; }
.ftr-wc-fields label .required { color: #e5484d; text-decoration: none; }
.ftr-wc-secure { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; color: var(--ftr-field-primary); background: #eef2ff; font-size: 11px; line-height: 1; font-weight: 800; white-space: nowrap; }
.ftr-wc-shield { width: 15px; height: 15px; background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234169f6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.ftr-wc-control { position: relative; width: 100%; }
.ftr-wc-fields .ftr-wc-input {
  display: block; width: 100% !important; max-width: none; min-height: 56px; margin: 0 !important;
  padding: 0 16px; border: 1.5px solid var(--ftr-field-border) !important; border-radius: 16px !important;
  background: var(--ftr-field-surface) !important; color: var(--ftr-field-text) !important;
  box-shadow: 0 8px 24px rgba(34, 49, 105, .055); font-size: 17px !important; line-height: 1.2;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  -webkit-appearance: none; appearance: none;
}
.ftr-wc-player-row .ftr-wc-input { padding-left: 58px !important; padding-right: 52px !important; }
.ftr-wc-fields .ftr-wc-input:focus { outline: 0 !important; border-color: var(--ftr-field-primary) !important; box-shadow: 0 0 0 4px rgba(65,105,246,.13), 0 12px 28px rgba(65,105,246,.12) !important; }
.ftr-wc-user-icon { position: absolute; z-index: 2; left: 14px; top: 50%; width: 34px; height: 34px; transform: translateY(-50%); border-radius: 11px; background: #eef1ff center/19px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a63f2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); pointer-events: none; }
.ftr-wc-clear { position: absolute; z-index: 3; right: 12px; top: 50%; width: 34px; height: 34px; transform: translateY(-50%); padding: 0; border: 0; border-radius: 50%; background: #f0efff; color: #5f50ef; font-size: 24px; line-height: 30px; font-weight: 400; cursor: pointer; }
.ftr-wc-clear:hover { background: #e7e4ff; }
.ftr-wc-check-row { display: flex !important; align-items: stretch; gap: 10px; margin-top: 2px !important; }
.ftr-wc-fields .ftr-wc-checkid.button { min-width: 146px; min-height: 50px; margin: 0; padding: 0 17px; border: 0 !important; border-radius: 15px !important; background: linear-gradient(135deg, var(--ftr-field-primary), var(--ftr-field-primary-2)) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(79, 84, 232, .22); font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-transform: none; }
.ftr-wc-fields .ftr-wc-checkid.button:hover { filter: brightness(1.04); transform: translateY(-1px); }
.ftr-wc-fields .ftr-wc-checkid.button:disabled { opacity: .7; transform: none; cursor: wait; }
.ftr-wc-check-icon { width: 18px; height: 18px; background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.ftr-wc-checkid-msg { flex: 1 1 auto; min-width: 0; min-height: 50px; display: none; align-items: center; padding: 10px 13px 10px 44px; border-radius: 15px; position: relative; font-size: 13px; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
.ftr-wc-checkid-msg:not(:empty) { display: flex; }
.ftr-wc-checkid-msg::before { content: ''; position: absolute; left: 12px; top: 50%; width: 23px; height: 23px; transform: translateY(-50%); border-radius: 50%; }
.ftr-wc-checkid-msg.is-loading { color: #536076; background: #f3f5fa; border: 1px solid #e2e7f0; }
.ftr-wc-checkid-msg.is-loading::before { width: 18px; height: 18px; left: 15px; border: 2px solid #c9d1df; border-top-color: var(--ftr-field-primary); background: transparent; animation: ftr-wc-spin .7s linear infinite; }
.ftr-wc-checkid-msg.is-success { color: #208b51; background: #f0fbf4; border: 1px solid #bce8cb; }
.ftr-wc-checkid-msg.is-success::before { content: '✓'; display: grid; place-items: center; color: #fff; background: var(--ftr-field-success); font-size: 14px; }
.ftr-wc-checkid-msg.is-error { color: #c33f48; background: #fff4f4; border: 1px solid #f1c4c7; }
.ftr-wc-checkid-msg.is-error::before { content: '!'; display: grid; place-items: center; color: #fff; background: #e2545d; font-size: 14px; }
.ftr-wc-fields.is-verified .ftr-wc-player-row .ftr-wc-input { border-color: #8fd5aa !important; box-shadow: 0 0 0 4px rgba(48,167,99,.09) !important; }
@keyframes ftr-wc-spin { to { transform: translateY(-50%) rotate(360deg); } }
@media (max-width: 560px) {
  .ftr-wc-fields { padding: 17px 14px; border-radius: 20px; }
  .ftr-wc-check-row { flex-direction: column; }
  .ftr-wc-fields .ftr-wc-checkid.button { width: 100%; }
  .ftr-wc-secure { padding: 5px 8px; font-size: 10px; }
}
@media (prefers-color-scheme: dark) {
  .ftr-wc-fields { --ftr-field-text:#f4f6ff; --ftr-field-muted:#a6aec2; --ftr-field-border:#353b52; --ftr-field-surface:#171a26; background:linear-gradient(145deg,#1b1e2c,#151824); border-color:#2a2f43; box-shadow:0 18px 50px rgba(0,0,0,.25); }
  .ftr-wc-secure,.ftr-wc-user-icon { background-color:#252947; }
  .ftr-wc-clear { background:#292744; color:#aca3ff; }
  .ftr-wc-checkid-msg.is-loading { background:#202431; border-color:#343a4c; color:#c5cbd8; }
  .ftr-wc-checkid-msg.is-success { background:#152b20; border-color:#285b3d; }
  .ftr-wc-checkid-msg.is-error { background:#311c20; border-color:#633037; }
}
@media (prefers-reduced-motion: reduce) { .ftr-wc-fields * { transition: none !important; animation-duration: .001ms !important; } }