/* File: public_html/assets/css/pages/shared/tickets.modal.css */
/* ServexHub — Unified Tickets/Reports Modal (v1)
   - No inline CSS
   - Uses #svx-modal-root (global)
   - ✅ Responsive (desktop + mobile)
   - ✅ Guest mode compatible (order info box may be hidden)
*/

/* -----------------------------
   Base / Reset-ish
----------------------------- */
#svx-modal-root .svx-tm-backdrop,
#svx-modal-root .svx-tm-modal,
#svx-modal-root .svx-tm-modal *{
  box-sizing: border-box;
}

/* Lock body scrolling when modal open */
.svx-tm-lock { overflow: hidden !important; }

/* Backdrop */
#svx-modal-root .svx-tm-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  padding: 16px;
}

/* Modal container */
#svx-modal-root .svx-tm-modal{
  width: min(760px, 96vw);
  max-height: min(86vh, 900px);
  display: flex;
  flex-direction: column;

  background: rgba(255,255,255,.94);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
  overflow: hidden;

  /* smoother on mobile */
  -webkit-overflow-scrolling: touch;
}

/* ===== Header (light blue) ===== */
#svx-modal-root .svx-tm-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;

  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);

  background: linear-gradient(180deg, rgba(231,244,255,.98), rgba(241,249,255,.92));
}

#svx-modal-root .svx-tm-title{
  font-size: 16px;
  font-weight: 900;
  margin: 0;
  color: rgba(0,0,0,.88);
  letter-spacing: .1px;
  line-height: 1.2;
}

/* Close button nicer */
#svx-modal-root .svx-tm-close{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,70,140,.18);
  background: rgba(255,255,255,.86);
  color: rgba(0,40,90,.95);
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 800;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space: nowrap;
}
#svx-modal-root .svx-tm-close:hover{
  background: #fff;
  box-shadow: 0 8px 18px rgba(0,60,130,.10);
}
#svx-modal-root .svx-tm-close:active{ transform: scale(.98); }

/* Body scroll area */
#svx-modal-root .svx-tm-body{
  padding: 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Grids */
#svx-modal-root .svx-tm-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Fields */
#svx-modal-root .svx-tm-field{
  min-width: 0; /* ✅ fix overflow in grid */
}

#svx-modal-root .svx-tm-field label{
  display:block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px;
  color: rgba(0,0,0,.85);
}

/* Inputs (unified heights + mobile friendly) */
#svx-modal-root .svx-tm-field input[type="text"],
#svx-modal-root .svx-tm-field input[type="email"],
#svx-modal-root .svx-tm-field input[type="tel"],
#svx-modal-root .svx-tm-field select,
#svx-modal-root .svx-tm-field textarea{
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.95);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
  font: inherit;
  color: rgba(0,0,0,.88);
}

/* prevent iOS zoom on focus */
@media (max-width: 720px){
  #svx-modal-root .svx-tm-field input[type="text"],
  #svx-modal-root .svx-tm-field input[type="email"],
  #svx-modal-root .svx-tm-field input[type="tel"],
  #svx-modal-root .svx-tm-field select,
  #svx-modal-root .svx-tm-field textarea{
    font-size: 16px;
  }
}

#svx-modal-root .svx-tm-field select{ cursor: pointer; }

#svx-modal-root .svx-tm-field textarea{
  min-height: 110px;
  resize: vertical;
}

/* Focus style (soft blue) */
#svx-modal-root .svx-tm-field input[type="text"]:focus,
#svx-modal-root .svx-tm-field input[type="email"]:focus,
#svx-modal-root .svx-tm-field input[type="tel"]:focus,
#svx-modal-root .svx-tm-field select:focus,
#svx-modal-root .svx-tm-field textarea:focus{
  border-color: rgba(0,110,230,.45);
  box-shadow: 0 0 0 4px rgba(0,110,230,.10);
}

/* Help text */
#svx-modal-root .svx-tm-help{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(0,0,0,.62);
  line-height: 1.35;
}

#svx-modal-root .svx-tm-row{ margin-top: 14px; }

