:root {
    --novahosting-navy: #082d3a;
    --novahosting-teal: #00766f;
    --novahosting-orange: #ff4f25;
    --novahosting-orange-dark: #e63f17;
    --novahosting-border: #dfe7eb;
    --novahosting-muted: #687785;
    --novahosting-soft: #f6f9fa;
}

.novahosting-ticket-form { margin: 10px 0 36px; }
.novahosting-ticket-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.novahosting-ticket-card,
.novahosting-ticket-info-card { background: #fff; border: 1px solid var(--novahosting-border); border-radius: 12px; box-shadow: 0 10px 30px rgba(8,45,58,.06); }
.novahosting-ticket-card { padding: 26px; }
.novahosting-ticket-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.novahosting-ticket-heading-icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: #fff1ed; color: var(--novahosting-orange); font-size: 22px; flex: 0 0 48px; }
.novahosting-ticket-heading h1 { margin: 0 0 3px; color: var(--novahosting-navy); font-size: 26px; font-weight: 700; }
.novahosting-ticket-heading p { margin: 0; color: var(--novahosting-muted); }

.novahosting-ticket-progress { display: flex; align-items: center; margin: 0 0 28px; }
.novahosting-ticket-progress-step { display: flex; align-items: center; gap: 9px; white-space: nowrap; color: #8a969f; font-size: 13px; }
.novahosting-ticket-progress-step span { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #aab6bd; display: inline-flex; align-items: center; justify-content: center; background: #fff; font-weight: 700; }
.novahosting-ticket-progress-step.is-active { color: var(--novahosting-orange); }
.novahosting-ticket-progress-step.is-active span { background: var(--novahosting-orange); color: #fff; border-color: var(--novahosting-orange); }
.novahosting-ticket-progress-step.is-complete { color: #62717b; }
.novahosting-ticket-progress-step.is-complete span { color: var(--novahosting-orange); border-color: var(--novahosting-navy); }
.novahosting-ticket-progress-line { height: 1px; background: #b8c3c9; flex: 1; min-width: 28px; margin: 0 14px; }
.novahosting-ticket-progress-line.is-active { background: var(--novahosting-orange); }

.novahosting-ticket-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.novahosting-ticket-card .form-group { margin: 0; }
.novahosting-ticket-card label { color: #142d3b; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.novahosting-ticket-card .required { color: var(--novahosting-orange); }
.novahosting-ticket-card .optional { color: var(--novahosting-muted); font-weight: 500; }
.novahosting-ticket-card .form-control { min-height: 44px; border: 1px solid #cedae0; border-radius: 7px; box-shadow: none; color: #213a47; }
.novahosting-ticket-card .form-control:focus { border-color: var(--novahosting-orange); box-shadow: 0 0 0 3px rgba(255,79,37,.1); }
.novahosting-ticket-department-field,
.novahosting-ticket-message-field,
.novahosting-ticket-upload-field { grid-column: 1 / -1; }
.novahosting-ticket-message-field textarea { min-height: 260px; resize: vertical; }
.novahosting-ticket-message-field .md-editor,
.novahosting-ticket-message-field .markdown-editor { width: 100%; }
.novahosting-ticket-message-field small { display: block; color: var(--novahosting-muted); margin-top: 7px; }

.novahosting-ticket-upload-field { position: relative; }
.novahosting-upload-zone { min-height: 150px; border: 1px dashed #aebdc5 !important; border-radius: 8px; background: #fbfcfd; display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 22px; cursor: pointer; transition: .2s ease; }
.novahosting-upload-zone:hover { border-color: var(--novahosting-orange) !important; background: #fff8f5; }
.novahosting-upload-zone i { font-size: 28px; color: var(--novahosting-orange); margin-bottom: 12px; }
.novahosting-upload-zone strong { color: #203946; font-size: 14px; margin-bottom: 5px; }
.novahosting-upload-zone span,
.novahosting-upload-zone small { color: var(--novahosting-muted); font-size: 12px; font-weight: 400; }
.novahosting-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.novahosting-add-attachment { padding: 8px 0 0; color: var(--novahosting-teal); font-size: 12px; }

.novahosting-ticket-custom-fields { margin-top: 18px; }
.novahosting-ticket-custom-fields .row { margin-left: -10px; margin-right: -10px; }
.novahosting-ticket-custom-fields [class*="col-"] { padding-left: 10px; padding-right: 10px; }
.novahosting-ticket-captcha { margin: 22px 0 10px; text-align: center; }
.novahosting-ticket-actions { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--novahosting-border); display: flex; justify-content: space-between; gap: 12px; }
.novahosting-btn-primary,
.novahosting-btn-secondary { min-height: 44px; border-radius: 7px; padding: 11px 18px; font-weight: 700; }
.novahosting-btn-primary { color: #fff !important; background: var(--novahosting-orange); border: 1px solid var(--novahosting-orange); }
.novahosting-btn-primary:hover { background: var(--novahosting-orange-dark); border-color: var(--novahosting-orange-dark); color: #fff !important; }
.novahosting-btn-secondary { color: #29424f; background: #fff; border: 1px solid #cad5db; }
.novahosting-btn-secondary:hover { border-color: var(--novahosting-navy); color: var(--novahosting-navy); }

.novahosting-ticket-sidebar { display: grid; gap: 18px; }
.novahosting-ticket-info-card { padding: 22px; }
.novahosting-ticket-info-title { display: flex; gap: 13px; align-items: center; }
.novahosting-ticket-info-title > span { display: inline-flex; width: 48px; height: 48px; flex: 0 0 48px; align-items: center; justify-content: center; border-radius: 50%; background: #eef3f4; color: #5f737e; font-size: 21px; }
.novahosting-ticket-info-title small { color: #263f4c; font-size: 12px; font-weight: 700; }
.novahosting-ticket-info-title h2 { margin: 3px 0 0; color: var(--novahosting-navy); font-size: 16px; font-weight: 700; }
.novahosting-ticket-info-card p { color: var(--novahosting-muted); font-size: 13px; line-height: 1.65; margin: 16px 0 0; }
.novahosting-ticket-tips h2 { color: var(--novahosting-navy); font-size: 17px; margin: 0 0 18px; }
.novahosting-ticket-tips h2 i { color: #f5a300; margin-right: 8px; }
.novahosting-ticket-tips ul { list-style: none; margin: 0; padding: 0; }
.novahosting-ticket-tips li { position: relative; padding-left: 24px; margin: 0 0 13px; color: #354b57; font-size: 13px; line-height: 1.5; }
.novahosting-ticket-tips li:last-child { margin-bottom: 0; }
.novahosting-ticket-tips li:before { content: "\f00c"; font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 1px; color: #008868; }

@media (max-width: 1199.98px) {
    .novahosting-ticket-layout { grid-template-columns: 1fr; }
    .novahosting-ticket-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .novahosting-ticket-card { padding: 18px; }
    .novahosting-ticket-grid { grid-template-columns: 1fr; }
    .novahosting-ticket-sidebar { grid-template-columns: 1fr; }
    .novahosting-ticket-progress { align-items: flex-start; }
    .novahosting-ticket-progress-step strong { display: none; }
    .novahosting-ticket-progress-line { margin: 15px 8px 0; }
    .novahosting-ticket-heading h1 { font-size: 22px; }
    .novahosting-ticket-actions { flex-direction: column-reverse; }
    .novahosting-ticket-actions .btn { width: 100%; }
}


/* v1.1 layout refinement: department first, message full width, attachments below */
@media (min-width: 768px) {
    .novahosting-ticket-department-field { max-width: 100%; }
    .novahosting-ticket-upload-field .novahosting-upload-zone { width: 100%; }
}

/* v1.2 layout: department + priority in one row, subject full width */
.novahosting-ticket-department-field,
.novahosting-ticket-priority-field { grid-column: auto; }
.novahosting-ticket-subject-field,
.novahosting-ticket-message-field,
.novahosting-ticket-upload-field { grid-column: 1 / -1; }

/* Reliable tip markers without depending on a Font Awesome font file */
.novahosting-ticket-tips li:before {
    content: "✓";
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    top: 0;
}

@media (max-width: 767.98px) {
    .novahosting-ticket-department-field,
    .novahosting-ticket-priority-field,
    .novahosting-ticket-subject-field { grid-column: 1; }
}