/* =====================================================================
   osTicket Client Theme — "Slate" (flat, square, no rounded corners)
   Modern, flat, light theme built on top of Bootstrap 5.
   Only affects the CLIENT portal (assets/default is not used by /scp).
   ===================================================================== */

/* ---------- 1. Design tokens ---------- */
:root{
  --ost-primary:        #617f9f;   /* slate blue */
  --ost-primary-rgb:    97,127,159;
  --ost-primary-dark:   #4e6680;   /* darker slate for hover */
  --ost-primary-darker: #3d5064;   /* darkest slate for active/headlines */
  --ost-primary-light:  #f1f2f3;   /* very light slate tint for backgrounds */
  --ost-primary-soft:   #dbe4ea;   /* light slate for borders/soft fills */

  --ost-body-bg:        #ffffff;
  --ost-surface:        #ffffff;
  --ost-border:         #dfe2e6;
  --ost-border-strong:  #c7ccd3;

  --ost-text:           #3d5064;
  --ost-text-muted:     #3d5064;
  --ost-text-soft:      #93989f;

  --ost-success:        #4f8b6a;
  --ost-success-bg:     #edf6f0;
  --ost-danger:         #b8484f;
  --ost-danger-bg:      #faeced;
  --ost-warning:        #b07f34;
  --ost-warning-bg:     #fbf3e6;
  --ost-info:           #4f7f96;
  --ost-info-bg:        #eaf3f6;

  --ost-radius-sm:      0;
  --ost-radius:         0;
  --ost-radius-lg:      0;
  --ost-shadow-sm:      0 1px 2px rgba(30,33,48,.05);
  --ost-shadow:         0 2px 10px rgba(30,33,48,.07), 0 1px 2px rgba(30,33,48,.05);
  --ost-shadow-lg:      0 12px 30px rgba(30,33,48,.12);

  --ost-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- 0. Local inline-SVG icons (no external icon font) ---------- */
.ost-icon{
  display:inline-block;
  width:1.05em; height:1.05em;
  vertical-align:-0.15em;
}
h1 .ost-icon, .btn .ost-icon{ vertical-align:-0.12em; }

/* ---------- 2. Base / reset on top of Bootstrap ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family: var(--ost-font);
  background: var(--ost-body-bg);
  color: var(--ost-text);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--ost-primary); text-decoration:none; }
a:hover{ color: var(--ost-primary-dark); }
hr{ border-top-color: var(--ost-border); opacity:1; }

h1, .h1{ font-size:1.65rem; font-weight:700; color:var(--ost-text); letter-spacing:-.01em; }
h2, .h2{ font-size:1.3rem;  font-weight:700; color:var(--ost-text); }
h3, .h3{ font-size:1.1rem;  font-weight:700; color:var(--ost-text); }
h4, .h4{ font-size:1.02rem; font-weight:700; color:var(--ost-text); }

/* generic helpers still used across old templates */
.pull-right{ float:right; }
.pull-left{ float:left; }
.flush-left{ float:left; }
.flush-right{ float:right; }
.clear{ clear:both; height:0; display:block; }
.faded{ color: var(--ost-text-muted) !important; }
.centered{ text-align:center; }
.hidden{ display:none; }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight: bold; }

/* ---------- 3. Bootstrap palette override (indigo) ---------- */
.text-primary{ color: var(--ost-primary) !important; }
.bg-primary{ background-color: var(--ost-primary) !important; }
.border-primary{ border-color: var(--ost-primary) !important; }

.btn-primary{
  --bs-btn-bg: var(--ost-primary);
  --bs-btn-border-color: var(--ost-primary);
  --bs-btn-hover-bg: var(--ost-primary-dark);
  --bs-btn-hover-border-color: var(--ost-primary-dark);
  --bs-btn-active-bg: var(--ost-primary-darker);
  --bs-btn-active-border-color: var(--ost-primary-darker);
  --bs-btn-focus-shadow-rgb: var(--ost-primary-rgb);
  --bs-btn-disabled-bg: var(--ost-primary);
  --bs-btn-disabled-border-color: var(--ost-primary);
  box-shadow: var(--ost-shadow-sm);
}
.btn-outline-primary{
  --bs-btn-color: var(--ost-primary);
  --bs-btn-border-color: var(--ost-border-strong);
  --bs-btn-hover-bg: var(--ost-primary);
  --bs-btn-hover-border-color: var(--ost-primary);
  --bs-btn-active-bg: var(--ost-primary);
  --bs-btn-active-border-color: var(--ost-primary);
  --bs-btn-focus-shadow-rgb: var(--ost-primary-rgb);
}
.btn{ border-radius: var(--ost-radius-sm); font-weight:600; padding:.65rem 1.35rem; font-size:1rem; border-width:1.5px; }
.btn-sm{ border-radius: 0; padding:.4rem .9rem; font-size:.875rem; }
.btn-lg{ border-radius: var(--ost-radius); padding:.85rem 1.6rem; font-size:1.1rem; }
.btn-light{ background:#fff; border-color:var(--ost-border-strong); color:var(--ost-text); }
.btn-light:hover{ background:var(--ost-body-bg); }
.btn-link{ color:var(--ost-primary); font-weight:600; }

.form-control, .form-select{
  border-radius: var(--ost-radius-sm);
  border:1.5px solid var(--ost-border-strong);
  padding:.7rem 1rem;
  font-size:1rem;
  background-color:#fff;
}
.form-control:focus, .form-select:focus{
  border-color: var(--ost-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--ost-primary-rgb), .18);
}
.form-label{ font-weight:600; font-size:.92rem; color:var(--ost-text); margin-bottom:.4rem; }
.form-check-input:checked{ background-color:var(--ost-primary); border-color:var(--ost-primary); }
.form-check-input:focus{ box-shadow:0 0 0 .2rem rgba(var(--ost-primary-rgb), .18); }

.badge.bg-primary{ background-color: var(--ost-primary) !important; }
.nav-link.active, .nav-pills .nav-link.active{ background-color: var(--ost-primary) !important; }
.page-link{ color: var(--ost-primary); }
.page-item.active .page-link{ background-color: var(--ost-primary); border-color: var(--ost-primary); }
.list-group-item.active{ background-color: var(--ost-primary); border-color: var(--ost-primary); }
.dropdown-item.active, .dropdown-item:active{ background-color: var(--ost-primary); }
.spinner-border.text-primary{ color: var(--ost-primary) !important; }
::selection{ background: var(--ost-primary-soft); }

