html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

body {
  font-family: 'Oxanium', sans-serif;
  overscroll-behavior-y: none;
}  

.container {
  max-width: 1200px;
  margin: auto;
  padding: 1rem;
}

@media (max-width: 768px) {
  .container {
    padding: 0.5rem;
  }

} 

/* Main Navigation */
.main-header {
  background: #fff;
  padding: 10px 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 10;
}

.main-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #4b6cb7;
  flex-shrink: 0;
}

.logo img {
  height: 38px;
}

.logo h1 {
  font-size: 22px;
  color: #000;
}

.logo a {
  text-decoration: none;
}

.main-nav {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-menu {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-menu li {
  position: relative;
}

.nav-menu > li > a {
  text-decoration: none;
  color: #000;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.3s;
}

.nav-menu > li:hover > a {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  list-style: none;
  padding: 10px 0;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 4px;
  min-width: 180px;
  z-index: 99;
}

.submenu li a {
  display: block;
  padding: 10px 20px;
  color: #444;
  text-decoration: none;
  transition: background 0.2s;
}

.submenu li a:hover {
  background-color: #f5f5f5;
  color: #000;
}

.has-submenu:hover .submenu {
  display: block;
}

/* Menu mobile */
.burger-menu {
display: none;
font-size: 24px;
cursor: pointer;
margin-right: 15px;
color: #000;
}

/* Mobile nav (sidebar) */
.mobile-nav {
position: fixed;
top: 0;
left: -250px;
width: 250px;
height: 100%;
background: #fff;
box-shadow: 2px 0 5px rgba(0,0,0,0.2);
transition: left 0.3s ease;
z-index: 1001;
padding-top: 60px;
}

.mobile-nav ul {
list-style: none;
padding: 0;
margin: 0;
}

.mobile-nav ul li a {
display: block;
padding: 15px 20px;
border-bottom: 1px solid #eee;
color: #333;
text-decoration: none;
}

.mobile-nav ul li a:hover {
background: #f5f5f5;
}

/* Overlay saat menu aktif */
.overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
display: none;
z-index: 1000;
}

/* Saat aktif */
.mobile-nav.active {
left: 0;
}

.overlay.active {
display: block;
}

/* Responsive */
@media (max-width: 768px) {
.burger-menu {
  display: block;
}

.main-nav {
  display: none;
}

.header-buttons {
  display: none;
}

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  flex-grow: 1;
}
}


.login-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #4b6cb7;
  color: #4b6cb7;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.3s;
}

.login-btn:hover {
  background: #4b6cb7;
  color: #fff;
}

.login-btn i {
  font-size: 16px;
}

.header-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header-buttons-mobile {
  display: none;
}


/* Responsive Header */
@media (max-width: 768px) {

  .main-header .container {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .logo {
    flex: 1 0 auto;
  }

  .logo h1 {
    font-size: 16px;
  }
  
  .logo img {
    width: auto;
    height: 33px;
  }

  .header-buttons {
    display: none;
  }

  .login-btn,
  .reward-btn {
    padding: 6px 10px;
    font-size: 13px;
  }

  .reward-btn p {
    display: none;
  }

  .reward-btn i,
  .login-btn i {
    font-size: 14px;
  }

  .header-buttons-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }
} 

/* Hero Main */
.main-content {
  flex: 1;
}
.hero-section {
  background: linear-gradient(135deg, #2980b9, #6dd5fa);
  color: white;
  /* padding: 60px 20px; */
  padding: 162px 37px;
  text-align: center;
}

.hero-content h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

.hero-content p {
  font-size: 18px;
  margin-bottom: 30px;
}

.hero-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary, .btn-secondary {
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  color: white;
  font-weight: bold;
  transition: background 0.3s ease;
}

.btn-primary {
  background-color: #27ae60;
}

.btn-primary:hover {
  background-color: #1e8449;
}

.btn-secondary {
  background-color: #34495e;
}

.btn-secondary:hover {
  background-color: #2c3e50;
}

/* Footer top */
.footer-top {
  padding: 40px 0;
  background: #f0f4ff;
  font-size: 14px;
  color: #333;
}

.footer-top .container {
  margin: auto;
}

.footer-top p {
  max-height: 4.5em;
  overflow: hidden;
  transition: max-height 0.5s ease;
  position: relative;
}

.footer-top p.expanded {
  max-height: 2000px;
}
 

#toggleFooterDesc {
  margin-top: 10px;
  background: linear-gradient(135deg, #4b6cb7, #182848);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
}

#toggleFooterDesc:hover {
  background: #0056b3;
}

