/* ══════════════════════════════════════════════════════════════════════════
   ticket-form.css  —  Ticket Form page specific styles
   .card/.btn override shared.css. Defines --fail/--warn locals.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Ticket form page ── */

/* Config notice overlay */
.cfg-notice{display:none;position:fixed;inset:0;z-index:800;background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);align-items:center;justify-content:center;}
.cfg-notice.show{display:flex;}
.cfg-notice-card{background:linear-gradient(145deg,#13131f,#0f0f1a);border:1px solid rgba(124,92,252,0.35);border-radius:20px;padding:2rem 2.25rem;max-width:420px;width:90%;text-align:center;animation:cfgNoticeIn 0.3s cubic-bezier(.16,1,.3,1) both;}
@keyframes cfgNoticeIn{from{transform:scale(0.92);opacity:0}to{transform:scale(1);opacity:1}}
.cfg-notice-icon{font-size:2.5rem;margin-bottom:0.75rem;}
.cfg-notice-title{font-size:1.05rem;font-weight:800;color:var(--text);margin-bottom:0.5rem;}
.cfg-notice-body{font-size:0.82rem;color:var(--text-dim);line-height:1.55;margin-bottom:1.25rem;}
.cfg-notice-body a{color:#a8b4ff;text-decoration:none;}
.cfg-notice-body a:hover{text-decoration:underline;}
.cfg-notice-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:0.65rem 1rem;border-radius:10px;border:1px solid rgba(124,92,252,0.4);background:rgba(124,92,252,0.15);color:#a8b4ff;font-size:0.88rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all 0.2s;}
.cfg-notice-btn:hover{background:rgba(124,92,252,0.25);border-color:rgba(124,92,252,0.65);}

/* Card */
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.75rem;width:100%;box-shadow:var(--shadow-card);position:relative;overflow:hidden;}
.card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent);}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* Form elements */
.form-group{margin-bottom:0.9rem;position:relative;}
.form-group label{display:block;margin-bottom:0.5rem;font-size:0.85rem;font-weight:600;color:var(--text-dim);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.field-hint{display:block;margin-top:0.35rem;font-size:0.7rem;color:#666;}

input[type="text"],input[type="email"],input[type="tel"],textarea{width:100%;padding:0.6rem 0.9rem;background:rgba(0,0,0,0.35);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:0.95rem;font-family:inherit;box-sizing:border-box;transition:all 0.2s ease;}
input:hover,textarea:hover{border-color:rgba(124,92,252,0.5);}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,92,252,0.2);}
input::placeholder,textarea::placeholder{color:#666;}
textarea{min-height:65px;resize:vertical;line-height:1.5;}

/* cs-btn / dropdown styles provided by shared.css */

/* Priority buttons */
.priority-group{display:flex;gap:0.75rem;width:100%;margin-top:0.5rem;}
.priority-option{flex:1;position:relative;min-width:0;cursor:pointer;}
.priority-label{display:flex;align-items:center;justify-content:center;width:100%;height:46px;background:rgba(0,0,0,0.35);border:1px solid var(--border);border-radius:12px;transition:all 0.2s ease;box-sizing:border-box;pointer-events:none;}
.priority-inner{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:8px;align-items:center;}
.priority-option:hover .priority-label{border-color:rgba(124,92,252,0.5);background:rgba(124,92,252,0.1);}
.priority-option.active .priority-label.priority-low{border-color:var(--green);background:rgba(76,175,80,0.15);box-shadow:0 0 15px rgba(76,175,80,0.25);}
.priority-option.active .priority-label.priority-medium{border-color:var(--warn);background:rgba(255,170,0,0.15);box-shadow:0 0 15px rgba(255,170,0,0.25);}
.priority-option.active .priority-label.priority-high{border-color:var(--fail);background:rgba(255,85,85,0.15);box-shadow:0 0 15px rgba(255,85,85,0.25);}
.priority-icon{font-size:1.25rem;line-height:1;}
.priority-text{font-size:0.8rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;line-height:1;white-space:nowrap;}
.priority-option.active .priority-label .priority-text{color:var(--text);}

/* File upload */
.file-upload-area{background:rgba(0,0,0,0.35);border:2px dashed var(--border);border-radius:8px;padding:0.85rem;text-align:center;cursor:pointer;transition:all 0.2s ease;}
.file-upload-area:hover{border-color:var(--accent);background:rgba(124,92,252,0.1);}
.file-upload-area.drag-over{border-color:var(--accent);background:rgba(124,92,252,0.15);}
.file-upload-icon{font-size:1.75rem;margin-bottom:0.5rem;}
.file-upload-text{color:var(--text-dim);font-size:0.85rem;}
.file-upload-text span{color:var(--accent);text-decoration:underline;}
.file-upload-hint{color:#555;font-size:0.7rem;margin-top:0.4rem;}
.file-list{margin-top:0.75rem;}
.file-item{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0.75rem;background:rgba(124,92,252,0.1);border-radius:6px;margin-bottom:0.5rem;}
.file-item-name{font-size:0.8rem;color:var(--text);flex:1;margin-right:0.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file-item-size{font-size:0.7rem;color:var(--text-dim);margin-right:0.5rem;}
.file-item-remove{background:none;border:none;color:var(--fail);cursor:pointer;font-size:1rem;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;}
.file-item-remove:hover{color:#ff7777;}

/* ── Submit button — subdued ghost-accent style (matches sign-on register) ── */
#submitBtn {
  width: 100%; padding: 0.75rem 1rem; margin-top: 0.75rem;
  background: linear-gradient(135deg, rgba(124,92,252,0.22), rgba(124,92,252,0.14));
  border: 1px solid rgba(124,92,252,0.45); border-radius: var(--radius-xs);
  color: var(--accent2); font-family: inherit; font-size: 0.88rem; font-weight: 700;
  cursor: pointer; transition: all 0.18s; box-shadow: 0 2px 12px rgba(124,92,252,0.14);
}
#submitBtn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(124,92,252,0.32), rgba(124,92,252,0.2));
  border-color: rgba(124,92,252,0.65);
}
#submitBtn:disabled { opacity: 0.5; cursor: not-allowed; }

.button-content{display:flex;align-items:center;justify-content:center;gap:0.5rem;}
.spinner{border:2px solid rgba(255,255,255,0.2);border-left-color:var(--text);border-radius:50%;width:16px;height:16px;animation:spin 0.7s linear infinite;display:none;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Messages & success */
.msg-box{margin-top:0.75rem;padding:0.6rem;border-radius:6px;text-align:center;font-size:0.85rem;}
.msg-box.error{background:rgba(255,85,85,0.1);color:var(--fail);border:1px solid rgba(255,85,85,0.3);}
.msg-box.success{background:rgba(76,175,80,0.1);color:var(--green);border:1px solid rgba(76,175,80,0.3);}
.hidden{display:none !important;}
.success-screen{text-align:center;padding:1.25rem 1rem;}
.success-icon{font-size:4rem;margin-bottom:1rem;animation:bounceIn 0.5s ease;}
@keyframes bounceIn{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
.success-title{font-size:1.5rem;font-weight:700;color:var(--green);margin-bottom:0.5rem;}
.ticket-id{font-size:1.8rem;font-weight:800;color:var(--text);background:rgba(124,92,252,0.2);padding:0.75rem 1.5rem;border-radius:8px;display:inline-block;margin:1rem 0;font-family:monospace;}
.success-message{color:var(--text-dim);font-size:0.9rem;line-height:1.6;margin-bottom:1.5rem;}

/* ── Submit Another button — same subdued style ── */
.btn-new-ticket {
  background: linear-gradient(135deg, rgba(124,92,252,0.22), rgba(124,92,252,0.14));
  border: 1px solid rgba(124,92,252,0.45); border-radius: var(--radius-xs);
  color: var(--accent2); padding: 0.75rem 2rem; font-size: 0.88rem; font-weight: 700;
  cursor: pointer; transition: all 0.18s; box-shadow: 0 2px 12px rgba(124,92,252,0.14);
}
.btn-new-ticket:hover {
  background: linear-gradient(135deg, rgba(124,92,252,0.32), rgba(124,92,252,0.2));
  border-color: rgba(124,92,252,0.65);
}

@media(max-width:500px){
  .card{padding:1.5rem;}
  .form-row{grid-template-columns:1fr;}
  .priority-group{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.5rem;}
}