.varesh-ticket-form-page {
    --vtf-blue: #0b72f6;
    --vtf-blue-dark: #075bc5;
    --vtf-navy: #061d42;
    --vtf-text: #102342;
    --vtf-muted: #71839d;
    --vtf-border: #dce8f7;
    color: var(--vtf-text);
}

.varesh-ticket-form-page *,
.varesh-ticket-form-page *::before,
.varesh-ticket-form-page *::after { box-sizing: border-box; }
body:has(.varesh-ticket-form-page) .main-header { display: none !important; }
body:has(.varesh-ticket-form-page) .main-body { padding-top: 24px !important; }

.vtf-hero { position: relative; min-height: 154px; margin-bottom: 18px; padding: 25px 28px; display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 18px; overflow: hidden; border: 1px solid rgba(55,145,248,.28); border-radius: 20px; color: #fff; background: radial-gradient(circle at 18% 10%,rgba(53,151,255,.28),transparent 30%),linear-gradient(115deg,#061d42 0%,#08336e 58%,#0b72f6 125%); box-shadow: 0 18px 44px rgba(5,42,91,.16); }
.vtf-hero::after { content: ''; position: absolute; inset: auto -42px -90px auto; width: 250px; height: 190px; border: 28px solid rgba(255,255,255,.055); border-radius: 50%; transform: rotate(-15deg); }
.vtf-hero svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vtf-hero-icon { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(255,255,255,.1); }
.vtf-hero-icon svg { width: 29px; height: 29px; }
.vtf-hero-copy { min-width: 0; }
.vtf-hero-copy > span { color: #8fc5ff; font-size: 11px; font-weight: 800; }
.vtf-hero h1 { margin: 3px 0 5px; color: #fff; font-size: 25px; font-weight: 900; line-height: 1.45; }
.vtf-hero p { margin: 0; color: #c6d9ee; font-size: 12px; line-height: 1.85; }

.vtf-steps { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.vtf-steps > div { min-width: 86px; min-height: 66px; padding: 9px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(2,24,55,.3); }
.vtf-steps b { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #a9c5e4; background: rgba(255,255,255,.09); font-size: 10px; }
.vtf-steps span { margin-top: 4px; color: #9fb9d5; font-size: 8px; white-space: nowrap; }
.vtf-steps .is-complete b,.vtf-steps .is-active b { color: #fff; background: #0b72f6; }
.vtf-steps .is-active { border-color: rgba(122,188,255,.48); background: rgba(11,114,246,.22); }
.vtf-steps .is-active span { color: #fff; }

.vtf-content .section { margin-bottom: 18px !important; }
.vtf-content .section-header { margin-bottom: 9px !important; padding: 0 4px !important; }
.vtf-content .section-title { margin: 0 !important; color: var(--vtf-text) !important; font-size: 16px !important; font-weight: 900 !important; }
.vtf-content .panel,
.vtf-content .open-ticket-information,
.vtf-content .open-ticket-form,
.vtf-content .panel-form-action { overflow: visible; border: 1px solid var(--vtf-border) !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 14px 40px rgba(29,78,140,.09) !important; }
.vtf-content .panel-body { padding: 22px !important; }
.vtf-content .control-label,
.vtf-content label { color: #263d5b !important; font-size: 10px !important; font-weight: 850 !important; }
.vtf-content .form-control { min-height: 45px !important; padding: 10px 13px !important; border: 1px solid #d8e4f2 !important; border-radius: 11px !important; color: #263e5b !important; background-color: #fbfdff !important; box-shadow: none !important; font-size: 10px !important; }
.vtf-content textarea.form-control { min-height: 160px !important; line-height: 1.8; resize: vertical; }
.vtf-content .form-control:focus { border-color: #8abfff !important; box-shadow: 0 0 0 3px rgba(11,114,246,.09) !important; }
.vtf-content .ticket-creator,
.vtf-content .dropdown-select-list > .dropdown-toggle,
.vtf-content .related-product-dropdown > .dropdown-toggle,
.vtf-content .ticket-priority-dropdown > .dropdown-toggle { min-height: 62px !important; padding: 10px 12px !important; border: 1px solid #d8e4f2 !important; border-radius: 12px !important; background: #fbfdff !important; box-shadow: none !important; }
.vtf-content .creator-avatar { border: 3px solid #e8f2ff; border-radius: 50%; }
.vtf-content .dropdown-icon,.vtf-content .item-icon { color: var(--vtf-blue) !important; background: #eaf4ff !important; }
.vtf-content .dropdown-menu { overflow: hidden; border: 1px solid #dce7f5 !important; border-radius: 12px !important; box-shadow: 0 14px 34px rgba(24,66,120,.14) !important; }
.vtf-content .dropdown-list-item { padding: 10px 12px !important; border-color: #edf2f8 !important; }
.vtf-content .dropdown-list-item:hover { background: #f1f7ff !important; }
.vtf-content .panel-tabs { border-bottom-color: #dfe9f5 !important; }
.vtf-content .panel-tabs > li > a { min-height: 40px; padding: 10px 14px !important; border-radius: 9px 9px 0 0; color: #627590 !important; font-size: 10px; font-weight: 800; }
.vtf-content .panel-tabs > li > a.active { color: var(--vtf-blue-dark) !important; background: #eaf4ff !important; }
.vtf-content #customFieldsContainer { padding: 20px; overflow: hidden; border: 1px solid var(--vtf-border); border-radius: 16px; background: #fff; box-shadow: 0 12px 32px rgba(29,78,140,.07); }
.vtf-content .section-custom-fields:has(#customFieldsContainer:empty) { display: none !important; }
.vtf-content .panel-form-action .panel-body { padding: 14px 18px !important; }
.vtf-content .form-actions { display: flex; align-items: center; justify-content: flex-start; gap: 9px; }
.vtf-content #openTicketSubmit { min-width: 170px; min-height: 45px; padding: 10px 18px !important; border: 0 !important; border-radius: 10px !important; color: #fff !important; background: linear-gradient(135deg,#1687ff,#0968df) !important; box-shadow: 0 10px 24px rgba(11,114,246,.2) !important; font-size: 11px !important; font-weight: 900 !important; }
.vtf-content .form-actions .btn-default { min-height: 45px; padding: 10px 18px !important; border: 1px solid #d5e2f1 !important; border-radius: 10px !important; color: #405774 !important; background: #fff !important; }
.vtf-content .alert { border-radius: 13px !important; }

@media (max-width: 991px) {
    .vtf-hero { grid-template-columns: 50px minmax(0,1fr); padding: 21px; }
    .vtf-hero-icon { width: 50px; height: 50px; }
    .vtf-steps { grid-column: 1/-1; width: 100%; }
    .vtf-steps > div { flex: 1; }
}

@media (max-width: 575px) {
    body:has(.varesh-ticket-form-page) .main-body { padding-top: 14px !important; }
    .vtf-hero { grid-template-columns: 43px minmax(0,1fr); gap: 12px; padding: 18px 15px; border-radius: 16px; }
    .vtf-hero-icon { width: 43px; height: 43px; border-radius: 12px; }
    .vtf-hero-icon svg { width: 23px; height: 23px; }
    .vtf-hero h1 { font-size: 20px; }
    .vtf-hero p { font-size: 11px; }
    .vtf-steps { gap: 5px; }
    .vtf-steps > div { min-width: 0; padding: 7px 5px; }
    .vtf-steps span { font-size: 7px; }
    .vtf-content .panel-body { padding: 15px !important; }
    .vtf-content .form-actions { align-items: stretch; flex-direction: column; }
    .vtf-content #openTicketSubmit,.vtf-content .form-actions .btn-default { width: 100%; }
}