.card{
  border:1px solid var(--ost-border);
  border-top:3px solid var(--ost-primary);
  border-radius: var(--ost-radius);
  box-shadow: var(--ost-shadow-sm);
}
.card-header{
  background: #fff;
  border-bottom:1px solid var(--ost-border);
  font-weight:700;
  border-top-left-radius: var(--ost-radius) !important;
  border-top-right-radius: var(--ost-radius) !important;
}

.alert{ border:1px solid transparent; border-radius: var(--ost-radius-sm); padding:1rem 1.15rem; font-size:.95rem; }
.alert-primary{ background: var(--ost-primary-light); color: var(--ost-primary-darker); border-color: var(--ost-primary-soft); }
.alert-success{ background: var(--ost-success-bg); color:#2f5a41; border-color:#cfe4d8; }
.alert-danger{ background: var(--ost-danger-bg); color:#7c3238; border-color:#eccdd0; }
.alert-warning{ background: var(--ost-warning-bg); color:#7a5726; border-color:#ecdcbf; }
.alert-info{ background: var(--ost-info-bg); color:#33555f; border-color:#cbdde3; }

/* ---------- 4. Page shell ---------- */
body{ min-height:100vh; }
.ost-shell{ display:flex; flex-direction:column; min-height:100vh; }
.ost-main{ flex:1 0 auto; padding: 1.75rem 0 3rem; }

/* Top bar (thin, above the main nav) */
.ost-topbar{
  background: var(--ost-primary-darker);
  color: rgba(255,255,255,.85);
}
.ost-topbar a{ color:#fff; opacity:.9; }
.ost-topbar a:hover{ opacity:1; text-decoration:underline; }
.ost-topbar .flag{ display:inline-block; width:16px; height:11px; border-radius:0; vertical-align:middle; }

/* Main navbar */
.ost-navbar{
  background:#fff;
  border-bottom:1px solid var(--ost-border);
  box-shadow: var(--ost-shadow-sm);
}
.ost-navbar .navbar-brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--ost-text); }
.ost-navbar .navbar-brand img{ max-height:38px; width:auto; }
.ost-navbar .nav-link{
  font-weight:600;
  color: var(--ost-text-muted);
  border-radius: var(--ost-radius-sm);
  padding:.5rem .9rem;
  display:flex; align-items:center; gap:.45rem;
}
.ost-navbar .nav-link:hover{ color: var(--ost-primary); background: var(--ost-primary-light); }
.ost-navbar .nav-link.active{
  color: var(--ost-primary) !important;
  background: var(--ost-primary-light) !important;
}
.ost-navbar .nav-link i{ font-size:1rem; }

/* Footer */
.ost-footer{
  flex-shrink:0;
  padding: 1.5rem 0;
  text-align:center;
  color: var(--ost-text-soft);
  font-size:.8125rem;
  border-top:1px solid var(--ost-border);
  background:#fff;
}
.ost-footer a{ color: var(--ost-text-muted); }

/* Alerts injected by core ($ost->getError()/Warning()/Notice()) */
.error_bar, .warning_bar, .notice_bar{
  margin:0; padding:.65rem 1rem; text-align:center; font-weight:600; font-size:.875rem;
}
.error_bar{ background: var(--ost-danger-bg); color:#9c1238; border-bottom:1px solid #f7d3de; }
.warning_bar{ background: var(--ost-warning-bg); color:#8a5b06; border-bottom:1px solid #fbe6bd; }
.notice_bar{ background: var(--ost-success-bg); color:#0f6a30; border-bottom:1px solid #c9f0d8; }

/* In-page message blocks (#msg_error / #msg_notice / #msg_warning / #msg_info) */
#msg_error, #msg_notice, #msg_warning, #msg_info{
  margin:0 0 1.1rem; padding:.75rem 1rem .75rem 2.75rem; border-radius: var(--ost-radius-sm);
  font-size:.875rem; position:relative; background-repeat:no-repeat; background-position:1rem 50%;
}
#msg_error{ background-color: var(--ost-danger-bg); color:#9c1238; border:1px solid #f7d3de; }
#msg_error::before{ content:"\2715"; font-weight:700; position:absolute; left:1rem; top:50%; transform:translateY(-50%); }
#msg_warning{ background-color: var(--ost-warning-bg); color:#8a5b06; border:1px solid #fbe6bd; }
#msg_warning::before{ content:"\26A0"; font-weight:700; position:absolute; left:1rem; top:50%; transform:translateY(-50%); }
#msg_notice{ background-color: var(--ost-success-bg); color:#0f6a30; border:1px solid #c9f0d8; }
#msg_notice::before{ content:"\2713"; font-weight:700; position:absolute; left:1rem; top:50%; transform:translateY(-50%); }
#msg_info{ background-color: var(--ost-info-bg); color:#0a5b6b; border:1px solid #c8eff5; }
#msg_info::before{ content:"\2139"; font-weight:700; position:absolute; left:1rem; top:50%; transform:translateY(-50%); }

/* Loading overlay */
#overlay{ background:#0d0f1a; opacity:.55; }
#loading{
  border:none; border-radius: var(--ost-radius); box-shadow: var(--ost-shadow-lg);
  background: #fff url('../images/FhHRx-Spinner.gif') 18px 50% no-repeat;
  padding:1.2rem 1.2rem 1.2rem 68px;
}
#loading h4{ color:var(--ost-text); font-size:.95rem; margin-bottom:.15rem; }
#loading p{ color:var(--ost-text-muted); font-size:.8rem; margin:0; }

/* ---------- 5. Buttons of legacy markup (input[type=submit] etc.) ---------- */
input[type=submit], input[type=button], input[type=reset], .btn, a.button, .button{
  font-family: var(--ost-font);
  border-radius: var(--ost-radius-sm);
  font-weight:600;
  border:1px solid var(--ost-primary);
  background: var(--ost-primary);
  color:#fff !important;
  padding:.55rem 1.15rem;
  font-size:.875rem;
  cursor:pointer;
  transition:.15s ease background-color, .15s ease border-color, .15s ease box-shadow;
  box-shadow: var(--ost-shadow-sm);
}
input[type=submit]:hover, input[type=button]:hover, .btn:hover, a.button:hover, .button:hover{
  background: var(--ost-primary-dark); border-color: var(--ost-primary-dark);
}
input[type=reset], input[name=cancel], input[type=button][value="Cancel"]{
  background:#fff; color:var(--ost-text) !important; border:1px solid var(--ost-border-strong);
  box-shadow:none;
}
input[type=reset]:hover, input[name=cancel]:hover{ background: var(--ost-body-bg); }
.green.button, .green.button:visited{ background: var(--ost-success); border-color:var(--ost-success); }
.green.button:hover{ background:#128a3e; }
.blue.button, .blue.button:visited{ background: var(--ost-primary); border-color:var(--ost-primary); }
.blue.button:hover{ background: var(--ost-primary-dark); }

/* generic text/number/password/email/textarea/select inputs anywhere in client content */
#content input[type=text], #content input[type=password], #content input[type=email],
#content input[type=number], #content input[type=tel], #content input[type=date],
#content input[type=search], #content input[type=file], #content textarea, #content select,
.ost-card input[type=text], .ost-card input[type=password], .ost-card textarea, .ost-card select{
  font-family: var(--ost-font);
  border:1px solid var(--ost-border-strong);
  border-radius: var(--ost-radius-sm);
  padding:.5rem .8rem;
  font-size:.9rem;
  background:#fff;
  color:var(--ost-text);
  max-width:100%;
}
#content input[type=file]{ border-style:dashed; background:var(--ost-body-bg); }
#content input[type=text]:focus, #content input[type=password]:focus,
#content input[type=email]:focus, #content textarea:focus, #content select:focus{
  outline:none; border-color:var(--ost-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--ost-primary-rgb), .15);
}
#content select{ padding-right:2rem; }

.error{ color: var(--ost-danger) !important; font-size:.875rem; font-weight:600; }
.error input{ border-color: var(--ost-danger) !important; }
label.required, span.required{ font-weight:700; }
.req-star{ color: var(--ost-danger); font-weight:700; margin-left:.15rem; }

/* ---------- 6. Reusable dynamic-form reflow (for core-rendered <table> forms) ---------- */
.ost-form{
  background:#fff; border:1px solid var(--ost-border); border-radius: var(--ost-radius);
  padding:1.5rem; box-shadow: var(--ost-shadow-sm);
}
.ost-form table{ width:100% !important; border-collapse:separate; }
.ost-form table tr{ display:flex; flex-wrap:wrap; align-items:flex-start; border:none !important; padding:.5rem 0; gap:.25rem 1.25rem; }
.ost-form table tr:not(:last-child){ border-bottom:1px dashed var(--ost-border) !important; }
.ost-form table th, .ost-form table td{ display:block; border:none !important; padding:0 !important; background:transparent !important; text-align:left; }
.ost-form table th{ flex:0 0 220px; max-width:220px; font-weight:600; color:var(--ost-text); padding-top:.5rem !important; font-size:.875rem;}
.ost-form table td{ flex:1 1 280px; min-width:220px; }
.ost-form table td[colspan="2"], .ost-form table th[colspan="2"]{ flex-basis:100%; max-width:100%; }
.ost-form table td[colspan="2"] hr{ margin:.25rem 0 1rem; }
.ost-form h3{ margin:0 0 .1rem; }
.ost-form table input[type=text], .ost-form table input[type=password],
.ost-form table input[type=email], .ost-form table select, .ost-form table textarea{
  width:100%; max-width:420px;
}
.ost-form table textarea{ max-width:640px; min-height:110px; }
@media (max-width: 700px){
  .ost-form table tr{ flex-direction:column; gap:.25rem; }
  .ost-form table th{ flex-basis:100%; max-width:100%; }
  .ost-form table input, .ost-form table select, .ost-form table textarea{ max-width:100%; }
}
.ost-form .form-header{ margin-top:.25rem; display:flex; align-items:center; gap:.5rem; }
.ost-form .form-header h3{ font-size:1.05rem; padding-bottom:.5rem; padding-left:.75rem; border-bottom:2px solid var(--ost-primary-light); border-left:3px solid var(--ost-primary); flex:1; padding-top:.1rem; }

/* dynamic-form.tmpl.php driven ticket fields (template we control) */
.ost-field{ margin-bottom:1.3rem; }
.ost-field > label{ display:block; font-weight:600; font-size:.95rem; margin-bottom:.45rem; color:var(--ost-text); }
.ost-field > label .error{ margin-left:.25rem; }
.ost-field input[type=text], .ost-field input[type=password], .ost-field input[type=email],
.ost-field input[type=number], .ost-field input[type=tel], .ost-field select, .ost-field textarea{
  width:100%; max-width:480px;
}
.ost-field textarea{ max-width:100%; min-height:140px; }
.ost-field em{ display:block; color:var(--ost-text-soft); font-size:.88rem; margin-top:.25rem; }
.ost-field .error{ display:block; margin-top:.3rem; }

.ost-form-section{ margin-bottom:1.75rem; padding-bottom:1.75rem; border-bottom:1px solid var(--ost-border); }
.ost-form-section:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:none; }
.ost-form-section .form-header{ margin-bottom:1.25rem; }
.ost-field-block{ grid-column:1 / -1; }
.ost-field-value{ padding:.5rem 0; color:var(--ost-text); font-size:1rem; }
.ost-fields-grid{ display:grid; }

/* Page-header hero used at the top of the main forms (open/register/profile/edit) */
.form-hero{ display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.75rem; padding-bottom:1.75rem; border-bottom:1px solid var(--ost-border); }
.form-hero .form-hero-icon{
  flex:0 0 auto; width:3rem; height:3rem; display:flex; align-items:center; justify-content:center;
  background: var(--ost-primary-light); color: var(--ost-primary-darker); border:1px solid var(--ost-primary-soft);
}
.form-hero .form-hero-icon svg.ost-icon{ width:1.5rem; height:1.5rem; }
.form-hero h1{ margin-bottom:.35rem; }
.form-hero p{ margin:0; color:var(--ost-text-muted); font-size:1rem; }

/* Footer action bar for the main forms */
.card-actions{
  background: var(--ost-body-bg); border-top:1px solid var(--ost-border);
  margin:1.75rem -1.5rem -1.5rem; padding:1.5rem;
  display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap;
}

/* Captcha row */
.captchaRow{ align-items:center !important; }
.captcha{ border-radius: var(--ost-radius-sm); overflow:hidden; box-shadow: var(--ost-shadow-sm); }

/* ---------- 7. Auth pages (login / register / pwreset) ---------- */
.ost-auth-wrap{ display:flex; justify-content:center; padding: 1.5rem 0; }
.ost-auth-card{
  width:100%; max-width:480px; background:#fff; border:1px solid var(--ost-border);
  border-top:3px solid var(--ost-primary);
  border-radius: var(--ost-radius-lg); box-shadow: var(--ost-shadow); padding:2.25rem;
}
.ost-auth-card h1{ font-size:1.5rem; margin-bottom:.5rem; }
.ost-auth-card p.lead{ color:var(--ost-text-muted); font-size:.95rem; margin-bottom:1.5rem; }
.ost-auth-card .form-group{ margin-bottom:1.15rem; }
.ost-auth-card label{ display:block; font-weight:600; font-size:.92rem; margin-bottom:.4rem; }
.ost-auth-card input[type=text], .ost-auth-card input[type=password], .ost-auth-card input[type=email]{
  width:100%; max-width:100%;
}
.ost-auth-card .btn-block{ width:100%; display:block; text-align:center; }
.ost-auth-foot{ text-align:center; margin-top:1.2rem; font-size:.92rem; color:var(--ost-text-muted); }
.ost-auth-divider{ display:flex; align-items:center; gap:.75rem; margin:1.2rem 0; color:var(--ost-text-soft); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.ost-auth-divider::before, .ost-auth-divider::after{ content:""; flex:1; height:1px; background:var(--ost-border); }
.external-auth{ margin-bottom:.5rem; }
.external-auth a{ display:block; text-align:center; padding:.65rem 1rem; border:1.5px solid var(--ost-border-strong); border-radius:var(--ost-radius-sm); font-weight:600; color:var(--ost-text); }
.external-auth a:hover{ background:var(--ost-body-bg); border-color:var(--ost-primary); }

/* Legacy #clientLogin box fallback (accesslink / pwreset use this id, kept for compatibility) */
#clientLogin{
  background:#fff; border:1px solid var(--ost-border); border-top:3px solid var(--ost-primary);
  border-radius: var(--ost-radius-lg);
  box-shadow: var(--ost-shadow); padding:2.25rem; max-width:480px; margin: 0 auto;
}
#clientLogin .login-box > div{ margin-bottom:1.1rem; }
#clientLogin label{ display:block; font-weight:600; font-size:.92rem; margin-bottom:.4rem; }
#clientLogin input[type=text], #clientLogin input[type=password]{ width:100% !important; max-width:100% !important; }
#clientLogin p{ text-align:center; margin-top:1rem; }
#clientLogin .instructions{ text-align:center; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--ost-border); font-size:.92rem; color:var(--ost-text-muted); }

/* ---------- 8. Landing page ---------- */
#landing_page{ display:flex; gap:1.75rem; flex-wrap:wrap; align-items:flex-start; }
#landing_page .main-content{ flex:1 1 620px; min-width:280px; }
#landing_page .sidebar{ flex:0 0 300px; width:300px; float:none !important; }
.search-form{
  background: linear-gradient(135deg, var(--ost-primary) 0%, var(--ost-primary-dark) 100%);
  border-radius: var(--ost-radius-lg); padding:2rem; margin-bottom:1.5rem; box-shadow: var(--ost-shadow);
}
.search-form form{ display:flex; gap:.6rem; max-width:640px; }
.search-form input[type=text]{
  flex:1; border:none; border-radius: var(--ost-radius-sm); padding:.75rem 1rem; font-size:.95rem;
}
.search-form .green.button{ background:#fff; color:var(--ost-primary-dark) !important; border:none; }
.search-form .green.button:hover{ background:#f1f2ff; }
#landing_page .thread-body{ background:transparent; padding:0; }
#landing_page .thread-body h1{ font-size:1.6rem; }

.sidebar .front-page-button p{ margin:0 0 .6rem; }
.sidebar .front-page-button .button{ display:block; text-align:center; border-radius:var(--ost-radius-sm); }
.sidebar .content{
  background:#fff; border:1px solid var(--ost-border); border-radius: var(--ost-radius);
  padding:1.1rem 1.25rem; margin-top:1rem; box-shadow: var(--ost-shadow-sm);
}
.sidebar .content section{ margin-bottom:1rem; }
.sidebar .content section:last-child{ margin-bottom:0; }
.sidebar .content .header{
  font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ost-text-soft); margin-bottom:.5rem; padding-bottom:.4rem; border-bottom:1px solid var(--ost-border);
}
.sidebar .content section div{ padding:.3rem 0; font-size:.875rem; }
.sidebar .searchbar{
  background:#fff; border:1px solid var(--ost-border); border-radius: var(--ost-radius);
  padding:1rem; box-shadow: var(--ost-shadow-sm);
}
.sidebar .searchbar input[type=text], .sidebar .searchbar select{ width:100%; }

.featured-category.front-page{
  display:inline-block; vertical-align:top; width:31%; min-width:220px; margin:0 1.5% 1.5rem;
  background:#fff; border:1px solid var(--ost-border); border-radius: var(--ost-radius);
  padding:1.25rem; box-shadow: var(--ost-shadow-sm);
}
.featured-category .category-name{ font-weight:700; margin:.5rem 0 .75rem; }
.featured-category i{ color: var(--ost-primary); font-size:1.4rem; }
.featured-category .article-headline{ margin-bottom:.6rem; }
.featured-category .article-title a{ font-weight:600; font-size:.875rem; }
.featured-category .article-teaser{ color:var(--ost-text-muted); font-size:.875rem; }

/* ---------- 9. Knowledge base / FAQ ---------- */
#kb{ list-style:none; margin:0; padding:0; }
#kb > li{
  background:#fff; border:1px solid var(--ost-border); border-radius: var(--ost-radius);
  padding:1.25rem; margin-bottom:1rem; box-shadow: var(--ost-shadow-sm); display:flex; gap:1rem;
}
#kb > li > svg.ost-icon{
  flex:0 0 40px; width:40px; height:40px; padding:.6rem; border-radius: var(--ost-radius-sm);
  background: var(--ost-primary-light); color:var(--ost-primary);
}
#kb li > div{ margin-left:0 !important; flex:1; }
#kb h4{ margin-bottom:.35rem; }
#kb h4 a{ color:var(--ost-text); font-weight:700; }
#kb h4 a:hover{ color:var(--ost-primary); }
.popular-faq{ padding:.15rem 0; font-size:.85rem; }
.popular-faq i, #kb .icon-folder-open{ color:var(--ost-primary); margin-right:.3rem; }

#faq{ background:transparent; }
#faq ol{ list-style:none; margin:0; padding:0; }
#faq li{
  background:#fff; border:1px solid var(--ost-border); border-radius: var(--ost-radius-sm);
  margin-bottom:.5rem; transition:.15s border-color;
}
#faq li:hover{ border-color: var(--ost-primary); }
#faq li a{
  display:flex; align-items:center; gap:.6rem; padding:.75rem 1rem; color:var(--ost-text); font-weight:600; font-size:.9rem;
}
#faq li a::before{ content:"\2022"; font-weight:700; color:var(--ost-primary); font-size:1.3em; line-height:0; }
#faq li a:hover{ color:var(--ost-primary); }

