/* ======================================================
   CONTACT FORM WRAPPER
   ====================================================== */

#contactForm{
  display: grid;
  /* background-color: aquamarine; */
  padding: 1rem;
  text-align: center;
}

#contactForm h2{
  color:#909090;
  font-size: clamp(1em, 6vw, 3em);
  font-weight: 700;
}

/* =====================================================
   GRID – DESKTOP (IDLE, NO PRODUCT)
   ====================================================== */


.titleHead{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem;
}

/* Initial hidden state */
.titleHead h2,
.titleHead img{
  opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
}


/* Text comes first */
.titleHead h2{
  transform: translateX(-20px);
}


.titleHead img{
   max-width: 100px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: .25s; /* 👈 stagger */
}

.titleHead.show img{
  opacity: 1;
  transform: translateY(0);
}



/* When visible */
.titleHead.show h2,
.titleHead.show img{
  opacity: 1;
  transform: translate(0);
}


.contact-form{
  border: 1px solid #cccccc;
  border-radius: 1em;
  display: grid;
  background-color: var(--pet);
  align-items: center;
  padding: 1em;
  color:#f7f7f7;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 3fr)
    minmax(0, 1fr);

  gap: 0.5rem;
  transition: grid-template-columns 0.4s ease;
}

/* ======================================================
   GRID ITEM PLACEMENT – DESKTOP IDLE
   ====================================================== */

#selectDIV { grid-column: 1; }
#infoDIV   { grid-column: 2; }
#buyDIV    { grid-column: 3; }

/* ======================================================
   COMMON GRID CHILD STYLING
   ====================================================== */

.contact-form > div{
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  /* background-color: antiquewhite; */
}

.contact-form table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
}

.contact-form table td{
    border:0px
}

/* ======================================================
   PRODUCT – HIDDEN (IDLE)
   ====================================================== */

#productDIV{
  display: none;
}

/* ======================================================
   PRODUCT TYPE TOGGLE
   ====================================================== */

#productMotor,
#productGeneral{
  display: none;
}

.contact-form.show-motor #productMotor{
  display: block;
}

.contact-form.show-general #productGeneral{
  display: block;
}

/* ======================================================
   DESKTOP – PRODUCT SHOWN
   ====================================================== */

.contact-form.show-product{
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 2fr)
    minmax(0, 2fr)
    minmax(0, 1fr);
}

.contact-form.show-product #productDIV{
  display: block;
  grid-column: 2;
}

.contact-form.show-product #infoDIV{
  grid-column: 3;
}

.contact-form.show-product #buyDIV{
  grid-column: 4;
}

/* ======================================================
   BUTTONS
   ====================================================== */

#selectDIV button,
#buyDIV button{
  width: 100%;
  display: grid;
  place-items: center;
}

/*==========================================================================
SELECT BUTTON
=============================================================================*/
/* base button look */
#selectDIV button{
  width: 100%;
  padding: 1rem;
  border-radius: 12px;
  background: #f7f7f7;
  border: 2px solid #ddd;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .75rem;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background-color .2s ease;
}

/* hover = selectable hint */
#selectDIV button:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  border-color: #2ecc71;
}

/* SELECTED state */
#selectDIV button.selected{
  background: linear-gradient(135deg,#1fae6e,#2ecc71);
  border-color: #1fae6e;
  color: #fff;
  box-shadow: 0 14px 30px rgba(46,204,113,.45);
  transform: translateY(-2px);
}

/* icon feedback */
#selectDIV button img{
  width: 42px;
  transition: transform .2s ease, filter .2s ease;
}

#selectDIV button.selected img{
  transform: scale(1.05);
  filter: brightness(1.1);
}
/*********************************************************************************/

/*==============================================================
BUY BUTTON
===================================================*/
/* base */
.img-cell {
  position: relative;
  height: 60px; /* adjust to your image height */
}

.img-cell img {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity .3s ease, transform .3s ease;
}

/* button hover transform */
/* shared base */
.mainFormBtn{
  width: 100%;
  padding: 1rem;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  cursor: pointer;
  transition: 
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    color .2s ease,
    opacity .2s ease;
}

.mainFormBtn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

/* PRIMARY — GET QUOTATION */
#mainFormQuote{
  background: linear-gradient(135deg, #ff8a00, #ffb347);
  color: #fff;
  border: none;
  /* box-shadow: 0 10px 24px rgba(46,204,113,.35); */
}

#mainFormQuote:hover{
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 32px rgba(46,204,113,.45);
}

/* SECONDARY — BUY DIRECT */
#mainFormBuy{
  background: #f3f4f6;
  color: #444;
  border: 1px solid #ddd;
  opacity: .75;
}

#mainFormBuy:hover{
  opacity: .95;
  transform: translateY(-1px);
}



/* SHOW IMAGES BASED ON HOVER */
.buttons:has(#mainFormBuy:hover) .img-grey {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.buttons:has(#mainFormQuote:hover) .img-full {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/**************************************************************************/







/* ======================================================
   MOBILE – STACKING (THIS FIXES EVERYTHING)
   ====================================================== */

@media (max-width: 499px){
  .contact-form,
  .contact-form.show-product{
    grid-template-columns: 1fr !important;
  }

    /* 🔥 THIS IS THE MISSING PIECE */
  .contact-form > div {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  #infoDIV,
  #buyDIV{
    transform: none;
  }

  #selectDIV button{
  flex-direction: row;
  }
}