@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;750&display=swap");

:root{
  --blue-900:#071d4b;--blue-800:#0a2d67;--bg:#f5f7fa;--card:#fff;--text:#12223f;--muted:#5d6b85;--line:#d8dee8;--green:#76c043;
  --radius:14px;--shadow:0 6px 18px rgba(6,28,77,.07);
}
*{box-sizing:border-box}
body{font-family:"Montserrat",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-size:15px;line-height:1.45;font-style:normal}
.container{max-width:1180px;margin:0 auto;padding:0 18px}

/* Закрепляем шапку у верхнего края, чтобы меню оставалось доступным при прокрутке. */
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(120deg,#04153d,#082761 55%,#04153d);color:#fff;min-height:64px;display:flex;align-items:center;box-shadow:0 4px 14px rgba(4,21,61,.22)}
.nav-wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;width:100%}
.brand{color:#fff;text-decoration:none;display:flex;align-items:center;gap:10px}
/* Текстовый логотип в шапке без дополнительного brand-mark. */
.brand-text{font-weight:750;letter-spacing:.1px;font-size:18px}.brand-text span{color:var(--green)}
.main-nav{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.main-nav a,.main-nav summary{position:relative;color:#e2e8f0;text-decoration:none;padding:8px 4px;font-size:14px}
.main-nav a::after,.main-nav summary::after{content:"";position:absolute;left:4px;right:4px;bottom:1px;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:.25s}
.main-nav a:hover,.main-nav summary:hover{color:#fff}.main-nav a:hover::after,.main-nav a.active::after,.main-nav summary:hover::after,.contact-dropdown[open] summary::after{transform:scaleX(1)}
/* Выпадающий список прямой связи открывается по клику и показывает доступные мессенджеры. */
.contact-dropdown{position:relative}
.contact-dropdown summary{display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;user-select:none}
.contact-dropdown summary::-webkit-details-marker{display:none}
.contact-dropdown summary::before{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transition:transform .2s ease}
.contact-dropdown[open] summary::before{transform:rotate(180deg)}
.contact-dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:80;min-width:210px;padding:8px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:#fff;box-shadow:0 16px 36px rgba(4,21,61,.22)}
.contact-dropdown-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#12223f;font-weight:600;white-space:nowrap}
.contact-dropdown-menu a::after{display:none}
.contact-dropdown-menu a:hover{background:#f3fbef;color:#0b1f46}
.contact-icon{width:22px;height:22px;flex:0 0 auto;object-fit:contain}

/* Главный контейнер страницы занимает свободное место, чтобы подвал держался у нижней границы коротких страниц. */
/* Небольшие внутренние отступы отделяют основной контент от краев экрана со всех сторон. */
main.container{padding:12px 18px 18px;flex:1;width:100%}
.card{background:var(--card);border:1px solid #ecf0f5;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin:16px 0}
/* Секционные карточки на главной странице получают небольшой верхний отступ между блоками. */
.card.section-card{margin:10px 0 0}
h1,h2,h3,h4{line-height:1.2}
h1{font-size:clamp(28px,4vw,44px)}
h2{font-size:clamp(22px,3vw,32px)}
h3{font-size:clamp(20px,2.4vw,28px);margin:0;color:#0b1f46}
h4{font-size:clamp(17px,2vw,22px)}
.section-card>h3{margin-bottom:6px}
.section-accent{display:block;width:44px;height:3px;border-radius:999px;background:var(--green);margin-bottom:12px}

/* Компактный hero-блок без собственной подложки и внутренних отступов. */
.hero-card{position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:12px;min-height:320px;padding:0;background:none}
.hero-content h1{font-size:clamp(36px,5.4vw,62px);line-height:1.04;margin:0 0 4px;color:#071d4b}
.hero-content h3{font-size:clamp(22px,3vw,34px);margin:0 0 8px}
.hero-content p{font-size:clamp(15px,1.8vw,20px);line-height:1.5;color:var(--muted);max-width:620px;margin:0}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
/* Главные CTA-кнопки в hero-карточке уменьшены на 30% вместе с текстом и иконками. */
.hero-actions .btn{gap:8px;padding:10px 15px;border-radius:11px;font-size:15px}
.hero-actions .btn svg{width:17px;height:17px}

/* Унификация кнопок на всех публичных и админских страницах. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;padding:9px 14px;border-radius:10px;font-weight:600;border:1px solid #9fb0cd;background:#fff;color:#1c2d50;cursor:pointer;font-size:14px;line-height:1.2}
.btn svg{width:16px;height:16px;fill:currentColor}
.btn-primary{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 5px 12px rgba(118,192,67,.3)}
.btn-outline,.btn.secondary{background:#fff;color:#1c2d50;border-color:#9fb0cd}

/* Единый эффект наведения для кнопок и кликабельных карточек. */
.btn,.quick-item,.choice-card,.step-card,.admin-link,.priority-btn{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease,color .2s ease}
.btn:hover,.quick-item:hover,.choice-card:hover,.step-card:hover,.admin-link:hover,.priority-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(7,29,75,.14)}

/* Правая hero-иллюстрация увеличена и прижата к правому краю блока. */
.hero-decor{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;min-height:260px;pointer-events:none}
.hero-decor img{display:block;width:min(100%,560px);height:auto;object-fit:contain}

.quick-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.quick-item{background:#fff;border:1px solid #ecf0f5;border-radius:12px;padding:12px;min-height:102px;text-decoration:none;color:#0d1e42;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;box-shadow:var(--shadow);font-size:15px;line-height:1.25;text-align:center}
/* Иконки и подписи быстрых карточек стартуют от верхнего края карточки. */
.quick-item img{width:26px;height:26px;object-fit:contain;flex:0 0 auto}
.quick-item span{display:block}

.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;position:relative}
.step-card{position:relative;background:#fff;border:1px solid #ecf0f5;border-radius:14px;padding:16px 14px;box-shadow:var(--shadow)}
.step-card:not(:last-child)::after{content:"→";position:absolute;right:-11px;top:44%;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;z-index:1;font-size:12px}
.step-num{font-size:32px;font-weight:700;color:#b6dd99;line-height:1}
.step-card h4{margin:0 0 6px}
.step-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
/* Ссылка внутри карточки статуса: акцентируем зелёным и подчёркиванием. */
.step-link{color:var(--green);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.step-link:hover{color:#5ea331}


/* Подвал находится в обычном потоке: не перекрывает контент и появляется после него при длинной странице. */
.site-footer{background:rgba(245,247,250,.95);border-top:1px solid #dde5f0}
.footer-wrap{display:flex;justify-content:flex-end;padding:8px 18px}
.admin-link{font-size:13px;background:#fff;color:#11244b;text-decoration:none;padding:7px 12px;border-radius:10px;border:1px solid #c7d2e5;display:inline-flex;align-items:center;gap:8px}
.admin-link svg{width:14px;height:14px;fill:currentColor}

/* Современная форма новой заявки: общая карточка, секции и единые поля. */
.ticket-page-head{margin:10px 0 14px}
.ticket-page-head h1{margin:0 0 8px;color:#071d4b;font-size:clamp(28px,4vw,42px)}
.ticket-page-head .section-accent{width:58px;margin-bottom:10px}
.ticket-page-head p{margin:0;color:var(--muted);font-size:16px}
.ticket-form-card{background:#fff;border:1px solid #ecf0f5;border-radius:20px;padding:28px 30px;box-shadow:0 16px 38px rgba(6,28,77,.09);margin:16px 0 24px}
.ticket-form{display:flex;flex-direction:column;gap:22px}
.ticket-section{border:1px solid #e8eef6;border-radius:16px;padding:18px;background:linear-gradient(180deg,#fff,#fbfdff)}
.ticket-section-main{padding:20px}
.ticket-section-title{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:#0b1f46}
.ticket-section-title.compact{margin-bottom:12px}
.ticket-section-title h2{margin:0;font-size:clamp(17px,2vw,21px);font-weight:700}
/* Иконки заголовков секций показываются без рамок и декоративных подложек. */
.ticket-section-icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;object-fit:contain;flex:0 0 auto}
.ticket-main-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:18px;align-items:stretch}
.ticket-fields-stack,.ticket-description-field{display:flex;flex-direction:column}
.ticket-description-field textarea{flex:1;min-height:220px;resize:vertical}
.ticket-extra-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field-label{display:block;margin:0 0 6px;color:#20314f;font-weight:600;font-size:14px}
input,select,textarea{width:100%;padding:12px 14px;margin:0 0 14px;border:1px solid #d7e0ed;border-radius:12px;font-size:14px;background:#f8fafc;color:#12223f;font-family:inherit;outline:none;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
input::placeholder,textarea::placeholder{color:#8997ad}
input:focus,select:focus,textarea:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 4px rgba(118,192,67,.15)}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"],.is-invalid{border-color:#ef4444;background:#fff7f7}
.field-error{display:block;margin:-8px 0 12px;color:#dc2626;font-size:12px;font-weight:500}
textarea{min-height:140px}

/* Админская панель: фильтры не сжимаются, а служебные кнопки вынесены отдельно. */
.admin-toolbar{display:flex;flex-direction:column;gap:14px}
.admin-filter-row{display:grid;grid-template-columns:minmax(260px,1.4fr) minmax(180px,.8fr) minmax(260px,1fr) minmax(190px,.8fr) auto;gap:12px;align-items:end}
.admin-filter-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.admin-filter-field span{font-size:12px;font-weight:700;color:#5d6b85;letter-spacing:.02em;text-transform:uppercase}
.admin-filter-field input,.admin-filter-field select{min-height:44px;margin:0;background:#fff;white-space:normal;text-overflow:clip}
.admin-search-btn{min-height:44px;margin-bottom:0;padding-left:18px;padding-right:18px}
.admin-action-row{display:flex;gap:10px;flex-wrap:wrap;padding-top:14px;border-top:1px solid #e8eef6}
.table-wrap{overflow-x:auto;margin-bottom:24px;border-radius:var(--radius);box-shadow:var(--shadow)}
.sort-link{color:#11244b;text-decoration:none;font-weight:700;white-space:nowrap}
.sort-link:hover{color:var(--green)}
table{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
th,td{padding:7px;border:1px solid #e2e8f0;text-align:left;vertical-align:top}
.small{font-size:12px;color:#64748b}
/* Карточки "Мои заявки" заменяют широкую таблицу на читаемую адаптивную сетку. */
.my-tickets-results{margin:18px 0 24px}
.my-tickets-head{background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #ecf0f5;border-radius:20px;padding:18px 20px;box-shadow:var(--shadow);margin-bottom:14px}
.my-tickets-head h2{margin:0 0 6px;color:#071d4b;font-size:clamp(22px,3vw,30px)}
.my-tickets-head p{margin:0;color:var(--muted)}
.my-tickets-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.my-ticket-card{display:flex;flex-direction:column;gap:14px;min-width:0;background:#fff;border:1px solid #e8eef6;border-radius:18px;padding:18px;box-shadow:0 10px 26px rgba(6,28,77,.08)}
.my-ticket-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid #edf2f7}
.my-ticket-card__label,.my-ticket-card__comment span{display:block;margin-bottom:4px;color:#64748b;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.my-ticket-card__number{display:block;color:#071d4b;font-size:clamp(20px,2.5vw,28px);line-height:1.05;overflow-wrap:anywhere}
.my-ticket-card__status{display:inline-flex;align-items:center;justify-content:center;max-width:48%;padding:7px 11px;border-radius:999px;background:#f3fbef;color:#23621b;border:1px solid #c7eab8;font-size:13px;font-weight:700;text-align:center;overflow-wrap:anywhere}
.my-ticket-card__subject{margin:0;color:#0b1f46;font-size:clamp(18px,2vw,22px);line-height:1.25;overflow-wrap:anywhere}
.my-ticket-card__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.my-ticket-card__meta div{min-width:0;border:1px solid #edf2f7;border-radius:12px;background:#f8fafc;padding:10px 12px}
.my-ticket-card__meta dt{margin:0 0 4px;color:#64748b;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.my-ticket-card__meta dd{margin:0;color:#172845;font-weight:600;overflow-wrap:anywhere}
.my-ticket-card__comment{margin-top:auto;border-top:1px solid #edf2f7;padding-top:12px}
.my-ticket-card__comment p{margin:0;color:#334155;overflow-wrap:anywhere}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;margin:0}
.ticket-choice-grid{grid-template-columns:repeat(auto-fit,minmax(138px,1fr))}
.choice-card{border:1px solid #d7e0ed;background:#fff;border-radius:14px;padding:13px 10px;display:flex;min-height:86px;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;cursor:pointer;font-weight:600;color:#172845;text-align:center;line-height:1.25;box-shadow:0 4px 12px rgba(6,28,77,.04)}
.choice-card.active{border-color:var(--green);background:#f3fbef;box-shadow:0 10px 22px rgba(118,192,67,.16);color:#0f3e16}
/* Иконки и текст карточек типа обращения выровнены по верхнему краю. */
.choice-icon{width:30px;height:30px;object-fit:contain;display:block;flex:0 0 auto}
.choice-card span{display:block}
.priority-buttons{display:flex;flex-wrap:wrap;gap:8px}
.priority-btn{border:1px solid transparent;padding:8px 14px;border-radius:999px;cursor:pointer;opacity:1;font-size:13px;font-weight:700;color:#102245;background:#f1f5f9;box-shadow:none}
.priority-btn.active{color:#fff;box-shadow:0 8px 16px rgba(15,23,42,.12)}
.priority-btn.low{background:#e7f8df;color:#23621b;border-color:#c7eab8}.priority-btn.low.active{background:#42a837;color:#fff;border-color:#42a837}
.priority-btn.normal{background:#eef2f7;color:#45556d;border-color:#d7e0ea}.priority-btn.normal.active{background:#64748b;color:#fff;border-color:#64748b}
.priority-btn.high{background:#fff2df;color:#a34d00;border-color:#ffd8a8}.priority-btn.high.active{background:#f97316;color:#fff;border-color:#f97316}
.priority-btn.critical{background:#ffe8e8;color:#b91c1c;border-color:#ffc7c7}.priority-btn.critical.active{background:#dc2626;color:#fff;border-color:#dc2626}
.submit-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.ticket-submit-row{border-top:1px solid #e8eef6;padding-top:18px;margin-top:2px}
.remember-label{font-size:13px;color:#334155;display:inline-flex;align-items:center;gap:8px;line-height:1.35}
.remember-label input{width:16px;height:16px;margin:0;accent-color:var(--green);flex:0 0 auto}
.ticket-submit-btn{min-width:148px;border-radius:12px;padding:12px 18px}
/* Адаптив: планшеты — 2 карточки в ряд и компактные отступы. */
@media (max-width:1100px){
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps-grid{grid-template-columns:1fr}
  .step-card:not(:last-child)::after{display:none}
  .hero-card{grid-template-columns:1fr;min-height:auto}
  .hero-decor{width:100%;min-height:180px}
  .ticket-main-grid{grid-template-columns:1fr}
  .ticket-description-field textarea{min-height:180px}
  .admin-filter-row{grid-template-columns:repeat(2,minmax(220px,1fr))}
  .admin-search-btn{width:100%}
}

/* Адаптив: мобильные — кнопки в колонку, карточки по 1 в ряд, перенос длинного текста. */
@media (max-width:700px){
  .container{padding:0 14px}
  .site-header{min-height:auto;padding:10px 0}
  .nav-wrap{align-items:flex-start;flex-direction:column}
  .main-nav{gap:8px;align-items:flex-start}
  .main-nav a,.main-nav summary{padding:6px 2px}
  .contact-dropdown{width:100%}
  .contact-dropdown-menu{position:static;min-width:0;margin-top:6px;box-shadow:0 10px 24px rgba(4,21,61,.18)}
  .hero-actions,.submit-row{flex-direction:column;align-items:stretch}
  .footer-wrap{padding:8px 14px}
  .admin-filter-row{grid-template-columns:1fr}
  .admin-action-row{flex-direction:column}
  .admin-action-row .btn{width:100%}
  .hero-actions .btn,.submit-row .btn{width:100%}
  .quick-grid{grid-template-columns:1fr}
  .quick-item:nth-child(5){grid-column:auto}
  .grid,.ticket-extra-grid{grid-template-columns:1fr}
  .card{padding:16px}
  .ticket-form-card{border-radius:16px;padding:18px 14px}
  .ticket-form{gap:16px}
  .ticket-section,.ticket-section-main{padding:14px}
  .ticket-page-head p{font-size:14px}
  .ticket-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .choice-card{min-height:78px;padding:11px 8px}
  .ticket-submit-btn{width:100%}
  .my-tickets-grid{grid-template-columns:1fr}
  .my-tickets-head,.my-ticket-card{border-radius:16px;padding:16px}
  .my-ticket-card__header{flex-direction:column}
  .my-ticket-card__status{max-width:100%}
  .my-ticket-card__meta{grid-template-columns:1fr}
  p,h1,h2,h3,h4,td,th,a,button,span{overflow-wrap:anywhere}
}

@media (max-width:420px){
  .ticket-choice-grid{grid-template-columns:1fr}
}

em,i{font-style:normal !important}