.faq-content{
  background:#fff; border:1px solid var(--ost-border); border-radius: var(--ost-radius);
  padding:1.75rem; box-shadow: var(--ost-shadow-sm);
}
.article-title{ font-size:1.3rem; font-weight:700; margin-bottom:.35rem; }
#breadcrumbs{ font-size:.875rem; color:var(--ost-text-muted); margin-bottom:1.1rem; }
#breadcrumbs a{ color:var(--ost-text-muted); font-weight:600; }
#breadcrumbs a:hover{ color:var(--ost-primary); }

/* ---------- 10. Tickets list ---------- */
.ost-toolbar{
  background:#fff; border:1px solid var(--ost-border); border-radius: var(--ost-radius);
  padding:1rem 1.25rem; margin-bottom:1.25rem; box-shadow: var(--ost-shadow-sm);
}
.ost-toolbar form{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
/* form-control/form-select default to width:100%, which breaks inline flex layout —
   pin explicit flex-basis so the three controls sit on one row and only wrap on narrow screens */
.ost-toolbar form > input.form-control{ flex:1 1 240px; width:auto; min-width:180px; }
.ost-toolbar form > select.form-select{ flex:0 1 240px; width:auto; min-width:180px; }
.ost-toolbar form > .btn{ flex:0 0 auto; width:auto; }

.states{ font-size:.9rem; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-end; }
.states .state{
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .85rem; border-radius:0;
  color:var(--ost-text-muted); font-weight:600; border:1.5px solid var(--ost-border-strong);
  white-space:nowrap; cursor:pointer;
}
.states .state.active{ background: var(--ost-primary); border-color:var(--ost-primary); color:#fff; }
.states .state:hover{ color:var(--ost-primary); border-color:var(--ost-primary); text-decoration:none; }
.states .state.active:hover{ color:#fff; }
.states .state.active .status-dot{ box-shadow:0 0 0 1px #fff; }

.ost-tickets-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; margin-bottom:1rem; }
.ost-tickets-head h1{ margin:0; display:flex; align-items:center; gap:.5rem; }
.ost-tickets-head h1 a{ color:var(--ost-text); }
.ost-tickets-head h1 i{ color:var(--ost-text-soft); font-size:1.1rem; }

#ticketTable{
  width:100% !important; background:#fff; border:1px solid var(--ost-border) !important;
  border-radius: var(--ost-radius); overflow:hidden; box-shadow: var(--ost-shadow-sm); border-collapse:collapse;
}
#ticketTable caption{
  caption-side:top; text-align:left; padding:.9rem 1.25rem; font-weight:700; font-size:.95rem;
  background: var(--ost-primary-light); color: var(--ost-primary-darker); border-bottom:1px solid var(--ost-border);
}
#ticketTable thead th{
  background: #fafbfc !important; border:none !important; border-bottom:2px solid var(--ost-border) !important;
  padding:.85rem 1.25rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--ost-text-muted);
}
#ticketTable thead th a{ color:var(--ost-text-muted); }
#ticketTable thead th a:hover{ color:var(--ost-primary); }
#ticketTable tbody td{
  border:none !important; border-bottom:1px solid var(--ost-border) !important; padding:1.05rem 1.25rem; font-size:1rem; vertical-align:middle;
}
#ticketTable tbody tr:nth-child(even){ background: #fbfbfc; }
#ticketTable tbody tr:last-child td{ border-bottom:none !important; }
#ticketTable tbody tr.ticket-row, #ticketTable tbody tr.ticket-row td{ cursor:pointer; }
#ticketTable tbody tr{ transition:.1s background-color; }
#ticketTable tbody tr:hover{ background: var(--ost-primary-light); }
#ticketTable tbody tr:hover .ticket-subject{ color: var(--ost-primary-darker); }
#ticketTable .Icon{ font-weight:700; padding-left:1.5rem; background-size:16px; background-position:0 50%; }
#ticketTable .ticket-number{ font-weight:700; font-size:1.05rem; color:var(--ost-primary-darker); }
#ticketTable .ticket-subject{ font-size:1rem; font-weight:600; color:var(--ost-text); }
#ticketTable .ticket-subject:hover{ color:var(--ost-primary); }
#ticketTable .col-date, #ticketTable .col-dept{ color:var(--ost-text-muted); font-weight: bold; }
#ticketTable .col-user{ font-size:.95rem; }

