/* --- Seat Styles --- */
.seat-style {
  position: relative;
  width: 26px;       /* smaller to fit mobile screens */
  height: 34px;
  cursor: pointer;
  user-select: none;
  margin: 1px auto;
  background: var(--seat-bg, #fd4c5c);
  border-left: 2px solid var(--seat-border-color, #b33b47);
  border-right: 2px solid var(--seat-border-color, #b33b47);
  border-bottom: 5px solid var(--seat-bottom-color, #992f3a);
  border-radius: 6px 6px 0 0;
  border-top-left-radius: 50% 30%;
  border-top-right-radius: 50% 30%;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.6), 0 2px 3px rgba(0,0,0,0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 0.6rem;
  color: var(--seat-color, #fff);
  padding: 0;
  transition: background 0.3s ease, color 0.3s ease;
}

.seat-style::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 7px;
  background: var(--seat-bg, #fd4c5c);
  border-radius: 6px 6px 4px 4px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.7), 0 1px 2px rgba(0,0,0,0.2);
  z-index: 2;
}

.seat-style::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: -2px;
  width: calc(100% + 4px);
  height: 5px;
  background: var(--seat-bottom-bg, #992f3a);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 0 1px 2px rgba(0,0,0,0.2);
}

.armrest {
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 12px;
  background: var(--seat-bg, #fd4c5c);
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.6), 0 1px 1px rgba(0,0,0,0.2), 0 2px 2px -1px rgba(0,0,0,0.4);
  z-index: 1;
}
.left-armrest { left: -2px; border-top-left-radius: 6px; }
.right-armrest { right: -2px; border-top-right-radius: 6px; }

/* Seat statuses */
.seat-style.available {
  --seat-bg: #fd4c5c;
  --seat-border-color: #b33b47;
  --seat-bottom-color: #992f3a;
  --seat-bottom-bg: #992f3a;
  --seat-color: #fff;
}
.seat-style.booked {
  --seat-bg: linear-gradient(135deg, #999 0%, #777 100%);
  --seat-border-color: #666;
  --seat-bottom-color: #555;
  --seat-bottom-bg: linear-gradient(135deg, #666 0%, #444 100%);
  --seat-color: #eee;
  cursor: not-allowed;
}
.seat-style.pending {
  --seat-bg: #ffc107;
  --seat-border-color: #d39e00;
  --seat-bottom-color: #b38600;
  --seat-bottom-bg: linear-gradient(135deg, #c49100 0%, #9e7600 100%);
  --seat-color: #333;
  cursor: not-allowed;
}
.seat-style.selected {
  --seat-bg: linear-gradient(135deg, #28a745 0%, #19692c 100%);
  --seat-border-color: #1e4f1a;
  --seat-bottom-color: #14400f;
  --seat-bottom-bg: linear-gradient(135deg, #19692c 0%, #0f320a 100%);
  --seat-color: #fff;
  box-shadow: inset 0 2px 3px rgba(0,100,0,0.8);
}

.vertical-company-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    font-weight: 700;
    font-size: 13px;
    font-family: "Poppins", sans-serif;
    color: #fd4c5c;
    text-shadow: 0 0 1px #fff;
    opacity: 0.95;
    pointer-events: none;

    writing-mode: vertical-rl; /* Makes text vertical */
    text-orientation: upright;  /* Keeps letters upright */
    letter-spacing: 2px;        /* Adjust spacing between letters */
    line-height: 1.2;           /* Adjust spacing between lines/words */
}





/* --- Modal Layout & Scroll Fix --- */
#seatModal .modal-dialog {
  max-width: 480px;
  margin: 0.8rem auto;
}

#seatModal .modal-content {
  transform: scale(0.82);
  transform-origin: top center;
}

#seatModal .modal-body {
  max-height: 100vh; /* fit full viewport */
  overflow: visible;  /* no scrolling */
  padding: 0.5rem;
}



		#toast-container {
			position: fixed;
			top: 20px;
			right: 20px;
			z-index: 9999;
		}

		.toast {
			min-width: 250px;
			max-width: 400px;
			padding: 15px 20px;
			margin-bottom: 10px;
			border-radius: 6px;
			color: #fff;
			box-shadow: 0 2px 8px rgba(0,0,0,0.2);
			opacity: 0;
			transform: translateX(100%);
			transition: all 0.5s ease-in-out;
			position: relative;
		}
		.toast.show {
			opacity: 1;
			transform: translateX(0);
		}
		.toast.success { background-color: #28a745; }
		.toast.error { background-color: #dc3545; }
		.toast .close-btn {
			position: absolute;
			top: 8px;
			right: 12px;
			color: #fff;
			cursor: pointer;
			font-weight: bold;
			font-size: 18px;      /* make it bigger */
			line-height: 18px;    /* center it vertically */
			padding: 2px 6px;     /* add some clickable area */
			border-radius: 50%;   /* optional: circular button */
			background: rgba(0,0,0,0.2); /* optional: slight background for visibility */
		}
		.toast .close-btn:hover {
			background: rgba(0,0,0,0.4);
		}