/* =========================================================================
   Booknetic Modern Skin v3  —  override layer, loaded after booknetic.css

   RULES THIS FILE FOLLOWS (learned the hard way in v2):
   1. It never sets `display` on anything Booknetic shows/hides at runtime
      (step items, step content, buttons, cards, popup layer). Booknetic
      hides things with .booknetic_hidden / inline display:none; overriding
      display would defeat that.
   2. Colors that the Appearance > Theme editor controls (primary, active
      step, selected card border, price, titles) are NOT touched here, so
      your chosen theme colors keep working. This file only changes shape,
      spacing and feel.
   3. The mobile bottom sheet only activates once the script has added
      .bkntc_sheet_ready. Without the script, Booknetic's own mobile
      layout is left fully intact and usable.
   ========================================================================= */

/* ---- Shell ---------------------------------------------------------- */
.booknetic_appointment{
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 40px -14px rgba(20,24,30,.28);
}
.booknetic_appointment .booknetic_appointment_container_header{
  font-weight:600;
}

/* ---- Buttons (colors come from your theme) --------------------------- */
.booknetic_appointment .booknetic_btn_primary,
.booknetic_appointment .booknetic_btn_secondary,
.booknetic_appointment .booknetic_btn_success,
.booknetic_appointment .booknetic_btn_cancel,
.booknetic_appointment .booknetic_btn_warning{
  border-radius:12px !important;
  height:42px !important;
  padding-left:22px !important;
  padding-right:22px !important;
  letter-spacing:.2px;
}

/* ---- Cards: location / staff (vertical tiles on desktop) ------------- */
.booknetic_appointment .booknetic_card{
  border-radius:18px;
  box-shadow:inset 0 0 0 1.5px #E7E8EC;
  transition:box-shadow .18s ease;
}
.booknetic_appointment .booknetic_card:not(.booknetic_card_selected):hover{
  box-shadow:inset 0 0 0 1.5px #CBCED4, 0 10px 24px -12px rgba(20,24,30,.25);
}
.booknetic_appointment .booknetic_card.booknetic_card_selected{
  box-shadow:none;               /* selected border color = your theme */
}
/* the old dashed strip along the bottom of every card */
.booknetic_appointment .booknetic_card:not(.booknetic_card_selected)::after{
  content:none;
}
.booknetic_appointment .booknetic_card_image{
  border-radius:20px;
}

/* ---- Service cards ---------------------------------------------------- */
.booknetic_appointment .booknetic_service_card{
  border-radius:18px;
  box-shadow:inset 0 0 0 1.5px #E7E8EC;
  transition:box-shadow .18s ease;
}
.booknetic_appointment .booknetic_service_card:not(.booknetic_service_card_selected):hover{
  box-shadow:inset 0 0 0 1.5px #CBCED4, 0 10px 24px -12px rgba(20,24,30,.25);
}
.booknetic_appointment .booknetic_service_card.booknetic_service_card_selected{
  box-shadow:none;
}
.booknetic_appointment .booknetic_service_card:not(.booknetic_service_card_selected)::after{
  content:none;
}
.booknetic_appointment .booknetic_service_card_image{
  border-radius:14px;
}
.booknetic_appointment .booknetic_service_card_title > span:first-child{
  font-weight:600;
}

/* ---- Extras, payment, cart, confirm boxes (shape only) --------------- */
.booknetic_appointment .booknetic_service_extra_card,
.booknetic_appointment .booknetic_portlet,
.booknetic_appointment .booknetic-cart-item{
  border-radius:16px;
}
.booknetic_appointment .booknetic_payment_method{
  border-radius:14px;
}

/* ---- Calendar ---------------------------------------------------------
   Each day is an inner <div> (grey box) with a thin availability strip
   inside it. Available days become soft rounded tiles; unavailable days
   fade into the background. The selected day keeps your theme color. */
.booknetic_appointment .booknetic_calendar_days > div{
  border-radius:12px;
  overflow:hidden;
  background-color:#F3F4F7;
  transition:background-color .15s ease;
  font-weight:600;
}
.booknetic_appointment .booknetic_calendar_days:not(.booknetic_calendar_empty_day):not(.booknetic_calendar_selected_day) > div:hover{
  background-color:#E8EAF0;
}
.booknetic_appointment .booknetic_calendar_days.booknetic_calendar_empty_day > div{
  background-color:transparent;
  font-weight:500;
}