/* Consistent "needs attention" emphasis — a single CSS-controlled weight
   applied everywhere, instead of a raw <b> tag stacking on top of the
   link's own font-weight (which rendered inconsistently list to list). */
.ticket-number.is-highlighted, .ticket-subject.is-highlighted{
  font-weight:800; color: var(--ost-primary-darker);
}

/* Small colour dot matching the exact status colour configured in the
   admin panel — used both in the filter pills and the table's status
   column, so the colour-coding is consistent everywhere. */
.status-dot{
  display:inline-block; width:.65rem; height:.65rem; flex:0 0 auto;
  border-radius:50%; background-color: var(--ost-text-soft); vertical-align:middle;
}

/* Ticket status chip — larger, readable, colour-coded via .status-dot
   instead of a tiny solid badge that's hard to read at small sizes */
.status-chip{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:700;
  white-space:nowrap; line-height:1.2; color:var(--ost-text);
}

.attach-flag{
  display:inline-flex; vertical-align:middle; margin-left:.5rem; color: var(--ost-primary);
}
.attach-flag svg.ost-icon{ width:1.05rem; height:1.05rem; }

/* ---------- 11. Ticket view ---------- */
#ticketInfo{ width:100% !important; border:none !important; margin-bottom:0; }
#ticketInfo > tbody > tr > td{ border:none !important; padding:0 !important; }
#ticketInfo h1{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1.25rem; padding-bottom:1rem; border-bottom:2px solid var(--ost-primary-soft); }
#ticketInfo h1 small{ color:var(--ost-text-soft); font-weight:600; font-size:.85rem; }
#ticketInfo h1 .pull-right{ display:flex; gap:.5rem; float:none; margin-left:auto; }

