/*
============================================================
 StockSkill Book Class Responsive V5.2
 Final Mobile / Tablet / Desktop Layer
============================================================
*/

html {
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

body {
  width:100%;
  max-width:100%;
  margin:0;
  overflow-x:hidden;
}

*,
*::before,
*::after {
  box-sizing:border-box;
}

/* Media safety */

img,
video,
iframe,
svg,
canvas {
  max-width:100%;
  height:auto;
}

/* Form safety */

input,
select,
textarea,
button {
  max-width:100%;
}

input,
select,
textarea {
  font-size:16px;
}

/* ----------------------------------------------------------
   PAGE SAFETY
---------------------------------------------------------- */

main,
section,
article,
aside,
footer,
header {
  max-width:100%;
}

.container,
.page-container,
.content-container,
.main-container,
.booking-container,
.book-class-container,
.booking-page,
.book-class-page {
  width:100%;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width:767px) {

  html,
  body {
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .container,
  .page-container,
  .content-container,
  .main-container,
  .booking-container,
  .book-class-container,
  .booking-page,
  .book-class-page {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding-left:12px !important;
    padding-right:12px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Typography */

  h1 {
    max-width:100% !important;
    font-size:clamp(24px,8vw,34px) !important;
    line-height:1.15 !important;
  }

  h2 {
    max-width:100% !important;
    font-size:clamp(21px,7vw,28px) !important;
    line-height:1.2 !important;
  }

  h3 {
    font-size:19px !important;
    line-height:1.25 !important;
  }

  p {
    max-width:100%;
    line-height:1.55;
  }

  /* Columns */

  [class*="col-"],
  .col,
  .left-column,
  .right-column,
  .form-column {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    flex:0 0 100% !important;
  }

  /* Common grids */

  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .booking-grid,
  .class-grid {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    gap:14px !important;
  }

  /* Flex rows */

  .row,
  .form-row,
  .hero-row,
  .two-column,
  .two-col,
  .columns {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    flex-direction:column !important;
  }

  /* Cards */

  .card,
  .booking-card,
  .booking-panel,
  .booking-form,
  .book-class-form,
  .class-booking-form,
  .form-card,
  .summary-card,
  .class-card,
  .feature-card {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* Forms */

  form {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  label {
    display:block;
    width:100% !important;
    max-width:100% !important;
    margin-bottom:6px;
  }

  input,
  select,
  textarea {
    display:block;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:48px !important;
    font-size:16px !important;
    padding:12px !important;
  }

  textarea {
    min-height:110px !important;
  }

  button,
  .btn {
    max-width:100% !important;
    min-height:48px !important;
  }

  form button[type="submit"],
  form input[type="submit"],
  .booking-form button[type="submit"],
  .book-class-form button[type="submit"] {
    width:100% !important;
  }

  /* Images */

  img {
    max-width:100% !important;
    height:auto !important;
  }

  /* Tables */

  .table-responsive,
  .table-wrap,
  .responsive-table {
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  table {
    min-width:620px;
  }

  /* Long text */

  a,
  p,
  span,
  label,
  td,
  th {
    overflow-wrap:anywhere;
  }

  /* Remove common fixed widths */

  [style*="width:1200px"],
  [style*="width: 1200px"],
  [style*="width:1100px"],
  [style*="width: 1100px"],
  [style*="width:1000px"],
  [style*="width: 1000px"],
  [style*="min-width:1200px"],
  [style*="min-width: 1200px"],
  [style*="min-width:1000px"],
  [style*="min-width: 1000px"] {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

}

/* ----------------------------------------------------------
   SMALL PHONES
---------------------------------------------------------- */

@media (max-width:380px) {

  .container,
  .page-container,
  .content-container,
  .main-container,
  .booking-container,
  .book-class-container,
  .booking-page,
  .book-class-page {
    padding-left:10px !important;
    padding-right:10px !important;
  }

  h1 {
    font-size:24px !important;
  }

  h2 {
    font-size:21px !important;
  }

}

/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (min-width:768px) and (max-width:1024px) {

  .container,
  .page-container,
  .content-container,
  .main-container,
  .booking-container,
  .book-class-container,
  .booking-page,
  .book-class-page {
    width:100% !important;
    max-width:100% !important;
    padding-left:24px !important;
    padding-right:24px !important;
  }

}

/* ----------------------------------------------------------
   LARGE DESKTOP
---------------------------------------------------------- */

@media (min-width:1200px) {

  .container,
  .page-container,
  .content-container,
  .main-container,
  .booking-container,
  .book-class-container,
  .booking-page,
  .book-class-page {
    max-width:1200px;
  }

}

/* ============================================================
   STOCKSKILL BOOK CLASS — MOBILE UI TARGETED FIX
   Form columns + floating contact safety
   ============================================================ */

@media (max-width:767px){

  /* ---------- PAGE CONTAINER ---------- */

  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  *,
  *::before,
  *::after{
    box-sizing:border-box;
  }

  /* ---------- BOOKING MAIN CARD ---------- */

  .offline-booking,
  .booking-page,
  .booking-container,
  .book-class-container,
  .offline-booking-container,
  main{
    max-width:100% !important;
  }

  /* Prevent inner content from creating horizontal overflow */
  .offline-booking *,
  .booking-page *,
  .booking-container *,
  .book-class-container *{
    max-width:100%;
  }

  /* ---------- BOOKING FORM ---------- */

  #bookingForm,
  #offlineBookingForm,
  .offline-booking-form,
  .booking-form,
  form[id*="Booking"],
  form[id*="booking"]{
    width:100% !important;
    max-width:100% !important;
  }

  /*
   * Any existing 2-column booking grid becomes
   * one clean column on mobile.
   */
  #bookingForm .form-grid,
  #offlineBookingForm .form-grid,
  .offline-booking-form .form-grid,
  .booking-form .form-grid,
  .form-grid{
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    max-width:100% !important;
    gap:14px !important;
  }

  /*
   * Common grid/flex wrappers used around booking fields.
   */
  .offline-booking-form .row,
  .booking-form .row,
  .offline-booking-form .fields,
  .booking-form .fields,
  .booking-fields,
  .booking-grid{
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    max-width:100% !important;
  }

  /*
   * Force individual field blocks to occupy the
   * complete mobile width.
   */
  #bookingForm .field,
  #offlineBookingForm .field,
  .offline-booking-form .field,
  .booking-form .field,
  .form-group,
  .form-field{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  /* ---------- LABELS ---------- */

  #bookingForm label,
  #offlineBookingForm label,
  .offline-booking-form label,
  .booking-form label,
  .form-group label,
  .form-field label{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin-bottom:7px !important;
    line-height:1.25 !important;
    white-space:normal !important;
  }

  /* ---------- INPUTS / SELECTS / TEXTAREAS ---------- */

  #bookingForm input,
  #bookingForm select,
  #bookingForm textarea,
  #offlineBookingForm input,
  #offlineBookingForm select,
  #offlineBookingForm textarea,
  .offline-booking-form input,
  .offline-booking-form select,
  .offline-booking-form textarea,
  .booking-form input,
  .booking-form select,
  .booking-form textarea{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Date / number / phone controls */
  input[type="date"],
  input[type="number"],
  input[type="tel"],
  input[type="email"],
  input[type="text"]{
    min-width:0 !important;
    max-width:100% !important;
  }

  /* ---------- BUTTONS ---------- */

  #bookingForm button,
  #offlineBookingForm button,
  .offline-booking-form button,
  .booking-form button{
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* ---------- STATE / DISTRICT ---------- */

  select{
    max-width:100% !important;
    min-width:0 !important;
  }

  /* ---------- BATCH CARDS ---------- */

  .batch-card,
  .batch-option,
  .batch-item,
  [class*="batch"]{
    max-width:100% !important;
    min-width:0 !important;
  }

  /* ---------- FLOATING CONTACT BUTTONS ---------- */

  #floatingContact,
  .floatingContact,
  .floating-contact,
  .floating-contact-buttons{
    position:fixed !important;
    right:10px !important;
    bottom:calc(12px + env(safe-area-inset-bottom)) !important;
    left:auto !important;
    width:auto !important;
    max-width:56px !important;
    z-index:99999 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:8px !important;
  }

  #floatingContact a,
  #floatingContact button,
  .floatingContact a,
  .floatingContact button,
  .floating-contact a,
  .floating-contact button{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    max-width:48px !important;
    max-height:48px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
    box-sizing:border-box !important;
  }

  /*
   * Floating buttons must not cover the booking form.
   * Keep them inside the viewport and below content.
   */
  #floatingContact img,
  .floatingContact img,
  .floating-contact img{
    max-width:28px !important;
    max-height:28px !important;
  }

  /* ---------- MOBILE CARD SPACING ---------- */

  .offline-booking-card,
  .booking-card,
  .book-class-card{
    width:calc(100% - 24px) !important;
    max-width:calc(100% - 24px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* ---------- PREVENT LONG TEXT FROM PUSHING WIDTH ---------- */

  p,
  span,
  label,
  h1,
  h2,
  h3,
  h4,
  small{
    overflow-wrap:anywhere;
  }

}

/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width:380px){

  .offline-booking-card,
  .booking-card,
  .book-class-card{
    width:calc(100% - 16px) !important;
    max-width:calc(100% - 16px) !important;
  }

  #floatingContact,
  .floatingContact,
  .floating-contact,
  .floating-contact-buttons{
    right:7px !important;
    bottom:calc(8px + env(safe-area-inset-bottom)) !important;
  }

  #floatingContact a,
  #floatingContact button,
  .floatingContact a,
  .floatingContact button,
  .floating-contact a,
  .floating-contact button{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
  }
}


/* ============================================================
   STOCKSKILL BOOK CLASS V5.4
   EXACT MOBILE FORM GRID FIX
   Actual booking wrapper: .offline-form-grid
   ============================================================ */

@media (max-width:767px){

  /* ----------------------------------------------------------
     ACTUAL BOOKING FORM GRID
     ---------------------------------------------------------- */

  #bookingForm .offline-form-grid,
  form.offline-form .offline-form-grid,
  .offline-form-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-auto-columns:minmax(0,1fr) !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    gap:14px !important;
    align-items:start !important;
  }

  /* Every actual field becomes full width */
  #bookingForm .offline-form-grid > label,
  form.offline-form .offline-form-grid > label,
  .offline-form-grid > label{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    align-self:start !important;
  }

  /* Actual inputs */
  #bookingForm .offline-form-grid > label > input,
  #bookingForm .offline-form-grid > label > select,
  #bookingForm .offline-form-grid > label > textarea,
  form.offline-form .offline-form-grid > label > input,
  form.offline-form .offline-form-grid > label > select,
  form.offline-form .offline-form-grid > label > textarea,
  .offline-form-grid > label > input,
  .offline-form-grid > label > select,
  .offline-form-grid > label > textarea{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Labels */
  #bookingForm .offline-form-grid > label{
    line-height:1.25 !important;
  }

  /* ----------------------------------------------------------
     LOCATION/PIN FIELDS CREATED BY BOOKING FLOW
     ---------------------------------------------------------- */

  #stockskill-location-flow-v4,
  #stockskill-location-flow-v4 .offline-form-grid,
  #stockskill-location-flow-v4 .location-grid,
  #stockskill-location-flow-v4 .location-fields{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  #stockskill-location-flow-v4 .offline-form-grid,
  #stockskill-location-flow-v4 .location-grid,
  #stockskill-location-flow-v4 .location-fields{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
  }

  #stockskill-location-flow-v4 label,
  #stockskill-location-flow-v4 .field,
  #stockskill-location-flow-v4 .form-group{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  #stockskill-location-flow-v4 input,
  #stockskill-location-flow-v4 select{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* ----------------------------------------------------------
     BATCH GRID
     ---------------------------------------------------------- */

  #batchGrid,
  .batch-grid{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  #batchGrid .batch-card,
  #batchGrid .batch-option,
  #batchGrid > *{
    max-width:100% !important;
    min-width:0 !important;
  }

  /* ----------------------------------------------------------
     BOOKING CARD
     ---------------------------------------------------------- */

  #bookingForm{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  /* ----------------------------------------------------------
     PREVENT INPUT / SELECT OVERFLOW
     ---------------------------------------------------------- */

  #bookingForm input,
  #bookingForm select,
  #bookingForm textarea,
  #bookingForm button{
    box-sizing:border-box !important;
    max-width:100% !important;
  }

}

/* Small phones */
@media (max-width:380px){

  #bookingForm .offline-form-grid,
  form.offline-form .offline-form-grid,
  .offline-form-grid{
    gap:12px !important;
  }

}