/* ---- Time slots ------------------------------------------------------- */
.booknetic_appointment .booknetic_times_list > div{
  border-radius:12px;
  font-weight:600;
  transition:background-color .15s ease;
}
.booknetic_appointment .booknetic_times_list > div:not(.booknetic_selected_time){
  background-color:#F3F4F7;
}
.booknetic_appointment .booknetic_times_list > div:not(.booknetic_selected_time):hover{
  background-color:#E8EAF0;
}

/* ---- Forms ------------------------------------------------------------ */
.booknetic_appointment .form-control{
  border-radius:12px;
  min-height:44px;
}
.booknetic_appointment .form-control:focus{
  box-shadow:0 0 0 3px rgba(108,112,220,.18);
}

/* =========================================================================
   MOBILE  (<= 1000px, same breakpoint Booknetic itself uses)
   ========================================================================= */
@media only screen and (max-width:1000px){

  .booknetic_appointment{
    border-radius:0;
    box-shadow:none;
  }

  /* -- Step list becomes a slim native-style progress bar.
        Bar colors come straight from the theme's badge colors:
        upcoming / current / completed. -- */
  .booknetic_appointment .booknetic_appointment_steps_body{
    display:flex;
    align-items:center;
    gap:6px;
    padding:16px 20px;
    max-height:none;
  }
  .booknetic_appointment .booknetic_appointment_step_element{
    float:none !important;
    flex:1 1 0;
    margin:0 !important;
    min-width:0;
    line-height:0;
    font-size:0;
  }
  .booknetic_appointment .booknetic_appointment_step_element > .booknetic_badge{
    display:block;
    width:100%;
    height:5px;
    margin:0;
    padding:0;
    font-size:0;
    border-radius:3px;
    overflow:hidden;
  }
  .booknetic_appointment .booknetic_selected_step > .booknetic_badge::after{
    background-image:none;           /* drop the tiny check icon on the bar */
  }
  .booknetic_appointment .booknetic_appointment_step_element .booknetic_step_title{
    display:none;
  }

  /* -- Full-width, comfortable buttons -- */
  .booknetic_appointment .booknetic_appointment_container_footer{
    gap:10px;
    padding-left:20px;
    padding-right:20px;
    padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));
    height:auto;
  }
  .booknetic_appointment .booknetic_appointment_container_footer button{
    flex:1 1 0;
  }

  /* -- Time picker as a bottom sheet.
        Only when the script has confirmed it is running. -- */
  .bkntc_sheet_ready .booknetic_time_div{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    max-width:none;
    margin:0;
    z-index:99999;
    box-sizing:border-box;
    background:#fff;
    border-radius:24px 24px 0 0;
    box-shadow:0 -16px 44px rgba(20,24,30,.22);
    padding:12px 20px calc(20px + env(safe-area-inset-bottom,0px));
    max-height:72vh;
    overflow-y:auto;
    transform:translateY(108%);
    visibility:hidden;
    transition:transform .34s cubic-bezier(.32,.72,0,1), visibility 0s linear .34s;
  }
  .bkntc_sheet_ready .booknetic_time_div.bkntc_sheet_open{
    transform:translateY(0);
    visibility:visible;
    transition:transform .34s cubic-bezier(.32,.72,0,1), visibility 0s;
  }
  .bkntc_sheet_ready .booknetic_time_div::before{
    content:"";
    display:block;
    width:38px;
    height:4px;
    border-radius:2px;
    background:#D9DCE1;
    margin:0 auto 14px;
  }
  .bkntc_sheet_ready .booknetic_time_div .booknetic_times_list{
    height:auto;
    max-height:none;
    overflow:visible;
  }
  .bkntc_sheet_ready .bkntc_sheet_close{
    display:block;
    position:absolute;
    top:12px;
    inset-inline-end:16px;
    width:30px;
    height:30px;
    border:0;
    border-radius:50%;
    background:#EEF0F3;
    color:#3a3f46;
    font-size:13px;
    line-height:30px;
    padding:0;
    text-align:center;
    cursor:pointer;
  }
  .bkntc_sheet_ready .bkntc_sheet_backdrop{
    display:block;
    position:fixed;
    top:0; right:0; bottom:0; left:0;
    z-index:99998;
    background:rgba(15,18,24,.42);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
  }
  .bkntc_sheet_ready .bkntc_sheet_backdrop.bkntc_sheet_open{
    opacity:1;
    pointer-events:auto;
  }
}

/* The sheet chrome does not exist on desktop layouts.
   (Two-class selector on purpose: Booknetic sets `.booknetic_appointment button
   {display:block}`, which would otherwise beat a single-class rule.) */
.booknetic_appointment .bkntc_sheet_close,
.booknetic_appointment .bkntc_sheet_backdrop{
  display:none;
}