/* ============== Base controls & layout ============== */
.ptk-select{ margin:0 8px 8px 0; }
.ptk-leaf-top{ display:flex; align-items:center; gap:12px; }
.ptk-sep{ border:0; border-top:1px solid #333; margin:16px 0; }
.ptk-age.overdue{ background:#a00; color:#fff; padding:2px 6px; border-radius:3px; }
.ptk-thumb { width:25%; }
.ptk-leaf-panel { padding: 10px !important; }
/* Tables */
.ptk-cart-table{ width:100%; border-collapse:collapse; margin-top:8px; }
.ptk-cart-table th, .ptk-cart-table td{ border-bottom:1px solid #333; padding:8px; text-align:left; }
.ptk-cart-table td:last-child{ text-align:center; width:70px; } /* remove col */

/* General spacing/padding for plugin sections */
.ptk-stage-picker, .ptk-cart-table, .ptk-req-table, .ptk-req-details{
  padding:15px; border-spacing:10px;
}

/* User fields */
.ptk-user-fields label{ display:block; margin:10px 0 6px; color:#eee; }
.ptk-user-fields input, .ptk-user-fields select{ display:block; width:100%; max-width:520px; }

/* Dropdowns: dark theme & content width */
.ptk-select, select.ptk-select, .ptk-user-fields select{
  background-color:#111; color:#fff; border:1px solid #444; padding:4px 8px;
  width:auto; max-width:100%;
}
.ptk-select option{ background-color:#111; color:#fff; }

/* Thumbnails keep aspect */
.ptk-cart-table img, .ptk-req-table img{
  width:auto; height:60px; max-width:100px; object-fit:contain;
}

/* ============== Responsive stage selects row (top of page) ============== */
.ptk-selects{
  display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
  align-items:center !important; gap:10px !important;
  padding: 10px !important;
}
.ptk-selects > select.ptk-select{
  display:block !important; width:auto !important; max-width:none !important;
  min-width:150px !important; margin:0 !important; padding-top:0 !important; padding-bottom:0 !important;
  line-height:1.2 !important; height:38px !important; box-sizing:border-box !important;
  vertical-align:middle !important; position:static !important; transform:none !important;
}

/* ============== Tip dropdown inside cart table (matches other pulldowns) ============== */
.ptk-cart-table .ptk-tip{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  width:auto !important;            /* don’t stretch across the cell */
  max-width:none !important;
}

.ptk-cart-table .ptk-tip select.ptk-tip-percent{
  display:inline-block !important;  /* beat theme block + 100% */
  width:auto !important;
  max-width:none !important;
  min-width:140px !important;
  background-color:#111 !important;
  color:#fff !important;
  border:1px solid #444 !important;
  padding:4px 8px !important;
  line-height:1.2 !important;
  height:38px !important;
  box-sizing:border-box !important;
  vertical-align:middle !important;
}

.ptk-cart-table .ptk-tip .ptk-tip-display{
  white-space:nowrap !important;    /* keep “$0.00” next to the select */
  margin-left:4px !important;
}

/* If the theme wraps selects in helper spans/divs, don’t let them force width */
.ptk-cart-table .ptk-tip .elementor-field,
.ptk-cart-table .ptk-tip .elementor-shortcode,
.ptk-cart-table .ptk-tip .select-wrapper{
  display:inline-block !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
}

/* ============== Buttons (theme-match) ============== */
.ptk-btn,
.btn-ptk,
.ptk-go-checkout,
button.ptk-btn,
button.btn-ptk,
a.ptk-btn,
a.btn-ptk {
  background:#ffcc00 !important;
  color:#111 !important;
  border:1px solid #b38f00 !important;
  border-radius:6px !important;
  padding:6px 12px !important;
  display:inline-block !important;
  text-decoration:none !important;
  line-height:1.2 !important;
  box-shadow:0 2px 0 rgba(0,0,0,.35) !important;
  cursor:pointer !important;
  margin:6px !important;            /* consistent space around buttons */
}

.ptk-btn:hover,
.btn-ptk:hover,
.ptk-go-checkout:hover,
button.ptk-btn:hover,
button.btn-ptk:hover,
a.ptk-btn:hover,
a.btn-ptk:hover {
  background:#ffd633 !important;
  color:#000 !important;
}
.ptk-btn:focus-visible,
.btn-ptk:focus-visible,
.ptk-go-checkout:focus-visible {
  outline:2px solid #ffd633 !important;
  outline-offset:2px !important;
}

/* Proceed to Checkout button presence */
.ptk-go-checkout{ font-weight:600 !important; margin-top:10px !important; }

/* Stage buttons (if your picker renders buttons) */
.ptk-stages{ display:flex; gap:10px; flex-wrap:wrap; }
.ptk-stages .ptk-btn.stage{ min-width:120px; }

/* ============== Remove “X” button (centered square) ============== */
.ptk-cart-table td:last-child a,
.ptk-cart-table td:last-child button,
.ptk-remove,
button.ptk-remove,
a.ptk-remove {
  width:32px !important; height:32px !important;
  min-width:32px !important; min-height:32px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#ffcc00 !important;
  color:#111 !important;
  border:1px solid #b38f00 !important;
  border-radius:6px !important;
  font-weight:700 !important;
  line-height:1 !important;
  padding:0 !important;
  text-decoration:none !important;
  box-shadow:0 2px 0 rgba(0,0,0,.35) !important;
  margin:0 auto !important;
}
.ptk-cart-table td:last-child a:hover,
.ptk-cart-table td:last-child button:hover,
.ptk-remove:hover {
  background:#ffd633 !important;
  color:#000 !important;
}

/* ============== Requests list toggle arrow ============== */
.ptk-req-row{ cursor:pointer; position:relative; }
.ptk-req-row::after{ content:'▶'; margin-left:8px; font-size:12px; color:#ffcc00; }
.ptk-req-row.active::after{ content:'▼'; }

/* --- Tip dropdown: bullet-proof width/height override (append at end) --- */
.ptk-cart-table td select.ptk-tip-percent,
.ptk-cart-table td .ptk-tip select.ptk-tip-percent,
.ptk-cart-table td .ptk-tip-percent,
table.ptk-cart-table td select[name="ptk_tip_percent"] {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 140px !important;
  height: 38px !important;
  line-height: 1.2 !important;
  padding: 4px 8px !important;
  background-color: #111 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}
/* --- TIP select: match other pulldowns (closed state), stop 100% width --- */
.ptk-cart-table .ptk-tip select.ptk-tip-percent,
.ptk-cart-table td select.ptk-tip-percent,
.ptk-cart-table td .ptk-tip-percent {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 140px !important;

  height: 38px !important;
  line-height: 1.2 !important;
  padding: 4px 34px 4px 8px !important; /* room for custom arrow */
  box-sizing: border-box !important;

  background-color: #111 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  border-radius: 6px !important;

  /* remove native styling quirks and use our arrow */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffcc00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 14px 14px !important;

  vertical-align: middle !important;
}

/* focus & hover to match theme */
.ptk-cart-table .ptk-tip select.ptk-tip-percent:hover,
.ptk-cart-table .ptk-tip select.ptk-tip-percent:focus {
  border-color: #666 !important;
  outline: 2px solid #ffd633 !important;
  outline-offset: 0 !important;
}

/* ensure any wrapper around the tip select doesn't force full width */
.ptk-cart-table .ptk-tip,
.ptk-cart-table .ptk-tip .select-wrapper,
.ptk-cart-table .ptk-tip .elementor-field,
.ptk-cart-table .ptk-tip .elementor-shortcode {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* keep the $0.00 text snug next to the select */
.ptk-cart-table .ptk-tip .ptk-tip-display { white-space: nowrap !important; margin-left: 4px !important; }

.ptk-tip-percent { 
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 150px !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.2 !important;
  height: 38px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  position: static !important;
  transform: none !important;
  background-color: #111;
  color: #fff;
  border: 1px solid #444;
  padding: 4px 8px;
}

/* ===== Policy vignette modal ===== */
.ptk-policy-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;                 /* shown via jQuery .show() */
  z-index: 99999;                /* above Elementor/headers */
  /* Vignette overlay */
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.80) 100%);
  /* Fallback if gradients are altered by theme */
  background-color: rgba(0,0,0,0.7);
}

/* Center the modal content even if container is display:block (jQuery .show) */
.ptk-policy-modal .ptk-modal-content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: 860px;
  width: calc(100% - 32px);
  max-height: 85vh;
  overflow: auto;
  background: #fff;
  color: #222;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}

/* Body/content inside the modal */
.ptk-policy-modal .ptk-modal-body {
  line-height: 1.55;
}
.ptk-policy-modal .ptk-modal-body h1,
.ptk-policy-modal .ptk-modal-body h2,
.ptk-policy-modal .ptk-modal-body h3 {
  margin: 0.6em 0 0.4em;
}
.ptk-policy-modal .ptk-modal-body p {
  margin: 0.6em 0;
}

/* Close button alignment on small screens */
.ptk-policy-modal .ptk-close-policy {
  margin-top: 16px !important;
}

/* Prevent background scroll while modal is open (toggle class in JS if you like) */
body.ptk-no-scroll { overflow: hidden; }

/* ============================================================
 * Vignette busy overlay (added)
 * ============================================================ */
.ptk-busy {
  position: fixed;
  inset: 0;
  display: none;                 /* toggled via jQuery fadeIn/Out */
  z-index: 2147483000;           /* above everything */
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 100%);
  background-color: rgba(0,0,0,0.75); /* fallback */
}

.ptk-busy .ptk-busy-inner{
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  text-align:center;
  color:#fff;
  padding: 18px;
}

/* Spinner */
.ptk-spinner{
  width: 56px; height: 56px;
  margin: 0 auto 14px auto;
  border: 4px solid rgba(255,255,255,0.25);
  border-top-color: #ffcc00;         /* theme yellow */
  border-radius: 50%;
  animation: ptk-spin 0.9s linear infinite;
  box-shadow: 0 0 24px rgba(255,204,0,0.25);
}
@keyframes ptk-spin { to { transform: rotate(360deg); } }

/* Text */
.ptk-busy-text{
  font-weight:700;
  letter-spacing:.3px;
  color:#ffd633;                   /* brighter yellow for headline */
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.ptk-busy-sub{
  margin-top:4px;
  opacity:.85;
  font-size:.95em;
}

/* (optional) dim submit button while busy */
.ptk-submit.is-loading { opacity:.7; pointer-events:none; }
/* ===== Make the policy checkbox visible & tappable on mobile ===== */
.ptk-policy input.ptk-agree {
  /* Bigger tap target */
  width: 22px !important;
  height: 22px !important;
  margin-right: 8px !important;
  vertical-align: middle !important;

  /* Use theme color for the check/toggle in modern browsers */
  accent-color: #ffcc00 !important;

  /* Extra contrast in case the page background is light */
  border: 2px solid #b38f00 !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5) !important; /* dark edge on white bg */
}

/* Slightly larger on small screens */
@media (max-width: 640px) {
  .ptk-policy input.ptk-agree {
    width: 24px !important;
    height: 24px !important;
  }
}

/* Fallback for browsers that don't support accent-color (older iOS/Android) */
@supports not (accent-color: auto) {
  .ptk-policy input.ptk-agree {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #111 !important;                /* unchecked bg */
  }
  .ptk-policy input.ptk-agree:checked {
    background: #ffcc00 !important;             /* checked bg */
    border-color: #b38f00 !important;
    /* draw a dark checkmark */
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M9.0 16.2L4.8 12l-1.4 1.4L9.0 19 20.6 7.4 19.2 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 16px 16px !important;
  }
}
/* ===== Right-align Submit Application button ===== */
.ptk-submit {
  display: inline-block !important;
  float: right !important;
  margin-top: 10px !important;
  margin-right: 4px !important; /* small offset from edge */
}

/* Ensure parent doesn’t center it back */
.ptk-cart .ptk-user-fields,
.ptk-cart form {
  text-align: right !important;
}

/* Optional: prevent weird wrapping on narrow screens */
@media (max-width: 640px) {
  .ptk-submit {
    float: none !important;
    display: block !important;
    margin: 12px auto !important; /* centered on mobile */
    text-align: center !important;
  }
}