/* Footer Bottom */
.footer-bottom {
  background: #dce3f1;
  text-align: center;
  padding: 15px 0;
  font-size: 13px;
  color: #333;
}

.footer-bottom a {
  color: #2c3e50;
  text-decoration: none;
  font-weight: bold;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

/* Back top */

#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  background: linear-gradient(135deg, #4b6cb7, #182848);
  color: white;
  border: none;
  padding: 12px 16px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

#backToTop:hover {
  background-color: #0056b3;
}

@media (max-width: 768px) {
  #backToTop {
    display: none !important;
  }
}

/* Popup Login */
/* Overlay */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(30, 30, 30, 0.5); /* abu gelap transparan */
z-index: 998;
display: none;
}

/* Popup Box */
.popup-box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 16px;
padding: 30px 20px;
width: 90%;
max-width: 400px;
z-index: 999;
display: none;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
from {opacity: 0; transform: translate(-50%, -60%);}
to {opacity: 1; transform: translate(-50%, -50%);}
}

/* Close button */
.close-popup {
position: absolute;
top: 12px;
right: 16px;
font-size: 20px;
cursor: pointer;
}

/* Form Styling */
.auth-form {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 20px;
}

.auth-form input {
padding: 10px 12px;
border-radius: 8px;
border: 1px solid #ccc;
}

.auth-form button {
background-color: #007bff;
color: white;
border: none;
padding: 12px;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
}

.auth-form button:hover {
background-color: #0056b3;
}

.switch-form {
text-align: center;
font-size: 14px;
}

.switch-form a {
color: #007bff;
text-decoration: none;
}

.login-checkout-box button {
background: none;
border: none;
color: #007bff;
cursor: pointer;
text-decoration: underline;
}

.login-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}

.login-popup.hidden {
display: none;
}

.login-popup-content {
background-color: #fff;
padding: 30px 25px;
border-radius: 10px;
width: 90%;
max-width: 400px;
box-shadow: 0 8px 30px rgba(0,0,0,0.2);
position: relative;
}

.close-login {
position: absolute;
top: 10px;
right: 15px;
font-size: 22px;
cursor: pointer;
color: #888;
transition: color 0.3s;
}
.close-login:hover {
color: #333;
}

.login-popup-content h3 {
text-align: center;
margin-bottom: 25px;
color: #333;
}

.login-popup-content input[type="text"],
.login-popup-content input[type="password"] {
width: 100%;
padding: 12px 14px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 16px;
box-sizing: border-box;
transition: border-color 0.3s;
}
.login-popup-content input:focus {
border-color: #007bff;
outline: none;
}

.login-popup-content .login-btn {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #4b6cb7, #182848);
color: white;
font-size: 16px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s;
justify-content: center;
border-radius: 10px;
}
.login-popup-content .login-btn:hover {
background-color: #0056b3;
}

/* User Profile */
.bgc-container {
display: flex;
max-width: 1100px;
margin: 30px auto;
padding: 20px;
gap: 30px;
font-family: Arial, sans-serif;
}

.bgc-sidebar {
width: 250px;
background-color: #fff;
border-right: 1px solid #e5e5e5;
padding-right: 20px;
}

.bgc-sidebar-title {
font-size: 18px;
margin-bottom: 15px;
color: #333;
}

.bgc-sidebar-menu {
list-style: none;
padding: 0;
margin: 0;
}

.bgc-sidebar-menu a {
  color: #333;
  text-decoration: none;
}

.bgc-sidebar-menu a.active {
  color: orange;
  font-weight: bold;
}

.bgc-sidebar-menu a:hover {
  color: #f39c12;
}

.bgc-sidebar-menu li {
margin-bottom: 12px;
}

.bgc-sidebar-menu li a {
color: #333;
text-decoration: none;
display: flex;
align-items: center;
padding: 8px 0;
transition: color 0.2s;
}


