/* ============================================================
   ClientRentalHub – DYNAMIC MASTER POPUP CSS
   Matches Elementor Primary Color across all client sites
   ============================================================ */

:root {
  /* Re-linking to Elementor Primary for Dynamic Theming */
  --crh-accent: var(--e-global-color-primary, #a31a3d);
  --crh-bg: #ffffff;
  --crh-text: #111111;
  --crh-text-muted: #6b7280;
  --crh-border: #e5e7eb;
  --crh-radius: 12px;
  
  /* Modern UX Palette */
  --crh-btn-grey: #f3f4f6;
  --crh-btn-grey-hover: #e5e7eb;
  --crh-btn-black: #000000;
}

/* 1. MODAL OVERLAY & DIALOG */
.crh-modal {
  position: fixed; 
  inset: 0; 
  z-index: 9999;
  background: rgba(0,0,0,.55);
  display: none; 
  padding: 20px;
  justify-content: center; 
  align-items: center;
  overflow-y: auto;
}
.crh-modal.is-open { display: flex !important; }

.crh-modal__dialog {
  width: min(720px, 96vw);
  background: #fff; 
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden; 
  margin: 0;
  font: 400 16px/1.4 system-ui, -apple-system, sans-serif;
}

/* 2. HEADER (Dynamic Accent Color) */
.crh-modal__header {
  background:var(--e-global-color-primary);
  color: #fff;
  padding: 16px 22px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between;
}
.crh-modal__header h3 { 
  margin: 0; 
  font-weight: 800; 
  font-size: 22px; 
  letter-spacing: -0.02em;
  color: #fff;
}
#crh-modal__close, .crh-modal__close{
  width:28px; height:28px; border-radius:8px; background:transparent;
  border:1px solid rgba(255,255,255,.28); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.crh-modal__close:hover { background: rgba(255,255,255,.15); }

/* 3. BODY & PRODUCT SUMMARY */
.crh-modal__body { padding: 20px 22px 10px; }
.crh-summary { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.crh-summary__left { display: flex; gap: 12px; align-items: center; }
.crh-product-mini img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; border: 1px solid #eee; }
.crh-product-title { font-weight: 700; font-size: 19px; color: var(--crh-text); margin: 0; }
.crh-sku { font-weight: 700; font-size: 14px; color: #6f8fc4; }

.crh-summary__right .crh-total {
  display: flex; flex-direction: column; align-items: flex-end; min-width: 100px;
}
.crh-summary__right .crh-total span { font-size: 13px; color: var(--crh-text-muted); font-weight: 600; }
.crh-summary__right .crh-total strong { font-size: 20px; color: #000; line-height: 1.1; }

/* 4. INPUT ROWS */
.crh-rows .crh-row {
  display: grid; 
  grid-template-columns: 1fr 105px 70px; 
  gap: 12px; 
  align-items: center; 
  margin-bottom: 12px;
}
.crh-row input , select{
  height: 52px; 
  border-radius: 12px; 
  padding: 0 16px;
  border: 1px solid #e6e8ed; 
  background: #f9fafb; 
  color: #111;
  font-size: 16px;
  transition: border-color 0.2s;
}
.crh-row input:focus { border-color: var(--crh-accent); outline: none; }
.crh-row input[type="number"] { text-align: center; font-weight: 700; }

/* 5. IDENTICAL CIRCLE BUTTONS (Add & Delete) */

.crh-row-add { 
    width: 100% !important;
    display: flex !important; 
    justify-content: center !important; 
    margin: 25px 0 !important; 
    padding: 0 !important;
}

.crh-row-add .crh-add-row, 
.crh-row .crh-del,
#crh-del-row {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 50% !important;
    background: var(--crh-btn-grey) !important;
    color: #4b5563 !important;
    border: 1px solid #e5e7eb !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    cursor: pointer; 
    padding: 0 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.crh-row-add .crh-add-row:hover, 
.crh-row .crh-del:hover,
#crh-del-row:hover {
    background: var(--crh-btn-grey-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.08);
}

.crh-add-row svg, .crh-del svg { display: block; margin: 0 auto; }

/* 6. FIXED FOOTER (Side-by-Side Modern Layout) */
.crh-modal__footer {
  display: flex !important; 
  flex-direction: row !important; 
  align-items: center !important; 
  gap: 12px !important; 
  padding: 16px 22px !important; 
  border-top: 1px solid #f3f4f6;
  background: #fff;
}

.crh-no-areas {
  flex: 1 !important;
  background: var(--crh-btn-grey) !important;
  color: var(--crh-text) !important;
  height: 48px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  display: flex !important; 
  align-items: center; 
  justify-content: center;
  border: none !important; 
  cursor: pointer;
}
.crh-no-areas:hover { background: var(--crh-btn-grey-hover) !important; }

.crh-allocate.button-primary {
  flex: 1 !important;
  background: var(--crh-btn-black) !important;
  color: #ffffff !important;
  height: 48px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  display: flex !important; 
  align-items: center; 
  justify-content: center;
  border: none !important; 
  cursor: pointer;
}
.crh-allocate.button-primary:hover { opacity: 0.9; }

/* 7. ERRORS & DISABLED STATES */
.crh-error { 
    color: #dc2626; 
    font-weight: 600; 
    text-align: center; 
    margin-bottom: 12px; 
    font-size: 14px; 
}

.crh-allocate.crh-disabled { 
    background: #e5e7eb !important;
    color: #9ca3af !important;
    opacity: 1 !important; 
    cursor: not-allowed !important; 
    pointer-events: none;
}

/* 8. MOBILE VIEWPORTS */
@media (max-height:560px){
  .crh-modal { align-items: flex-start; }
  .crh-modal__dialog { margin-top: 15px; }
}

@media (max-width: 480px) {
    .crh-modal__footer { flex-direction: column !important; }
    .crh-no-areas, .crh-allocate.button-primary { width: 100% !important; }
}