.action-button{
  display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; border-radius: var(--ost-radius-sm);
  background:#fff; border:1.5px solid var(--ost-border-strong); color:var(--ost-text) !important; font-weight:600; font-size:.875rem;
}
.action-button:hover{ background:var(--ost-body-bg); border-color:var(--ost-primary); color:var(--ost-primary) !important; }

.infoTable{
  background:#fff !important; border:1px solid var(--ost-border) !important; border-radius: var(--ost-radius);
  box-shadow: var(--ost-shadow-sm); overflow:hidden; border-collapse:collapse; width:100% !important;
}
.infoTable .headline{
  background: #7e8791 !important; color: #ffffff; font-weight:700;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; padding:.6rem 1rem !important; border:none !important;
}
.infoTable tr:not(:first-child) th, .infoTable tr:not(:first-child) td{
  border:none !important;
}
.infoTable th{ color:var(--ost-text-muted); font-weight:600; width:110px; }

.custom-data{ margin-top:1rem; background:#fff; border:1px solid var(--ost-border); border-radius: var(--ost-radius); overflow:hidden; box-shadow: var(--ost-shadow-sm); width:100% !important; border-collapse:collapse; }
.custom-data .headline{ background: #a18bc5; color: #ffffff; font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; padding:.6rem 1rem; }
.custom-data tr:not(:first-child) th, .custom-data tr:not(:first-child) td{ border-top:1px solid var(--ost-border); padding:.6rem 1rem; }
.custom-data th{ color:var(--ost-text-muted); font-weight:600; width:200px; }

/* ---------- 12. Thread / conversation ---------- */
#ticketThread{ margin-top:1.5rem; }
#ticketThread > div{ display:flex; flex-direction:column; gap:1rem; }
.thread-entry{
  background:#fbfbfb; border:1px solid var(--ost-border); border-radius: var(--ost-radius);
  padding:1.1rem 1.25rem; box-shadow: var(--ost-shadow-sm); position:relative;
}
.thread-entry.M{ border-left:4px solid var(--ost-primary); background:#fbfbff; }
.thread-entry.R{ border-left:4px solid var(--ost-success); background:#fbfdfb; }
.thread-avatar-fallback{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.85rem; height:1.85rem; border-radius:0; font-size:.8rem; font-weight:700; color:#fff;
  flex:0 0 auto;
}
.thread-avatar-fallback.is-client{ background: var(--ost-primary); }
.thread-avatar-fallback.is-staff{ background: var(--ost-success); }
.bg-success{ background-color: var(--ost-success) !important; }
.thread-entry .header{
  color:var(--ost-text-muted); margin-bottom:.6rem; padding-bottom:.5rem;
  border-bottom:1px solid var(--ost-border); display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem;
}
.thread-entry .header b{ color:var(--ost-text); }
.thread-entry .header time{ color:var(--ost-text-soft); }
.thread-entry .thread-body{ padding:0; background:transparent; font-size:.9rem; }
.thread-entry .attachments{
  margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--ost-border);
  display:flex; flex-direction:column; gap:.5rem;
}
.thread-entry .attachments-label{
  font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color: var(--ost-text-soft); margin-bottom:.15rem; display:flex; align-items:center; gap:.4rem;
}
.attachment-info{
  display:flex; align-items:center; gap:.65rem; background:#fff;
  border:1.5px solid var(--ost-border-strong); border-left:4px solid var(--ost-primary);
  padding:.65rem .9rem; font-size:.9rem; max-width:420px; width:100%;
  box-shadow: var(--ost-shadow-sm);
  transition:.15s border-color, .15s background-color;
}
.attachment-info:hover{ background: var(--ost-primary-light); border-left-color: var(--ost-primary-dark); }
.attachment-info svg.ost-icon{ flex:0 0 auto; width:1.3em; height:1.3em; color: var(--ost-primary); }
.attachment-info a{ color:var(--ost-text); font-weight:700; }
.attachment-info a:hover{ color:var(--ost-primary-dark); text-decoration:underline; }
.attachment-info .filesize{ color:var(--ost-text-soft); font-size:.82rem; white-space:nowrap; }


.thread-event{
  display:flex; align-items:center; gap:.5rem; justify-content:center; font-size:.78rem;
  color:var(--ost-text-soft); padding:.35rem 0;
}
.thread-event .type-icon{ display:inline-flex; }

#reply{
  margin-top:1.5rem; background:#fff; border:1px solid var(--ost-border); border-radius: var(--ost-radius);
  padding:1.5rem; box-shadow: var(--ost-shadow-sm);
}
#reply h2{ margin-bottom:1rem; font-size:1.05rem; }
#reply textarea{ width:100% !important; max-width:100% !important; min-height:160px; }
.warning-banner{
  background: var(--ost-warning-bg); color:#8a5b06; border:1px solid #fbe6bd; border-radius: var(--ost-radius-sm);
  padding:.6rem .9rem; margin-bottom:1rem; font-size:.85rem;
}

/* ---------- 13. Rich text editor (Redactor) — flat, on-brand toolbar ---------- */
.redactor-box{
  border:1px solid var(--ost-border-strong) !important;
  border-radius: var(--ost-radius) !important;
  overflow:hidden;
  background:#fff;
}
.redactor-box.redactor-focus.redactor-styles-on{
  border-color: var(--ost-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--ost-primary-rgb), .15);
}
.redactor-toolbar-wrapper{
  background: #fafbff;
  border-bottom:1px solid var(--ost-border);
}
.redactor-box.redactor-styles-on .redactor-toolbar{
  padding:.6rem .6rem 0 .6rem !important;
}
.redactor-toolbar a, .redactor-air a{
  background: #fff !important;
  color: var(--ost-text-muted) !important;
  border:1px solid var(--ost-border) !important;
  border-radius: var(--ost-radius-sm) !important;
  box-shadow:none !important;
  padding:.4rem .6rem !important;
  font-size:.85rem !important;
  margin-right:.35rem !important;
  margin-bottom:.5rem !important;
}
.redactor-toolbar a:hover, .redactor-air a:hover{
  background: var(--ost-primary) !important;
  border-color: var(--ost-primary) !important;
  color:#fff !important;
}
.redactor-toolbar a.redactor-button-active{
  background: var(--ost-primary-light) !important;
  border-color: var(--ost-primary-soft) !important;
  color: var(--ost-primary-dark) !important;
}
.redactor-editor, .redactor-box textarea{
  padding:1rem !important;
  min-height:160px;
  font-family: var(--ost-font);
  font-size:.9rem;
  color: var(--ost-text);
}
.redactor-statusbar{
  border-top:1px solid var(--ost-border) !important;
  background:#fafbff;
  padding:.3rem .75rem !important;
  font-size:.75rem;
}

/* ---------- 14. File upload dropzone (filedrop) ---------- */
.filedrop{ margin-top:1rem; }
.filedrop .dropzone{
  border:2px dashed var(--ost-border-strong) !important;
  background: var(--ost-body-bg) !important;
  border-radius: var(--ost-radius-sm) !important;
  padding:1.1rem 1.1rem !important;
  color: var(--ost-text-muted) !important;
  font-size:.92rem;
  text-align:center;
  transition:.15s border-color, .15s background-color;
}
.filedrop .dropzone a{ color: var(--ost-primary) !important; font-weight:700; }
.filedrop.dragover .dropzone, .filedrop .dropzone:hover{
  border-color: var(--ost-primary) !important;
  background: var(--ost-primary-light) !important;
}
.filedrop .files:not(:empty){
  border:1.5px solid var(--ost-border-strong) !important;
  border-radius: var(--ost-radius-sm) var(--ost-radius-sm) 0 0 !important;
  background:#fff;
  padding:.5rem !important;
}
.filedrop .files .file{
  font-size:.92rem !important; font-weight:600;
  border-radius: var(--ost-radius-sm) !important;
  background: var(--ost-primary-light) !important;
  border-left:3px solid var(--ost-primary);
  height:auto !important;
  padding:.55rem .75rem !important;
  margin-bottom:.35rem !important;
}
.filedrop .files .file:last-child{ margin-bottom:0 !important; }
.filedrop .files .file .filesize{ color: var(--ost-text-muted) !important; font-weight:400; }
.filedrop .files .file .trash{ color: var(--ost-danger); }
.-redactor-container .filedrop .dropzone{ border-top-width:2px !important; margin-top:0; }

/* ---------- 15. Pagination (Pagenate::getPageLinks) ---------- */
#pagination{ list-style:none; display:flex; gap:.35rem; margin:0; padding:0; }
#pagination li{ display:inline-block; }
#pagination a, #pagination span.active, #pagination span.previousOff, #pagination span.nextOff{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.1rem; height:2.1rem; padding:0 .6rem;
  border-radius: var(--ost-radius-sm); font-size:.85rem; font-weight:600;
  color: var(--ost-text-muted); border:1px solid var(--ost-border-strong); background:#fff;
}
#pagination a:hover{ border-color: var(--ost-primary); color: var(--ost-primary); }
#pagination .active{ background: var(--ost-primary); border-color: var(--ost-primary); color:#fff; }
#pagination .previousOff, #pagination .nextOff{ color: var(--ost-text-soft); opacity:.6; }

