/*
 * RAC Customer Editor — UI (v1.5.5)
 *
 * Styling parity with: RAC Booking Editor Popup (Tabs) — v1.3.23
 * - Blur/dim overlay
 * - Tabs color: #00B9FF
 * - Active tab: rounded 24px
 * - Fixed actions bar + internal scrolling panes (mobile friendly)
 */

/* Optional shortcode-generated button (Elementor buttons can ignore this) */
.rac-ce-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.15);
  background:#111;
  color:#fff;
  cursor:pointer;
  font-weight:700;
}
.rac-ce-btn:hover{filter:brightness(1.05);}

.rac-ce-wrap{position:relative;display:none;}
.rac-ce-wrap.is-open{display:block;}

/* Overlay */
.rac-ce-ov{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: none;
  z-index: 999999;
}

/* Modal */
.rac-ce-md{
  position: fixed;
  inset: 6vh 4vw;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: none;
  z-index: 1000000;
  overflow: hidden;
  font-family: inherit;
  /* layout */
  flex-direction: column;
}

.rac-ce-wrap.is-open .rac-ce-ov{display:block;}
.rac-ce-wrap.is-open .rac-ce-md{display:flex;}
body.rac-ce-lock{overflow:hidden;}

/* Header */
.rac-ce-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e7e7e7;
  gap: 10px;
}
.rac-ce-head-left{display:flex;flex-direction:column;gap:2px;}
.rac-ce-title{
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}
.rac-ce-sub{font-size:12px;color:#666;font-weight:600;min-height:14px;}
.rac-ce-x{
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}

/* Body: tabs + panels */
.rac-ce-body{
  display: grid;
  grid-template-columns: 240px 1fr;
  flex: 1 1 auto;
  min-height: 0;
}

.rac-ce-tabs{
  border-right: 1px solid #e7e7e7;
  padding: 10px;
  overflow: auto;
  background: #fafafa;
}

.rac-ce-step{
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  color: #00B9FF;
  font-size: 13px;
}
.rac-ce-step:hover{background: rgba(0,185,255,.08);}
.rac-ce-step.is-active{
  background: #fff;
  border: 2px solid #00B9FF;
  border-radius: 24px;
}

.rac-ce-panels{
  height: 100%;
  overflow: hidden;
  min-height: 0;
}

.rac-ce-pane{
  display: none;
  padding: 14px 16px 12px;
  height: 100%;
  overflow: hidden;
  min-height: 0;
}
.rac-ce-pane.is-active{
  display: flex;
  flex-direction: column;
}

/* Scroll area inside the active pane (fields) */
.rac-ce-pane > .rac-ce-grid{
  flex: 1 1 auto;
  overflow: auto;
  padding-bottom: 10px;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* Fields grid */
.rac-ce-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  align-content: start;
  grid-auto-rows: max-content;
}
.rac-ce-grid.one{grid-template-columns:1fr;}

.rac-ce-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rac-ce-field label{
  font-size: 13px;
  color: #222;
  font-weight: 600;
  margin: 0;
}

.rac-ce-field input,
.rac-ce-field select,
.rac-ce-field textarea{
  width: 100%;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  padding: 10px 10px;
  font-size: 14px;
  outline: none;
  background: #fff;
}

.rac-ce-field textarea{
  min-height: 120px;
  resize: vertical;
}

/* Actions bar */
.rac-ce-nav{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 12px 16px;
  border-top: 1px solid #e7e7e7;
}
.rac-ce-nav .left,
.rac-ce-nav .right{
  display:flex;
  gap:10px;
  align-items:center;
}

.rac-ce-prev{
  border: 1px solid #cfcfcf;
  background: #f3f3f3;
  color: #111;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}
.rac-ce-prev:disabled{opacity:.6;cursor:not-allowed;}

.rac-ce-save{
  border: none;
  background: #1a7f2e;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}
.rac-ce-save:disabled{opacity:.6;cursor:not-allowed;}

.rac-ce-save-close{
  border: 1px solid #cfcfcf;
  background: #f3f3f3;
  color: #111;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}
.rac-ce-save-close:disabled{opacity:.6;cursor:not-allowed;}

/* Toast */
.rac-ce-toast{
  position:fixed;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  background:#111;
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  display:none;
  z-index:1000001;
}
.rac-ce-toast.show{display:block;}

/* ===== Elementor/theme hard reset inside modal ===== */
.rac-ce-md, .rac-ce-md * { box-sizing: border-box; }
.rac-ce-md h3, .rac-ce-md h2, .rac-ce-md h1 { margin: 0 !important; }
.rac-ce-md button, .rac-ce-md .rac-ce-step, .rac-ce-md .rac-ce-save, .rac-ce-md .rac-ce-save-close, .rac-ce-md .rac-ce-prev, .rac-ce-md .rac-ce-x{
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

@media (max-width: 920px){
  /* Mobile layout: tabs row stays compact, panels get their own scroll */
  .rac-ce-body{
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .rac-ce-tabs{
    display:flex;
    gap:10px;
    border-right:none;
    border-bottom:1px solid #e7e7e7;
    white-space:nowrap;
    align-items:center;
    flex:0 0 auto;
    overflow-x:auto;
    overflow-y:hidden;
    padding:8px 10px;
  }
  .rac-ce-step{
    width:auto;
    flex:0 0 auto;
    /* requested: height ~= font height */
    padding:0 12px;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:24px;
  }
  /* Active tab: use box-shadow border so it doesn't increase height */
  .rac-ce-step.is-active{
    border: 1px solid transparent;
    box-shadow: 0 0 0 2px #00B9FF;
  }

  .rac-ce-panels{flex:1 1 auto;min-height:0;overflow:hidden;}
  .rac-ce-grid{grid-template-columns:1fr;}
}

/* ===== Modal width / height parity with Booking Editor ===== */
@media (min-width: 921px){
  .rac-ce-md{
    inset: auto !important;
    top: 6vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 60vw !important;
    height: 88vh !important;
  }
}
@media (max-width: 920px){
  .rac-ce-md{
    inset: auto !important;
    top: 3vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 96vw !important;
    height: 94vh !important;
  }
}