.modal {
  display: none; /* hidden by default */
  position: fixed;
  inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;

  /* allow page scroll if modal content is bigger than viewport */
  /* overflow: auto; */
}

/* Modal box */
.modal-content {
  background-color:antiquewhite;
  margin: 5% auto;
  padding: 10px;
  border-radius: 10px;
  max-width: 600px;
  width: 95%;


  /* internal scroll if content overflows */

  box-shadow: 0 5px 20px rgba(0,0,0,0.3);

  position: relative;      /* anchor child absolute items */
  display: flex;           
  align-items: flex-start; /* align image + form */
  gap: 1rem;  
}

.scrollArea {
  flex: 1;
  overflow: auto;
  max-height: 80vh;
}


.table-form{
    background-color: beige;
    padding: var(--spacing-md);
}

/* the salesperson image */
.salesPerson {
  position: absolute;
  right: -100px;            /* adjust until image stands at right side of form */
  bottom: 0;               /* image stands on same 'floor' */
  width: 180px;            /* adjust size */
  z-index: 2;              /* above background, behind form if needed */
  pointer-events: none;    /* prevent blocking clicks on form */
}

table{
    /* background-color: blue; */
    table-layout: fixed;      /* key */
    width: 100%;              /* required for predictable column calc */
    border-collapse: collapse;    
}

table td,
table th{
    border: 1px solid black;
    padding : 5px;
    /* padding: clamp(0.6rem, 1.2vw, 0.9rem); */
      text-align: center;      /* horizontal center */
  vertical-align: middle;  /* vertical center */
}

table input,
table select,
table textarea{
    width: 100%;
}



/****************************************************/
/*FONT SIZES*/

.formLabel{
  font-size: clamp(0.85rem, 2vw, 1rem);
  text-align: left;
}

.formCaption{
  font-size: clamp(0.75rem, 1.8vw, 0.9rem);
  color: blue
}

.formInput{
  font-size: clamp(0.9rem, 2vw, 1rem);
}
/****************************************************************/


/**********************************************************/
/*FORM INPUT*/
input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
  padding: clamp(0.6rem, 1.2vw, 0.9rem) clamp(0.8rem, 2vw, 1.2rem);
  border: 1px solid #ccc;
  border-radius: 4px;
}
/**************************************************************/

/****************/
/*Errors*/
.errors{
  font-size: clamp(0.75rem, 1.8vw, 0.9rem);
  color:coral;
  text-align: left;
}

/******************************************/
/**IMAGES*/
.motor {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* always 5 columns */
  gap: 5px;
  margin-top: 10px;
}

.motorItem {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 2px;
  aspect-ratio: 1 / 1; /* keep square shape */
  /* background: #f9f9f9; */
  width: 100%; /* fill the grid cell */
}

.motorItem img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/**********************************************************/
/* Common button styles */
/* .buttons button {
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px; 
  transition: all 0.3s ease;
} */

/* BUY button with image */
#btnBuy,
#gbtnBuy  {
  cursor: pointer;
  background-color: #eee;
  color: #333;
}

.buttons button{
  cursor:pointer;
}

#btnBuy:hover,
#gbtnBuy:hover {
  background-color: #ddd;
}

/* QUOTE button standout */
#btnQuote,
#gbtnQuote {
  background-color: #ff6600;
  color: #fff;
}

#btnQuote:hover,
#gbtnQuote:hover {
  background-color: #e65c00;
}

/****************************************************************/
/*TWO COLUMN*/
.twoColumn{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap : 10px
}

.oneColumn{
  display:grid;
  grid-template-columns: 1fr;
  gap:5px;
}

.check{
  display: grid;
  grid-template-columns: 1fr 4fr;
  text-align: left;
}
/*********************************************************/
.closeBtn {
  background-color:#cccccc;
  max-width:10px;
  font-size: 0.5em;
  font-weight: bold;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* hover */
.closeBtn:hover {
  background-color: #ff4444;  /* lighter red */
  transform: scale(1.15);     /* slight zoom */
}


/********************************************************************/
/*SELECTION BTN*/
.menuButton button {
  width: clamp(40px, 50vw, 160px); /* min, fluid, max */
  font-size: clamp(0.5rem, 2.5vw, 0.7rem);
  border: none;
  padding: .6rem 1rem;
  background: #cccccc;
  border-radius: 1em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

button:not(.disabled):hover {
  /* box-shadow: 0 5px 0 #aaa; */
  transform: translateY(-2px);
}

.menuButton button img {
  max-width: 40px;
  max-height: 40px;
}

.menuButton button.disabled {
  box-shadow: 0 1px 0 #aaa inset;
  transform: translateY(2px);
  opacity: .6;
  cursor: not-allowed;
}
/*******************************************************************/

/*********************************************/
/*SCREEN SIZE*/
@media (max-width: 499px) {
  .salesPerson {
    width: 100px;     /* reduce size */
    right: -40px;     /* pull image closer */
    bottom: 0;        /* keep aligned */
  }

}
/********************************************************/
@media (max-width: 600px) {
  .menuButton button{
    width: clamp(20px, 20vw, 100px); /* min, fluid, max */
    font-size: clamp(0.2rem, 2vw, 0.7rem);;
  }
}

/*text-align*/
.c{text-align: center;}
.l{text-align: left;}
.r{text-align: right;}