/* ---------- 16. Thread timeline separators (created/closed/edited events) ---------- */
.thread-event{
  display:flex; align-items:start; gap:.75rem; font-size:.85rem;
  color:var(--ost-text-soft); padding:.25rem 0; text-transform:uppercase;
}
.thread-event::before, .thread-event::after{ content:""; flex:1; height:1px; background:var(--ost-border); }
.thread-event .type-icon{ display:none; }
.thread-event .description{ white-space:nowrap; }

/* ---------- 17. Small polish: colored decorative icons & info box on open-ticket page ---------- */
h1 svg.ost-icon{ color: var(--ost-primary); }
h1 .action-button svg.ost-icon{ color:inherit; } /* keep toolbar action icons neutral, not indigo */
.ost-form table tr{ border-bottom-style:solid !important; }
.ost-form table th{ display:flex; align-items:center; gap:.4rem; }

/* ---------- 18. Print (kept minimal; print.css already handles @media print) ---------- */
.no-print{ }

/* =====================================================================
   19. MOBILE / RESPONSIVE (Android + iPhone)
   ===================================================================== */

/* Prevent iOS Safari from auto-zooming into text fields: any input with a
   font-size below 16px on focus triggers a forced zoom on iPhone. */
@media (max-width: 991.98px){
  #content input[type=text], #content input[type=password], #content input[type=email],
  #content input[type=number], #content input[type=tel], #content input[type=date],
  #content input[type=search], #content textarea, #content select,
  .form-control, .form-select, .ost-auth-card input, #clientLogin input{
    font-size:16px !important;
  }
}

