* { margin:0; padding:0; box-sizing:border-box; }
  body { font-family: Arial, sans-serif; line-height:1.6; color:#333; }

  header {
  background: #fff;
  color: #333;
  position: sticky;
  top: 0;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


  nav { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; position:relative; flex-wrap:wrap; }
  .logo img { height:40px; }

  ul.menu { list-style:none; display:flex; align-items:center; }
  ul.menu li { position:relative; }
  ul.menu li a { display:block; padding:10px 15px; color:#333; text-decoration:none; }
  ul.menu li a:hover { background:#f2f2f2; }
  .has-submenu > a { display:flex; align-items:center; gap:6px; }
  .arrow { display:inline-flex; transition:transform 0.2s ease; }

  ul.submenu {
    list-style:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    display:none;
    min-width:150px;
    flex-direction:column;
    z-index:1000;
  }
  ul.submenu li a { padding:10px; }

  ul.menu li:hover > ul.submenu { display:flex; }

  .hamburger { display:none; flex-direction:column; cursor:pointer; }
  .hamburger div { width:25px; height:3px; background:#333; margin:4px 0; transition:0.3s; }
  .hamburger.active div:nth-child(1) { transform:rotate(-45deg) translate(-5px,6px); }
  .hamburger.active div:nth-child(2) { opacity:0; }
  .hamburger.active div:nth-child(3) { transform:rotate(45deg) translate(-5px,-6px); }

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

/* Ensure both buttons are equal height */
.form-actions button,
.form-actions .btn-cancel {
    height: 44px;                 /* Same height */
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

/* Save button (leave as-is if already styled) */
.form-actions button {
    color: #fff;
    border: none;
    cursor: pointer;
}

/* Cancel button – red */
.btn-cancel {
    background: #dc3545;          /* Bootstrap danger red */
    color: #fff;
    text-decoration: none;
}
/* All clickable buttons */
button {
  cursor: pointer;
  border-radius:5px;
}

/* Disabled buttons */
button:disabled {
  cursor: not-allowed;
}

/* Disabled Place Order button */
button:disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
  opacity: 0.8;
}

/* Hover states */
.form-actions button:hover {
    background: #336565;
}

.btn-cancel:hover {
    background: #c82333;
}


  
  main { padding:20px; }
  section { padding:40px 20px; }
  section:nth-child(even) { background:#f4f4f4; }

  h1,h2,h3 { margin-bottom:15px; }
  p { margin-bottom:15px; }

  .container { max-width:1100px; margin:0 auto; }
  .btn {
    display:inline-block;
    background:#333;
    color:#333;
    padding:10px 20px;
    text-decoration:none;
    border-radius:5px;
    transition:0.3s;
  }
  .btn:hover { background:#555; }

  img.responsive { max-width:100%; height:auto; border-radius:8px; }
  
  .container {
  max-width: 1100px;
  margin: 0 auto;
}
input, textarea, button, select {
  width: 100%;
  padding: 12px;
  font-size: 16px;
}
button{
	background-color:#489191;
	color:#fff;
	border:none;
}
.required_input{
	color:#f00;
}
.message {
  padding: 10px;
  border-radius: 5px;
}

.message.success {
  background: #d4edda;
  color: #155724;
}

.message.error {
  background: #f8d7da;
  color: #721c24;
}

/* ===============================
   GLOBAL TABLE STYLES
================================ */

.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.table th,
.table td {
  padding: 12px;
  border-bottom: 1px solid #ddd;
  text-align: left;
  vertical-align: middle;
}

.table th {
  background: #f4f4f4;
}

/* Hover */
.table tbody tr {
  transition: background-color 0.2s ease;
}

.table tbody tr:hover {
  background-color: #fff3cd;
}

/* Actions column only */
.table th.actions,
.table td.actions {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

/* Prevent form styles affecting tables */
.table input,
.table select,
.table textarea,
.table button,
.table .btn-small {
  width: auto;
  padding: 6px 10px;
  font-size: 14px;
}


/* ===============================
   ACTIONS COLUMN (GLOBAL)
================================ */

.actions {
  text-align: right;
  white-space: nowrap;
}

.table td.actions,
.table th.actions {
  text-align: right;
}

/* ===============================
   SMALL ACTION BUTTONS
================================ */

.btn-small {
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 4px;
  text-decoration: none;
  margin-left: 5px;
  display: inline-block;
  width: auto;
}

.btn-edit {
  background: #007bff;
  color: #fff;
}

.btn-delete {
  background: #dc3545;
  color: #fff;
  border: none;
  cursor: pointer;
}

/* ===============================
   SMALL TEXT BELOW TEXTBOXES ON ORDER PREVIEW
================================ */

.helper-text {
  display: block;
  font-size: 11px;
  color: #888;
  margin-top: 3px;
}


@media(max-width:768px){
    .hamburger { display:flex; }
    ul.menu {
      display:none;
      flex-direction:column;
      align-items:stretch;
      order:3;
      flex-basis:100%;
      width:100%;
      background:#fff;
      position:absolute;
      top:100%;
      left:0;
      z-index:1000;
      margin-top:8px;
      max-height:calc(100vh - 90px);
      overflow-y:auto;
	  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    ul.menu.menu-active { display:flex; }
    ul.menu li { width:100%; border-bottom:1px solid #e2e2e2; }
    ul.menu li:last-child { border-bottom:none; }
    ul.menu li:hover > ul.submenu { display:none; }
    ul.menu li a { width:100%; }
    ul.submenu {
      position:relative;
      display:none;
      width:100%;
      background:#fafafa;
      border-top:1px solid #e9e9e9;
      box-shadow:none;
    }
    ul.submenu li {
      border-bottom:1px solid #ececec;
    }
    ul.submenu li:last-child {
      border-bottom:none;
    }
    ul.submenu li a { padding-left:30px; background:#fafafa; }
    ul.submenu li a:hover { background:#f2f2f2; }
    .has-submenu > a { display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
    .arrow { margin-left:auto; }
	.has-submenu.open > ul.submenu {
		display:flex;
		flex-direction:column;
	}
    .has-submenu.open > a .arrow {
        transform:rotate(180deg);
    }
  }
  

@media (max-width: 600px) {
  .container {
    padding: 15px;
    margin: 15px;
  }
  /* ===============================
   RESPONSIVE TABLES (GLOBAL)
================================ */

.table thead {
  display: none;
}

.table tr {
  display: block;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.table td {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border: none;
  border-bottom: 1px solid #eee;
}

.table td:last-child {
  border-bottom: none;
}

.table td::before {
  content: attr(data-label);
  font-weight: bold;
}

.actions {
  justify-content: flex-end;
}

}