/**
 * Dermadent Clinic Custom Booking Form Styles
 */
.dermadent-custom-booking-container,
.dermadent-custom-booking-container .dermadent-custom-booking-form {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #131515;
}
.dermadent-custom-booking-container *,
.dermadent-custom-booking-container *::before,
.dermadent-custom-booking-container *::after { box-sizing: border-box; }

.elementor-widget-container:has(> .dermadent-custom-booking-container) { padding: 0 !important; margin: 0 !important; }


.dd-form-grid { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; }
.dd-form-col { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; }
.dd-col-100 { width: 100%; flex: 0 0 100%; }
.dd-col-50 { width: calc(50% - 7px); flex: 0 0 calc(50% - 7px); }
@media (max-width: 767px) { .dd-col-50 { width: 100%; flex: 0 0 100%; } }

.dd-label { display: block; margin: 0 0 7px; font-size: 12px; font-weight: 700; color: #131515; text-transform: uppercase; letter-spacing: .5px; }
.dd-label .dd-req { color: #C79A3B; margin-left: 2px; }

.dermadent-custom-booking-container .dd-input,
.dermadent-custom-booking-container .dd-select,
.dermadent-custom-booking-container .dd-textarea,
.dermadent-custom-booking-container .dd-dt-trigger {
    width: 100%;
    height: 48px;
    background: #fff !important;
    border: 1px solid #ECECEC !important;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.4;
    color: #131515;
    font-family: inherit;
    box-shadow: none;
    outline: none;
    transition: border-color .25s, box-shadow .25s;
    -webkit-appearance: none;
    appearance: none;
}
.dermadent-custom-booking-container .dd-textarea { height: auto; min-height: 90px; resize: vertical; }
.dd-input::placeholder, .dd-textarea::placeholder { color: #999; opacity: 1; }
.dermadent-custom-booking-container .dd-input:focus,
.dermadent-custom-booking-container .dd-select:focus,
.dermadent-custom-booking-container .dd-textarea:focus,
.dermadent-custom-booking-container .dd-dt-trigger:hover,
.dermadent-custom-booking-container .dd-dt-trigger.is-open {
    border-color: #C79A3B !important;
    box-shadow: 0 0 0 3px rgba(199,154,59,.15);
}
.dermadent-custom-booking-container .is-invalid { border-color: #e53935 !important; background: #fff9f9 !important; }

.dd-select-wrap { position: relative; width: 100%; }
.dd-select { cursor: pointer; padding-right: 38px !important; }
.dd-select-caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 10px; color: #131515; transition: transform .2s; }
.dd-select:focus + .dd-select-caret { color: #C79A3B; }

/* Date & time dropdown trigger */
.dd-unified-scheduler { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
.dermadent-custom-booking-container .dd-dt-trigger {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    text-align: left; cursor: pointer; padding-right: 38px;
    color: #999 !important; text-transform: none; letter-spacing: 0; font-weight: 400;
}
.dermadent-custom-booking-container .dd-dt-trigger.has-value { color: #131515 !important; }
.dd-dt-trigger .dd-pill-text { pointer-events: none; }
.dd-dt-trigger.is-open .dd-select-caret { transform: translateY(-50%) rotate(180deg); color: #C79A3B; }

/* Dropdown panel: calendar on top, time slots below */
.dermadent-custom-booking-container .dd-scheduler-unified-card {
    margin-top: 8px;
    background: #fff;
    border: 1px solid #ECECEC !important;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
    animation: dd-fade-in .2s ease;
}
@media (min-width: 900px) {
    .dermadent-custom-booking-container .dd-scheduler-unified-card { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; }
}
.dd-cal-col, .dd-slots-col { min-width: 0; }

.dd-cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dd-cal-month-name { font-size: 14px; font-weight: 700; }
.dermadent-custom-booking-container .dd-cal-nav-btn {
    width: 30px; height: 30px; padding: 0 !important; margin: 0;
    display: flex; align-items: center; justify-content: center;
    background: #F4F1EA !important; color: #131515 !important;
    border: 0 !important; border-radius: 50% !important; box-shadow: none !important;
    font-size: 18px; line-height: 1; cursor: pointer; min-width: 0;
}
.dermadent-custom-booking-container .dd-cal-nav-btn:hover:not(:disabled) { background: #C79A3B !important; color: #fff !important; }
.dermadent-custom-booking-container .dd-cal-nav-btn:disabled { opacity: .35; cursor: not-allowed; }

.dd-cal-weekdays, .dd-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dd-cal-weekdays { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #8C867E; margin-bottom: 6px; }
.dd-cal-grid { gap: 4px; }

.dermadent-custom-booking-container .dd-cal-cell {
    aspect-ratio: 1; width: 100%; min-width: 0; margin: 0; padding: 0 !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
    background: transparent !important; color: #131515 !important;
    border: 1px solid transparent !important; border-radius: 8px !important;
    box-shadow: none !important; transform: none !important; outline: none; cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.dermadent-custom-booking-container .dd-cal-cell.is-empty { pointer-events: none; }
.dermadent-custom-booking-container .dd-cal-cell.is-disabled { color: #D0D0D0 !important; cursor: not-allowed; pointer-events: none; }
.dermadent-custom-booking-container .dd-cal-cell.is-today { border-color: #C79A3B !important; }
.dermadent-custom-booking-container .dd-cal-cell:hover:not(.is-disabled):not(.is-empty) { background: #FBF6EC !important; color: #C79A3B !important; border-color: #E2CFAB !important; }
.dermadent-custom-booking-container .dd-cal-cell.is-selected { background: #C79A3B !important; color: #fff !important; border-color: #C79A3B !important; font-weight: 700; }

/* Time slots */
.dd-slots-col { border-top: 1px solid #F0ECE4; padding-top: 12px; }
@media (min-width: 900px) { .dd-slots-col { border-top: 0; border-left: 1px solid #F0ECE4; padding: 0 0 0 18px; } }
.dd-slots-heading { font-size: 13px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.dd-slots-for-label strong { color: #C79A3B; }
.dd-sunday-notice { font-size: 11px; font-weight: 600; color: #D32F2F; background: #FFEBEE; padding: 2px 7px; border-radius: 4px; }
.dd-slots-scroll { max-height: 230px; overflow-y: auto; padding-right: 4px; }
.dd-slots-scroll::-webkit-scrollbar { width: 4px; }
.dd-slots-scroll::-webkit-scrollbar-thumb { background: #E0DACF; border-radius: 4px; }
.dd-period-group { margin-bottom: 10px; }
.dd-period-title { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #7A7A7A; margin-bottom: 6px; }
.dd-time-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
.dermadent-custom-booking-container .dd-time-chip {
    margin: 0; min-width: 0; padding: 7px 6px !important;
    background: #fff !important; color: #131515 !important;
    border: 1px solid #ECECEC !important; border-radius: 6px !important; box-shadow: none !important;
    font-family: inherit; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0;
    cursor: pointer; outline: none; transition: all .2s;
}
.dermadent-custom-booking-container .dd-time-chip:hover { background: #FBF6EC !important; color: #C79A3B !important; border-color: #E2CFAB !important; }
.dermadent-custom-booking-container .dd-time-chip.is-selected { background: #C79A3B !important; color: #fff !important; border-color: #C79A3B !important; font-weight: 700; }

/* Submit */
.dermadent-custom-booking-container .dd-submit-btn {
    width: 100%; height: 52px; margin-top: 4px; padding: 12px 24px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: #C79A3B !important; color: #fff !important; border: 0 !important; border-radius: 10px;
    font-family: inherit; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    cursor: pointer; box-shadow: 0 4px 14px rgba(199,154,59,.28); transition: all .3s;
}
.dermadent-custom-booking-container .dd-submit-btn:hover { background: #9B7224 !important; transform: translateY(-1px); }
.dd-submit-btn:disabled { opacity: .75; cursor: not-allowed; transform: none; }
.dd-spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: dd-spin .8s linear infinite; }
.dd-submit-btn.is-loading .dd-spinner { display: inline-block; }
@keyframes dd-spin { to { transform: rotate(360deg); } }

.dd-feedback { display: none; margin-top: 16px; padding: 14px 18px; border-radius: 10px; font-size: 14px; line-height: 1.5; animation: dd-fade-in .3s ease; }
@keyframes dd-fade-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.dd-feedback.success { display: block; background: #E8F5E9; color: #1B5E20; border-left: 4px solid #2E7D32; }
.dd-feedback.error { display: block; background: #FFEBEE; color: #B71C1C; border-left: 4px solid #D32F2F; }

/* ===== Premium appointment popup + scheduler popover ===== */
.dd-appointment-modal{padding:22px!important}
.dd-modal-backdrop{background:rgba(5,18,15,.72)!important;backdrop-filter:blur(10px)!important}
.dd-modal-dialog{
  width:min(980px,calc(100vw - 40px))!important;
  max-height:90vh!important;
  overflow:auto!important;
  padding:0!important;
  border-radius:28px!important;
  background:linear-gradient(180deg,#fff 0%,#fffdf8 100%)!important;
  border:1px solid rgba(207,183,121,.34)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.30)!important;
  scrollbar-width:thin;
  scrollbar-color:#d9c08a transparent
}
.dd-modal-dialog::-webkit-scrollbar{width:7px}
.dd-modal-dialog::-webkit-scrollbar-thumb{background:#d9c08a;border-radius:99px}
.dd-modal-head{
  position:sticky;top:0;z-index:20;
  margin:0!important;padding:28px 32px 22px!important;
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid #eee5d5;
  backdrop-filter:blur(10px)
}
.dd-modal-head:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,#c79a3b,#e0c888)
}
.dd-modal-head h2{
  font-family:Cormorant,Georgia,serif!important;
  font-size:clamp(34px,4vw,48px)!important;
  line-height:1!important;font-weight:600!important;color:#13231f!important
}
.dd-modal-intro{max-width:690px;color:#6e6b65!important;font-size:15px!important;line-height:1.6!important}
.dd-modal-close{
  flex:0 0 44px!important;width:44px!important;height:44px!important;
  display:grid!important;place-items:center!important;
  background:#ead39d!important;color:#183029!important;border:0!important;
  border-radius:50%!important;font-size:24px!important;font-weight:700!important;
  box-shadow:0 8px 20px rgba(174,133,55,.18)!important;transition:.2s!important
}
.dd-modal-close:hover{background:#0a4036!important;color:#fff!important;transform:rotate(90deg)}
.dd-modal-dialog .dermadent-custom-booking-container{padding:26px 32px 32px!important}
.dd-modal-dialog .dd-form-grid{gap:18px!important}
.dd-modal-dialog .dd-label{font-size:11px!important;letter-spacing:.08em!important;color:#21332e!important;margin-bottom:8px!important}
.dd-modal-dialog .dd-input,
.dd-modal-dialog .dd-select,
.dd-modal-dialog .dd-textarea,
.dd-modal-dialog .dd-dt-trigger{
  min-height:52px!important;height:52px!important;
  border-radius:14px!important;border:1px solid #e6e0d5!important;
  background:#fff!important;padding:12px 16px!important;
  box-shadow:0 2px 0 rgba(19,21,21,.015)!important;
  transition:border-color .2s,box-shadow .2s,background .2s!important
}
.dd-modal-dialog .dd-textarea{height:auto!important;min-height:110px!important}
.dd-modal-dialog .dd-input:focus,
.dd-modal-dialog .dd-select:focus,
.dd-modal-dialog .dd-textarea:focus,
.dd-modal-dialog .dd-dt-trigger.is-open{
  border-color:#c79a3b!important;
  box-shadow:0 0 0 4px rgba(199,154,59,.12)!important
}
.dd-modal-dialog .dd-submit-btn{
  min-height:56px!important;height:56px!important;border-radius:14px!important;
  background:linear-gradient(135deg,#d9b768,#b98733)!important;
  text-transform:none!important;letter-spacing:.01em!important;font-size:15px!important;
  box-shadow:0 12px 24px rgba(172,126,45,.24)!important
}
.dd-modal-dialog .dd-submit-btn:hover{background:#0a4036!important;transform:translateY(-1px)!important}
.dd-unified-scheduler{position:relative!important}
.dermadent-custom-booking-container .dd-scheduler-unified-card{
  position:absolute!important;
  left:0!important;right:0!important;top:calc(100% + 8px)!important;
  z-index:80!important;margin:0!important;
  max-height:min(520px,calc(90vh - 190px))!important;
  overflow:auto!important;
  border:1px solid #e6ddcc!important;border-radius:18px!important;
  padding:18px!important;background:#fff!important;
  box-shadow:0 22px 55px rgba(18,29,25,.18)!important
}
.dd-scheduler-unified-card .dd-slots-scroll{max-height:330px!important}
.dermadent-custom-booking-container .dd-cal-nav-btn,
.dermadent-custom-booking-container .dd-time-chip{
  min-height:38px!important
}
.dermadent-custom-booking-container .dd-time-chip{
  border-radius:10px!important;padding:9px 8px!important
}
.dermadent-custom-booking-container .dd-cal-cell{
  min-height:36px!important;border-radius:10px!important
}
@media(max-width:767px){
 .dd-appointment-modal{padding:10px!important}
 .dd-modal-dialog{width:calc(100vw - 20px)!important;max-height:94dvh!important;border-radius:20px!important}
 .dd-modal-head{padding:20px 18px 16px!important}
 .dd-modal-head h2{font-size:34px!important}
 .dd-modal-intro{font-size:14px!important}
 .dd-modal-dialog .dermadent-custom-booking-container{padding:18px!important}
 .dd-modal-dialog .dd-form-grid{gap:14px!important}
 .dermadent-custom-booking-container .dd-scheduler-unified-card{
   position:fixed!important;
   left:10px!important;right:10px!important;top:auto!important;bottom:10px!important;
   max-height:72dvh!important;border-radius:20px!important;padding:16px!important
 }
 .dd-scheduler-unified-card .dd-slots-scroll{max-height:none!important}
}

/* ===== Appointment modal final sizing refinement ===== */
.dd-appointment-modal .dd-modal-dialog{
  width:min(600px,calc(100vw - 32px))!important;
  max-width:600px!important;
}
.dd-appointment-modal .dd-modal-head{padding:24px 24px 18px!important}
.dd-appointment-modal .dd-modal-dialog .dermadent-custom-booking-container{padding:22px 24px 26px!important}
.dd-appointment-modal .dd-modal-head h2{font-size:40px!important}
.dd-appointment-modal .dd-modal-intro{font-size:14px!important;line-height:1.55!important}
.dd-appointment-modal .dd-form-grid{gap:14px!important}
.dd-appointment-modal .dd-input,
.dd-appointment-modal .dd-select,
.dd-appointment-modal .dd-dt-trigger{min-height:48px!important;height:48px!important}
.dd-appointment-modal .dd-textarea{min-height:92px!important}
.dd-appointment-modal .dd-submit-btn{min-height:50px!important;height:50px!important}
@media(max-width:680px){
  .dd-appointment-modal .dd-modal-dialog{
    width:calc(100vw - 20px)!important;
    max-width:none!important
  }
  .dd-appointment-modal .dd-modal-head{padding:20px 18px 16px!important}
  .dd-appointment-modal .dd-modal-head h2{font-size:32px!important}
  .dd-appointment-modal .dd-modal-dialog .dermadent-custom-booking-container{padding:18px!important}
}

/* ===== Stable modal position during AJAX submit ===== */
.dd-appointment-modal{
  align-items:flex-start!important;
  overflow-y:auto!important;
  padding-top:max(22px,5vh)!important;
  padding-bottom:max(22px,5vh)!important;
}
.dd-appointment-modal .dd-modal-dialog{
  margin:0 auto!important;
  flex:0 0 auto!important;
}
.dd-appointment-modal .dd-feedback{
  margin-top:12px!important;
}
@media(max-width:680px){
  .dd-appointment-modal{
    padding-top:10px!important;
    padding-bottom:10px!important;
  }
}