#svx-modal-root .svx-tm-hr{
  border: 0;
  border-top: 1px dashed rgba(0,0,0,.14);
  margin: 14px 0;
}

/* -----------------------------
   ✅ Captcha styling (compatible + responsive)
----------------------------- */

/* Captcha question spacing (CSP friendly; replaces removed inline style) */
#svx-modal-root .svx-tm-help--captchaQ{
  margin-top: 6px;
  margin-bottom: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(0,90,190,.26);
  background: rgba(245,250,255,.72);
  color: rgba(0,40,90,.90);
}

#svx-modal-root .svx-tm-help--captchaQ b{
  font-weight: 900;
  color: rgba(0,40,90,.98);
}

/* captcha reload link */
#svx-modal-root [data-act="reload-captcha"]{
  color: rgba(0,80,170,.92);
  font-weight: 800;
  text-decoration: none;
}
#svx-modal-root [data-act="reload-captcha"]:hover{
  text-decoration: underline;
}

/* -----------------------------
   Badges
----------------------------- */
#svx-modal-root .svx-tm-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.08);
  font-size: 12px;
  color:#111;
  font-weight: 800;
  max-width: 100%;
  overflow: hidden;
}
#svx-modal-root .svx-tm-badge span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -----------------------------
   File input + UI
----------------------------- */
#svx-modal-root .svx-tm-files{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

/* Style the native file picker button */
#svx-modal-root .svx-tm-files input[type="file"]{
  width: 100%;
  max-width: 520px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(0,90,190,.30);
  background: rgba(245,250,255,.85);
  color: rgba(0,0,0,.78);
  cursor: pointer;
}

#svx-modal-root .svx-tm-files input[type="file"]:hover{
  border-color: rgba(0,90,190,.45);
  background: rgba(240,248,255,.95);
}

/* Modern browsers */
#svx-modal-root .svx-tm-files input[type="file"]::file-selector-button{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,90,190,.22);
  background: rgba(255,255,255,.95);
  color: rgba(0,55,120,.95);
  border-radius: 12px;
  padding: 8px 12px;
  margin-inline-end: 10px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
#svx-modal-root .svx-tm-files input[type="file"]::file-selector-button:hover{
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,60,130,.12);
}
#svx-modal-root .svx-tm-files input[type="file"]::file-selector-button:active{
  transform: scale(.98);
}

/* WebKit fallback */
#svx-modal-root .svx-tm-files input[type="file"]::-webkit-file-upload-button{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,90,190,.22);
  background: rgba(255,255,255,.95);
  color: rgba(0,55,120,.95);
  border-radius: 12px;
  padding: 8px 12px;
  margin-inline-end: 10px;
  font-weight: 900;
  cursor: pointer;
}

/* File UI wrapper */
#svx-modal-root .svx-tm-file-ui{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  min-width: 0;
}

/* Chips: one line on desktop (scroll horizontally) */
#svx-modal-root .svx-tm-filechips{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

#svx-modal-root .svx-tm-filechips.is-empty{
  display: none;
}

/* Chip */
#svx-modal-root .svx-tm-chip{
  flex: 0 0 auto;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.82);
  font-weight: 800;
  font-size: 12px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Progress (hidden by default) */
#svx-modal-root .svx-tm-progress{
  display: none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,90,190,.18);
  background: rgba(245,250,255,.88);
}

#svx-modal-root .svx-tm-progress.is-show{
  display: block;
}

#svx-modal-root .svx-tm-progress-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

#svx-modal-root .svx-tm-progress-label{
  font-weight: 900;
  font-size: 12px;
  color: rgba(0,55,120,.95);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ✅ animated dots */
#svx-modal-root .svx-tm-dots{
  display: inline-flex;
  gap: 3px;
  align-items: center;
  transform: translateY(1px);
}
#svx-modal-root .svx-tm-dots i{
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(0,55,120,.85);
  display: inline-block;
  opacity: .25;
  animation: svxTmDot 1s infinite ease-in-out;
}
#svx-modal-root .svx-tm-dots i:nth-child(2){ animation-delay: .15s; }
#svx-modal-root .svx-tm-dots i:nth-child(3){ animation-delay: .30s; }