/* Global small-screen spacing */
@media (max-width: 767.98px){
  .ost-main{ padding:1.1rem 0 2rem; }
  .container{ padding-left:.85rem; padding-right:.85rem; }
  h1, .h1{ font-size:1.25rem; }
  .card-body.p-4, .p-4{ padding:1.1rem !important; }
  .p-4 .card-actions, .card-body.p-4 .card-actions{ margin:1.5rem -1.1rem -1.1rem !important; padding:1.1rem !important; }
  .ost-auth-card{ padding:1.35rem; max-width:100%; }
  .ost-form{ padding:1rem; }
  #clientLogin{ padding:1.35rem; }
}

/* Topbar: stack neatly, smaller text, center on very small screens */
@media (max-width: 575.98px){
  .ost-topbar .container{ justify-content:center; gap:.6rem .9rem; font-size:.75rem; }
}

/* Navbar: bigger tap targets in the mobile menu, full-width links */
@media (max-width: 991.98px){
  .ost-navbar .navbar-brand span{ font-size:1rem; }
  .navbar-collapse{
    margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--ost-border);
  }
  .ost-navbar .navbar-nav{ width:100%; gap:.25rem; }
  .ost-navbar .nav-link{
    width:100%; padding:.75rem .9rem; border-radius: var(--ost-radius-sm);
  }
  .navbar-toggler{ padding:.5rem .65rem; }
}