.bgc-sidebar-menu li a i {
margin-right: 8px;
color: #888;
width: 18px;
text-align: center;
}

.bgc-sidebar-menu li a:hover {
color: #ee4d2d;
}

.bgc-sidebar-submenu {
list-style: none;
padding-left: 20px;
margin-top: 5px;
}

.bgc-sidebar-submenu li a {
font-size: 14px;
color: #555;
display: block;
padding: 6px 0;
text-decoration: none;
}

.bgc-sidebar-submenu li a:hover {
color: #3498db;
}
.bgc-sidebar-submenu {
list-style: none;
padding-left: 20px;
margin-top: 5px;
}

.bgc-sidebar-submenu li a {
font-size: 14px;
color: #555;
display: block;
padding: 6px 0;
text-decoration: none;
}

.bgc-sidebar-submenu li a:hover {
color: #3498db;
}

.bgc-content {
flex: 1;
background-color: #fff;
padding: 20px 30px;
border: 1px solid #e5e5e5;
border-radius: 6px;
}

.bgc-section-title {
font-size: 22px;
margin-bottom: 25px;
font-weight: bold;
color: #333;
}

.bgc-profile-header {
text-align: left;
margin-bottom: 20px;
}

.bgc-profile-img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
}

.bgc-profile-info {
  margin-top: 15px;
  font-size: 1rem;
  font-weight: normal;
  color: #333;
}

.bgc-profile-info strong {
  color: #007bff;
}
.bgc-form-group textarea {
  padding: 12px 14px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 16px;
font-family: inherit;
width: 100%;
max-width: 100%;
box-sizing: border-box;
transition: border-color 0.3s;
}

.bgc-form-group {
margin-bottom: 20px;
}

.bgc-form-group label {
display: block;
margin-bottom: 6px;
color: #555;
font-size: 14px;
}

.bgc-form-group input {
width: 100%;
padding: 10px 10px;
font-size: 14px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #f9f9f9;
}

.bgc-form-actions {
margin-top: 20px;
}