@keyframes svxTmDot{
  0%   { transform: translateY(0);   opacity: .25; }
  40%  { transform: translateY(-3px);opacity: .95; }
  80%  { transform: translateY(0);   opacity: .25; }
  100% { transform: translateY(0);   opacity: .25; }
}

#svx-modal-root .svx-tm-progress-pct{
  font-weight: 900;
  font-size: 12px;
  color: rgba(0,0,0,.75);
}

#svx-modal-root .svx-tm-progress-bar{
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
}

#svx-modal-root .svx-tm-progress-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(0,90,190,.92);
  transition: width .12s ease;
}

/* -----------------------------
   Footer
----------------------------- */
#svx-modal-root .svx-tm-footer{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: rgba(250,250,250,.92);
}

/* Buttons */
#svx-modal-root .svx-tm-btn{
  appearance:none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  padding: 11px 14px;
  cursor:pointer;
  background: #fff;
  color:#111;
  font-weight: 900;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  min-height: 42px; /* consistent touch target */
}

#svx-modal-root .svx-tm-btn:hover{
  background:#f6f6f6;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
#svx-modal-root .svx-tm-btn:active{ transform: scale(.99); }

/* Primary */
#svx-modal-root .svx-tm-btn-primary{
  border-color: rgba(0,90,190,.25);
  background: rgba(0,90,190,.92);
  color: #fff;
}
#svx-modal-root .svx-tm-btn-primary:hover{
  background: rgba(0,80,170,.96);
}

/* Error box */
#svx-modal-root .svx-tm-error{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 0, 0, .06);
  border: 1px solid rgba(255, 0, 0, .18);
  color: #b00000;
  font-weight: 800;
  margin-top: 10px;
  display:none;
  line-height: 1.35;
}
#svx-modal-root .svx-tm-error.is-show{ display:block; }

/* Disabled state (keep opacity same; just block interactions) */
#svx-modal-root .svx-tm-disabled{
  pointer-events: none;
}

/* ✅ Busy visual: not transparent, just muted */
#svx-modal-root .svx-tm-modal.is-busy{
  background: rgba(247,248,250,.98);
}
#svx-modal-root .svx-tm-modal.is-busy .svx-tm-body{
  filter: grayscale(.18) saturate(.90);
}
#svx-modal-root .svx-tm-modal.is-busy .svx-tm-footer{
  background: rgba(245,246,248,.98);
}

/* -----------------------------
   ✅ Responsive tweaks
----------------------------- */
@media (max-width: 720px){
  #svx-modal-root .svx-tm-backdrop{ padding: 10px; }

  #svx-modal-root .svx-tm-modal{
    width: 96vw;
    max-height: 92vh;
    border-radius: 16px;
  }

  #svx-modal-root .svx-tm-body{ padding: 12px; }
  #svx-modal-root .svx-tm-grid{ grid-template-columns: 1fr; }

  /* chips become vertical list */
  #svx-modal-root .svx-tm-filechips{
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: visible;
  }
  #svx-modal-root .svx-tm-chip{
    max-width: 100%;
    border-radius: 12px;
  }

  /* footer stacked */
  #svx-modal-root .svx-tm-footer{
    padding: 12px;
    gap: 8px;
    flex-direction: column-reverse;
    align-items: stretch;
  }
  #svx-modal-root .svx-tm-btn{ width: 100%; }
}

/* Smaller phones (extra polish) */
@media (max-width: 420px){
  #svx-modal-root .svx-tm-title{ font-size: 15px; }
  #svx-modal-root .svx-tm-close{ padding: 7px 10px; }

  #svx-modal-root .svx-tm-field input[type="text"],
  #svx-modal-root .svx-tm-field input[type="email"],
  #svx-modal-root .svx-tm-field input[type="tel"],
  #svx-modal-root .svx-tm-field select,
  #svx-modal-root .svx-tm-field textarea{
    padding: 10px 11px;
    border-radius: 12px;
  }
}