/* Ticket search/filter toolbar: stack full-width, larger tap targets */
@media (max-width: 575.98px){
  .ost-toolbar form{ flex-direction:column; align-items:stretch; }
  .ost-toolbar form > input.form-control,
  .ost-toolbar form > select.form-select,
  .ost-toolbar form > .btn{ flex:1 1 auto; width:100%; min-width:0; }
}

/* Tickets list header: stack title and status pills */
@media (max-width: 575.98px){
  .ost-tickets-head{ flex-direction:column; align-items:flex-start; }
  .states{ width:100%; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-start; }
  .states .state{ flex:0 1 auto; justify-content:center; }
}

/* Tickets table: allow horizontal scroll as a safety net, and hide
   secondary columns on narrow screens so the important ones fit without
   scrolling on most phones. */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius: var(--ost-radius);
  box-shadow: var(--ost-shadow-sm);
}
.table-scroll #ticketTable{ box-shadow:none; }
@media (max-width: 767.98px){
  #ticketTable .col-date, #ticketTable .col-user{ display:none; }
}
@media (max-width: 575.98px){
  #ticketTable .col-dept{ display:none; }
  #ticketTable thead th, #ticketTable tbody td{ padding:.7rem .85rem; font-size:.9rem; }
  #ticketTable .ticket-number, #ticketTable .ticket-subject{ font-size:.95rem; }
  #ticketTable caption{ padding:.65rem .8rem; }
}

/* Ticket view header: action buttons wrap onto their own full-width row */
@media (max-width: 575.98px){
  #ticketInfo h1{ font-size:1.15rem; }
  #ticketInfo h1 .pull-right{
    margin-left:0; flex-basis:100%; justify-content:flex-start; margin-top:.5rem;
  }
  .action-button{ flex:1; justify-content:center; }
}

/* Ticket info / custom-data tables: tighter padding on phones */
@media (max-width: 575.98px){
  .infoTable .headline, .custom-data .headline{ padding:.5rem .75rem !important; }
  .infoTable tr:not(:first-child) th, .infoTable tr:not(:first-child) td,
  .custom-data tr:not(:first-child) th, .custom-data tr:not(:first-child) td{
    padding:.5rem .75rem !important; display:block; width:100% !important;
  }
  .infoTable th, .custom-data th{ padding-bottom:.1rem !important; font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; }
}

/* Thread / conversation: full-width bubbles, smaller padding, buttons stack */
@media (max-width: 575.98px){
  .thread-entry{ padding:.9rem 1rem; }
  .thread-entry .header{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  #reply{ padding:1.1rem; }
  #reply .card-actions{ margin:1.1rem -1.1rem -1.1rem; }
}

/* Any form action bar (Create/Update/Register/Reset/Cancel buttons):
   stack full-width for comfortable tapping on phones */
@media (max-width: 575.98px){
  .card-actions{ flex-direction:column; }
  .card-actions .btn{ width:100%; margin:0; }
}

/* Landing page: sidebar buttons appear first on mobile (useful actions
   above the fold), stacks under the main content region */
@media (max-width: 991.98px){
  #landing_page{ flex-direction:column; gap:1.1rem; }
  #landing_page .sidebar{ width:100%; flex:1 1 auto; order:0; }
  #landing_page .main-content{ order:1; width:100%; }
}
@media (min-width: 992px){
  #landing_page .sidebar{ order:2; }
  #landing_page .main-content{ order:1; }
}
@media (max-width: 575.98px){
  .search-form{ padding:1.25rem; }
  .search-form form{ flex-direction:column; }
  .search-form input[type=text]{ width:100%; }
  .search-form .green.button{ width:100%; justify-content:center; }
}

/* Featured KB articles on landing page: one per row on phones */
@media (max-width: 767.98px){
  .featured-category.front-page{ width:100%; min-width:0; margin:0 0 1rem; }
}

/* KB / FAQ two-column layout already stacks via .col-lg-* at <992px;
   just tighten spacing on phones */
@media (max-width: 575.98px){
  #kb > li{ flex-direction:column; padding:1rem; }
  #kb > li > svg.ost-icon{ width:32px; height:32px; }
  .faq-content{ padding:1.1rem; }
}

/* Redactor toolbar: bigger, thumb-friendly buttons on touch screens */
@media (max-width: 575.98px){
  .redactor-toolbar a, .redactor-air a{
    padding:.55rem .7rem !important; font-size:.9rem !important;
  }
  .filedrop .dropzone{ padding:1.1rem .8rem !important; }
}

/* Dynamic ticket-field grid: single column on phones for readability */
@media (max-width: 575.98px){
  .ost-fields-grid{ grid-template-columns:1fr; }
  .ost-field input[type=text], .ost-field input[type=password], .ost-field input[type=email],
  .ost-field input[type=number], .ost-field input[type=tel], .ost-field select{
    max-width:100%;
  }
}

@media (max-width: 575.98px){
  .d-flex.justify-content-center.flex-wrap.gap-2 > .btn,
  .mt-3.d-flex.gap-2.flex-wrap.justify-content-center > .btn{ width:100%; }
}

/* Comfortable touch target size on phones */
@media (max-width: 575.98px){
  .btn, a.button, .button, input[type=submit], input[type=button]{ min-height:2.6rem; }
}