/* tds number  */
#tanModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border: 1px solid #ccc;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
}
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

/* tds styles end here  */
.pavilion-container {
margin: 40px auto;
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
margin-top: 90px;
}

.stall-container {
max-width: 900px;
margin: 40px auto;
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
margin-top: 90px;
}

h2 {
text-align: center;
margin-bottom: 20px;
color: #1069A8;
}

.form-step {
display: none;
}
.form-step.active {
display: block;
animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}

label {
display: block;
margin: 15px 0 6px;


}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.3s;
}

input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: #1069A8;
}

.options label {
font-weight: normal;
color: #333;
display: flex;
align-items: center;
margin-bottom: 8px;
cursor: pointer;
}

.options input {
accent-color: #1069A8;
margin-right: 10px;
}

.form-navigation {
display: flex;
justify-content: space-between;
margin-top: 25px;
}

.form-navigation button {
padding: 10px 20px;
font-size: 15px;
border: none;
border-radius: 8px;
cursor: pointer;
background-color: #1069A8;
color: #fff;
transition: background-color 0.3s ease;
}

.form-navigation button:hover {
background-color: #0d5586;
}

.progress {
text-align: center;
padding: 20px;
margin-bottom: 20px;
font-weight: bold;
color: #1069A8;
}
.seat.orange,
.seat.blue,
.seat.green,
.seat.white,
.seat.lightpink,
.seat.lightblue,
.seat.brown {
width: 45px;   /* 3 * 15px */
height: 30px;  /* 2 * 15px */
background-color: white;
}

/* Yellow seats → 3x3 grid squares */
.seat.yellow {
width: 45px;   /* 3 * 15px */
height: 45px;  /* 3 * 15px */
background-color: white;
}
.six-sqm {
width: 60px !important;
height: 45px !important;
/* background-color: white !important; */
border: 1px solid #8B4513;
border-top:3px solid;
font-size: 15px !important;
border-radius: 0 !important;
}
.six-sqms {
width: 60px!important;
height: 25px!important;
font-size:15px !important;
/* display: flex;
justify-content: end;*/
align-items: start; 
box-sizing: border-box;
overflow: hidden;
}
.six-sqmvertical {
width: 35px!important;
height: 65px!important;
font-size:15px !important;
/* display: flex;
justify-content: end;*/
align-items: start; 
box-sizing: border-box;
overflow: hidden;
}

/* 3x3 */
.seatssqrt{
width: 45px!important;   /* 3 * 15px */
height: 45px!important;  /* 3 * 15px */
/* border-radius: 8px 8px 0 0 !important; */
}
.nine-sqm{
width: 63px!important;
height: 63px!important;
}
.twelve-sqm{
/* border-top: 8px 8px 0 0 !important; */
width: 80px!important;   /* 3 * 15px */
height: 65px!important; 
/* border-radius: 8px 8px 0 0 !important; */
}

.eighteen-sqm{
width: 120px!important;   /* 3 * 15px */
height: 60px!important; 
margin-top: -2px;
font-size: 30px !important;
}