.bgc-btn {
padding: 10px 20px;
border: none;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.bgc-btn-edit {
background: linear-gradient(135deg, #4b6cb7, #182848) ;
color: #fff;
}

.bgc-btn-edit:hover {
background-color: #2980b9;
}

@media (max-width: 768px) {
.bgc-container {
  flex-direction: column;
}

.bgc-form-group input {
  padding: 10px 0px
  
}

.bgc-sidebar {
  margin-bottom: 20px;
  border-right: none;
}

.bgc-profile-img {
  margin: 0 auto 20px auto;
}

.bgc-form-actions {
  text-align: center;
}
}

/* Single Posts */
/* Wrapper */
.bgc-single-posts-wrapper {
padding: 2rem 1rem;
background-color: #f9f9f9;
font-family: 'Segoe UI', sans-serif;
}

.bgc-single-posts-container {
max-width: 760px;
margin: 0 auto;
background-color: #fff;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

/* Breadcrumb */
.bgc-single-posts-breadcrumb {
font-size: 0.875rem;
color: #888;
margin-bottom: 1.5rem;
}
.bgc-single-posts-breadcrumb a {
color: #3498db;
text-decoration: none;
}
.bgc-single-posts-breadcrumb a:hover {
text-decoration: underline;
}

/* Meta */
.bgc-single-posts-meta {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 1rem;
font-size: 0.9rem;
color: #555;
}
.bgc-single-posts-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
}
.bgc-single-posts-author {
font-weight: 600;
}

/* Featured Image */
.bgc-single-posts-featured img {
width: 100%;
border-radius: 10px;
margin: 1rem 0;
}

/* Title */
.bgc-single-posts-title {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 1rem;
color: #2c3e50;
}

/* Content */
.bgc-single-posts-content p {
margin-bottom: 1.25rem;
line-height: 1.7;
color: #333;
}
.bgc-single-posts-content h1,
.bgc-single-posts-content h2,
.bgc-single-posts-content h3 {
margin-top: 2rem;
margin-bottom: 1rem;
font-weight: 600;
}
.bgc-single-posts-content h1 {
font-size: 1.75rem;
}
.bgc-single-posts-content h2 {
font-size: 1.5rem;
}
.bgc-single-posts-content h3 {
font-size: 1.25rem;
}
.bgc-single-posts-content blockquote {
border-left: 4px solid #3498db;
padding-left: 1rem;
color: #666;
margin: 1.5rem 0;
font-style: italic;
}
.bgc-single-posts-content ul,
.bgc-single-posts-content ol {
margin: 1rem 0 1rem 1.5rem;
color: #444;
}
.bgc-single-posts-content ul li {
list-style-type: disc;
margin-bottom: 0.5rem;
}
.bgc-single-posts-content ol li {
list-style-type: decimal;
margin-bottom: 0.5rem;
}

/* Comment Form */
.bgc-single-posts-comments {
background-color: #ffffff;
padding: 32px 16px;
border-radius: 12px;
max-width: 700px;
margin: 40px auto;
}

.bgc-single-posts-comments h3 {
font-size: 20px;
margin-bottom: 24px;
color: #2c3e50;
}

/* Form Group */
.bgc-single-posts-form-group {
margin-bottom: 20px;
display: flex;
flex-direction: column;
}

.bgc-single-posts-form-group label {
font-weight: 600;
margin-bottom: 8px;
color: #34495e;
}

.bgc-single-posts-form-group input,
.bgc-single-posts-form-group textarea {
padding: 12px 14px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 16px;
font-family: inherit;
width: 100%;
max-width: 100%;
box-sizing: border-box;
transition: border-color 0.3s;
}

.bgc-single-posts-form-group input:focus,
.bgc-single-posts-form-group textarea:focus {
border-color: #3498db;
outline: none;
}

/* Tombol */
.bgc-single-posts-btn {
background: linear-gradient(135deg, #4b6cb7, #182848);
color: white;
padding: 12px 20px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
width: 100%;
max-width: 200px;
margin: 0 auto;
}

.bgc-single-posts-btn:hover {
background-color: #2980b9;
}

/* Responsif */
@media (max-width: 480px) {
.bgc-single-posts-comments {
  padding: 24px 12px;
}

.bgc-single-posts-btn {
  width: 100%;
}
}

/* Comment list */
.bgc-single-posts-comments-list {
max-width: 700px;
margin: 40px auto 60px;
padding: 0 16px;
}

.bgc-single-posts-comments-list h3 {
font-size: 20px;
margin-bottom: 24px;
color: #2c3e50;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}

.bgc-single-posts-comment {
background-color: #f8f8f8;
border-radius: 10px;
padding: 16px;
margin-bottom: 20px;
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.bgc-single-posts-comment-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}

.bgc-single-posts-comment-header img {
width: 40px;
height: 40px;
border-radius: 50%;
}

.bgc-single-posts-comment-header strong {
display: block;
font-weight: 600;
color: #2c3e50;
}

.bgc-single-posts-comment-header span {
font-size: 12px;
color: #7f8c8d;
}

.bgc-single-posts-comment-text {
font-size: 15px;
line-height: 1.6;
color: #333;
}

/* Balasan komentar (hierarki 1 level) */
.bgc-single-posts-comment.reply {
margin-left: 40px;
background-color: #eef6ff;
border-left: 4px solid #3498db;
}

/* Related Posts */
.bgc-single-posts-related {
margin-top: 4rem;
}
.bgc-single-posts-related h3 {
font-size: 1.2rem;
margin-bottom: 1.5rem;
}
.bgc-single-posts-related-list {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.bgc-single-posts-related-item {
flex: 1 1 48%;
background: #fafafa;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
transition: 0.2s ease-in-out;
}
.bgc-single-posts-related-item:hover {
transform: translateY(-2px);
}
.bgc-single-posts-related-item img {
width: 100%;
height: 140px;
object-fit: cover;
}
.bgc-single-posts-related-item h4 {
font-size: 1rem;
padding: 0.8rem;
}
.bgc-single-posts-related-item h4 a {
text-decoration: none;
color: #2c3e50;
}
.bgc-single-posts-related-item h4 a:hover {
text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
.bgc-single-posts-container {
  padding: 1rem;
}

.bgc-single-posts-related-list {
  flex-direction: column;
}

.bgc-single-posts-related-item {
  flex: 1 1 100%;
}
}


/* Ticket */
.bgc-ticket-section {
padding: 30px 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
max-width: 100%;
overflow-x: auto;
}

.ticket-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
flex-wrap: wrap;
gap: 10px;
}

.ticket-header h2 {
font-size: 20px;
font-weight: 600;
color: #333;
}

.ticket-header input {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 8px;
min-width: 200px;
font-size: 14px;
}

.ticket-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}

.ticket-table th, .ticket-table td {
padding: 12px 16px;
border-bottom: 1px solid #eee;
text-align: left;
}

.ticket-table th {
background-color: #f5f5f5;
font-weight: 600;
}

.ticket-table tr:hover {
background-color: #f9f9f9;
}

.status {
padding: 4px 10px;
border-radius: 12px;
font-size: 13px;
font-weight: 500;
}

.status.closed {
background: #e74c3c;
color: #fff;
}

.pagination-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
}

.pagination-controls button {
padding: 6px 12px;
border: none;
border-radius: 6px;
background-color: #3498db;
color: white;
cursor: pointer;
font-size: 14px;
}

.pagination-controls button:disabled {
background-color: #ccc;
cursor: not-allowed;
}

.pagination-controls .page-info {
font-size: 14px;
color: #555;
}

/* Ticket Detail */
.ticket-details-container {
display: flex;
flex-wrap: wrap;
gap: 24px;
padding: 20px;
max-width: 100%;
}

.ticket-sidebar {
flex: 1;
min-width: 250px;
background: #f9f9f9;
padding: 20px;
border-radius: 12px;
box-shadow: 0 0 5px rgba(0,0,0,0.05);
}

.ticket-sidebar h3 {
font-size: 18px;
margin-bottom: 15px;
}

.ticket-sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}

.ticket-sidebar li {
margin-bottom: 10px;
font-size: 14px;
color: #333;
}

.ticket-chat {
flex: 3;
min-width: 300px;
background: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 0 5px rgba(0,0,0,0.05);
}

.chat-history {
max-height: 500px;
overflow-y: auto;
margin-bottom: 20px;
}

.chat-bubble {
margin-bottom: 16px;
padding: 12px 16px;
border-radius: 12px;
max-width: 75%;
position: relative;
}

.chat-bubble.owner {
background: #ecf0f1;
align-self: flex-start;
}

.chat-bubble.operator {
background: #dff9fb;
align-self: flex-end;
margin-left: auto;
}

.chat-meta {
font-size: 12px;
color: #888;
margin-bottom: 6px;
}

.chat-content {
font-size: 14px;
color: #333;
}

.chat-reply {
border-top: 1px solid #eee;
padding-top: 15px;
}

.chat-actions {
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}

.chat-actions input[type="file"] {
font-size: 14px;
}

.chat-actions button {
padding: 8px 20px;
background: linear-gradient(135deg, #4b6cb7, #182848);
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
}

/* Ticket Submit */
.ticket-submit-container {
max-width: 600px;
margin: 0 auto;
background: #fff;
padding: 24px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.ticket-submit-form .form-group {
margin-bottom: 20px;
}

.ticket-submit-form label {
display: block;
margin-bottom: 6px;
font-weight: 600;
color: #333;
}

.ticket-submit-form input[type="text"],
.ticket-submit-form input[type="email"],
.ticket-submit-form select,
.ticket-submit-form textarea {
width: 100%;
padding: 10px 14px;
font-size: 15px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #fff;
box-sizing: border-box;
transition: border-color 0.3s ease;
}

.ticket-submit-form input[readonly] {
background-color: #e9ecef;
color: #555;
}

#editor {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
}

.form-buttons {
display: flex;
gap: 12px;
margin-top: 24px;
}

.submit-btn,
.cancel-btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
cursor: pointer;
transition: background 0.3s;
}

.submit-btn {
background: linear-gradient(135deg, #4b6cb7, #182848);
color: #fff;
}

.submit-btn:hover {
background-color: #2980b9;
}

.cancel-btn {
background-color: #e0e0e0;
color: #333;
}

.cancel-btn:hover {
background-color: #c8c8c8;
}

@media (max-width: 600px) {
.ticket-submit-container {
  padding: 16px;
}

.form-buttons {
  flex-direction: column;
}

.submit-btn,
.cancel-btn {
  width: 100%;
  text-align: center;
}
}