/* Seats */
.seat.selected { background-color: #1069A8; color: white; border: 2px solid #0a4f7a; }
.seat.selected:hover { filter: brightness(1.1); }
.seat.booked { background-color: #999; color: #fff; cursor: not-allowed; }
.seat.booked:hover { opacity: 0.85; }

.zone-yellow { background-color: #FFD700; }
.zone-green  { background-color: #4CAF50; }
.zone-blue   { background-color: #2196F3; }
.zone-orange { background-color: #FF9800; }

.pavilion-layout {
margin: 20px auto;
text-align: center;
position: relative;
background-image: linear-gradient(#ddd 1px, transparent 1px),
                  linear-gradient(90deg, #ddd 1px, transparent 1px);
background-size: 16px 15px; /* grid background */
padding: 7px;
}

/* Outer black wall */
.pavilion-layout::before {
content: "";
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: -5px;
border: 8px solid #000;
pointer-events: none;
}

:root{
--grid-unit: 20px;
}
.pavilion-layout2 {
position: relative;
margin: 30px 60px auto;

width: calc(25 * var(--grid-unit));   /* 25 columns */
height: calc(44 * var(--grid-unit));  /* 44 rows */

background-image:
  linear-gradient(#ddd 1px, transparent 1px),
  linear-gradient(90deg, #ddd 1px, transparent 1px);

background-size:
  var(--grid-unit) var(--grid-unit);

box-sizing: border-box;
}

.exit-bottom-pv2 {
right: -25px;
top: 14%;
transform: translateX(-55%);
}
.floorplan-container-top-pv2 {
left: 75px;
top: 30px !important;
transform: translateX(-55%);
}
.floorplan-container-middle-pv2 {
left: 30px;
top: 14%;
transform: translateX(-55%);
}

.entry-bottom-pv2 {
right: -40px;
top: 78%;
transform: translateX(-45%);
}

/* Outer black wall */
.pavilion-layout2::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 8px solid #000;
pointer-events: none;
box-sizing: border-box;
}

/* grid setup */
.pavilion-layout2 .grid {
display: grid;
grid-template-columns: repeat(10, 1fr); /* 8 columns */
grid-auto-rows: 40px; /* seat row height */
gap: 9px;
/* justify-items: center; */
align-items: start;
}


.grid {
display: grid;
grid-template-columns: repeat(26, 45px);
grid-auto-rows: 45px;
gap: 4px;
justify-content: center;
position: relative;
z-index: 1;
}

.seat {

display: flex;
justify-content: center;
align-items: start;
font-size: 12px;
font-weight: bold;
border-radius: 0;
overflow: visible !important;
cursor: pointer;
box-sizing: border-box;
}

.seat.selected { background-color: #32CD32 !important; color: #fff; }
.seat{
color: black;
font-size: 15px;
font-family: "Candara", sans-serif;
font-weight: 500;
}
.yellow { border:3px solid #ffea00; }
.blue { border:3px solid #357d95; }
/* .lightblue { border:3px solid #ADD8E6; } */
.green { border:3px solid #63c85b; }
.darkgreen{ border:3px solid #064503d7;}
.orange { border:3px solid #FFA500; }
.white { border:3px solid #fff; border: black; }
/* .brown { border:3px solid e1810c;border: 1px solid color black } */
.lightpink { border:3px solid #c85672; }
.purple { border:3px solid #a63faf; }

/* New seat size classes */


/* Exit/Entry labels */
.exit-label {
position: absolute;
background: white;
padding: 2px 6px;
font-size: 12px;
font-weight: bold;
color: red;
z-index: 2;
}
.seat input[type="checkbox"] {
display: none;
}


/* Optional: highlight when selected */

.exit-top { top: -7px; left: 26%; transform: translateX(-50%); }
.exit-bottom { bottom: -12px; left: 28%; transform: translateX(-50%); }
.exit-bottom2 { bottom: -5px; left: 74%; transform: translateX(-75%); }

/* css for legend stall details */
.legend-box {
width: 350px;
border: 2px solid #000;
font-family: Arial, sans-serif;
text-align: center;
font-size: 14px;
text-wrap: auto;
}
.legend-header {
background: white;
font-weight: bold;
padding: 6px;
border-bottom: 2px solid #000;
}
.legend-row {
padding: 6px;
border-bottom: 1px solid #000;
color: #000;
}
.legend-row:last-child {
border-bottom: none;
}

/* Stall colors */
.drones { background: #357d95; color: white;}         /* Light Orange */
.oem { background: #c85672; color: white;}         /* Light Purple */
.emerging { background: #63c85b; color: white; }       /* Light Blue */
.aerospace { background: #a63faf;color: white; }  /* Light Pink/Purple */
.defence { background:  #cd7304; color: white; } /* Dark Blue */
.academia { background: #064503d7;color: white; }    /* Green */
.ots { background: #ffea00; }     /* Yellow-Orange */
.legend-row {
cursor: pointer;            /* Show hand cursor */
transition: background 0.2s, transform 0.2s;
}

.legend-row:hover {
filter: brightness(0.9);    /* Slightly darken on hover */
transform: scale(1.02);     /* Subtle zoom */
box-shadow: 0 0 5px rgba(0,0,0,0.3); /* Hover glow */
}

.legend-row.highlight {
border: 3px solid #000;
font-weight: bold;
}

.selected-label {
display: none;
font-weight: bold;
margin-left: 10px;
color: #000;
position: absolute;
right: -70px;

}

.legend-row.highlight .selected-label {
display: inline-block;  /* only show when row is selected */
} 

/* payment summary box styles  */
.payment-box {
width: 400px;
background: #fff;
border: 2px solid #ddd;
border-radius: 12px;
padding: 20px;
font-family: Arial, sans-serif;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.payment-box h3 {
margin: 0 0 15px;
font-size: 18px;
color: #333;
text-align: center;
}

.payment-row {
display: flex;
justify-content: space-between;
margin: 8px 0;
font-size: 15px;
color: #444;
}

.payment-row.gross {
font-weight: bold;
font-size: 16px;
border-top: 2px solid #eee;
margin-top: 12px;
padding-top: 10px;
color: #222;
}
/* Disabled state */
.legend-row.disabled {
color: #aaa;
border: 1px dashed #ccc;
cursor: not-allowed;
pointer-events: none;
background: #f5f5f5;
}


/* the code for registration and cofnece dot borde box start from here  */


:root {
    /* --- You can change this single value to scale the entire diagram --- */
    --grid-unit: 20px; 
    
    --border-color: black;
    --booth-border-width: 2px;
    --area-border-width: 3px;
    --container-border-width: 4px;
}


.floorplan-wrapper {
    /* * The base grid unit is calculated to make the total width 400px.
     * Formula: 400px / 28 units = 14.2857px per unit.
    */
   --grid-unit: 20px;
    
    --border-color: black;
    --booth-border-width: 2px;
    --area-border-width: 2px;
    --container-border-width: 3px;

    font-family: Arial, sans-serif;
    font-size: calc(var(--grid-unit) * 0.75); /* Readjusted font size for clarity */
}

/* The main container with the dashed border */
.floorplan-container {
  display: grid;
  grid-template-columns: repeat(30, var(--grid-unit));
  grid-template-rows: repeat(30, var(--grid-unit));

  width: calc(30 * var(--grid-unit));
  height: calc(30 * var(--grid-unit) + 1px);

  position: relative;
  justify-items: start;
  align-items: start;

  border: var(--container-border-width) solid var(--border-color);
  background-color: white;
  box-sizing: border-box;
  outline:10px;

  background-image:
      linear-gradient(rgba(0,0,0,0.15) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,0.15) 1px, transparent 1px);

  background-size: var(--grid-unit) var(--grid-unit);
  padding: 2px !important;
  overflow: visible !important;
  }
/* .small-row {
  width: 5px;
  height: 2px;
  font-size: 9px;
} */
/* Base styles for all the boxes inside */
.floorplan-item {
  display: flex;
  justify-content: start;
  align-items: start;
  font-size: 12px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  box-sizing: border-box;
}
.twelve-sqms{
  grid-column: span 4;
  grid-row: span 3;
  width: 55%;
  height: 75%;
}

/* Styling for the smaller "5m x 5m" booths */
/* .booth {
    width: calc(5 * var(--grid-unit));
    height: calc(5 * var(--grid-unit));
    border: var(--booth-border-width) solid var(--border-color);
} */

/* Styling for the larger Conference and Registration areas */
/* .large-area {
    width: calc(12 * var(--grid-unit));
    height: calc(6 * var(--grid-unit));
    border: var(--area-border-width) solid var(--border-color);
} */
/* 
.large-area .title,
.large-area .dimensions {
    font-weight: bold;
    text-decoration: underline;
} */

/* --- Absolute positioning for each element based on the grid --- */
/* #booth1 { top: calc(1 * var(--grid-unit)); left: calc(4 * var(--grid-unit)); }
#booth2 { top: calc(1 * var(--grid-unit)); left: calc(9 * var(--grid-unit)); }
#booth3 { top: calc(1 * var(--grid-unit)); left: calc(14 * var(--grid-unit)); }
#booth4 { top: calc(6 * var(--grid-unit)); left: calc(19 * var(--grid-unit)); }
#booth5 { top: calc(11 * var(--grid-unit)); left: calc(19 * var(--grid-unit)); }
#booth6 { top: calc(16 * var(--grid-unit)); left: calc(19 * var(--grid-unit)); }

#conference { bottom: calc(7 * var(--grid-unit)); left: calc(1 * var(--grid-unit)); }
#registration { bottom: calc(1 * var(--grid-unit)); left: calc(1 * var(--grid-unit)); } */
/* the code for registration and cofnece dot borde box end from here  */

/* main legends small boxed of guidance availble/booked/selected */
.main-legends {
display: flex;
gap: 20px;
font-family: Arial, sans-serif;
margin: 10px 0;
}

.box {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 6px;
border: 1px solid #000; /* outline for clarity */
border-radius: 4px;     /* small rounded look */
vertical-align: middle;
}

.available {
background-color: white;
}

.selected {
background-color: #32CD32;
}

.booked {
background-color: #999;
}
/* main legends small boxed of guidance availble/booked/selected  end here */
.scroll-container {
     /* arrange items in a row */
overflow-x: auto;          /* enable horizontal scroll */
max-width: 99%;          /* limit total width */
white-space: nowrap;       /* prevent wrapping */
gap: 10px;                 /* space between items */
padding: 10px;
scroll-behavior: smooth;   /* smooth scrolling */
}

.scroll-container::-webkit-scrollbar {
height: 8px;               /* scrollbar height */
}

.scroll-container::-webkit-scrollbar-thumb {
background: #aaa;
border-radius: 4px;
}
:root{
--grid-unit: 20px;}
.pavilion-layout2 {
display: grid;
position: relative;
margin: 30px 60px auto;
grid-template-columns: repeat(25, 20px) !important;
grid-template-rows: repeat(42, 20px) !important;
width: calc(25 * var(--grid-unit));   /* 25 columns */
height: calc(42 * var(--grid-unit));  /* 44 rows */


background-image:
linear-gradient(#ddd 1px, transparent 1px),
linear-gradient(90deg, #ddd 1px, transparent 1px);

background-size:
var(--grid-unit) var(--grid-unit);

box-sizing: border-box;
}

.pavilion2-grid{
display:grid;
grid-template-columns: repeat(25, 20px);
grid-template-rows: repeat(42, 20px);
box-shadow: 0 0 0 6px black;


}
.six-sqmpurple{
width: 40px !important;
height: 65px !important;
}
.six-sqmpurplevertical{
width:65px !important;
height:48px !important;
margin-bottom: -20px !important;
}
:root{
--grid-unit: 20px;}
:root {
--grid-unit: 20px;
}

.pavilion-layout {
display: grid;
position: relative;
margin: 30px 60px auto;

grid-template-columns: repeat(81, 20px) !important;
grid-template-rows: repeat(24, 20px) !important;

width: calc(81 * var(--grid-unit));
height: calc(24 * var(--grid-unit));

background-image:
linear-gradient(#ddd 1px, transparent 1px),
linear-gradient(90deg, #ddd 1px, transparent 1px);

background-size:
var(--grid-unit) var(--grid-unit);

box-sizing: border-box;
}

.pavilion-grid{
display:grid;
grid-template-columns: repeat(81, 20px);
grid-template-rows: repeat(24, 20px);

}
.six-sqmdefense{
width: 59px !important;
height: 40px !important;
align-items:start !important;
margin-left:-5px !important;
}
.six-sqmdefensevertical{
height:55px !important;
width:40px !important;
align-items: start !important;
margin-left: -5px !important;
}
.yellowbox{
width: 194px !important;
height: 440px !important;
border: 6px solid black;
font-size: 20px !important;
text-align: center !important;
position:relative;
display: flex;
font-weight: 200px;
justify-content: center !important;
margin-left: -3px !important;
align-items: center !important;
background-color: yellow;
}
.brownboxC{
width:72px !important;
height:138px !important;
margin-top: -2px !important;
background-color: #8B4513 !important;
}
.brownboxA{
width:160px !important;
height:80px !important;
margin-top: -2px !important;
background-color: #8B4513;
}
.brownboxAbottom{
width:160px !important;
height:80px !important;
/* margin-top: -2px !important; */
background-color: #8B4513;
}

/* Layout wrapper for zones/floorplan and bottom section */
.stall-zones-wrapper {
display: flex;
gap: 30px;
margin-top: 40px;
}

/* Zones section on left */
.zones-section {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
}

/* Scale box below zones on left */
.scale-box {
position: relative;
width: 140px;
height: 70px;
border: 2px solid #000;
background: white;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

font-weight: bold;
}

.scale-box .title {
font-size: 14px;
}

.scale-box .sub {
font-size: 12px;
font-weight: normal;
}

/* Right side container for registration and payment */
.payment-section-wrapper {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
align-items: flex-end;
}

/* REGISTRATION COUNTER - above payment */
.registration-box {
position: relative;
width: 100%;
max-width: 350px;
height: 100px;
border: 2px solid #000;
background: white;

display: flex;
align-items: center;
justify-content: center;

font-weight: bold;
text-transform: uppercase;
font-size: 16px;
}

/* Responsive design for smaller screens */
@media (max-width: 1024px) {
.stall-zones-wrapper {
flex-direction: column;
gap: 20px;
}

.payment-section-wrapper {
width: 100%;
align-items: stretch;
}

.scale-box {
width: 100%;
max-width: 300px;
}

.registration-box {
width: 100%;
}
}

.thirtysix-sqmdefense {
width: 180px !important;
height: 80px !important;
/* background: yellow !important; */
/* border: 2px solid black !important; */

display: flex !important;
align-items: center !important;
justify-content: center !important;

margin-left: -5px !important;
}
.thirtysix-sqmdefense span small {
font-size: 14px;
font-weight: normal;
margin-top: 3px;
}
.twentyfour-sqmdefense {
width: 120px !important;
height: 80px !important;
align-items: start !important;
margin-left: -5px !important;
}

.twentyfour-sqmdefense span small {
font-size: 14px;
font-weight: normal;
margin-top: 3px;
}

.twentyfive-sqmdefense {
width: 100px !important;
height: 100px !important;
margin-left: -4px !important;
/* margin-top: 5px !important; */
background: yellow !important;
border: 2px solid black !important;

display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}

.twentyfive-sqmdefense span {
font-size: 22px !important;
font-weight: bold !important;
color: black !important;
line-height: 1.3 !important;
}

.twentyfive-sqmdefense span small {
font-size: 14px !important;
font-weight: normal !important;
}

.tenx-five-sqmdefense {
width: 200px !important;
height: 100px !important;
margin-left: -4px !important;
/* margin-top: 5px !important; */
background: white !important;
border: 2px solid black !important;

display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.tenx-five-sqmdefense span {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: black !important;
text-align: center !important;
font-weight: bold !important;
}

.registration-line {
width: 125px;
border-bottom: 2px solid black;
margin: 0 auto !important;
}