:root { --qcf-label-color:#111; --qcf-radius:12px; --qcf-btn:#DE6D11; --qcf-btnText:#000; }
.qcf-scope * { box-sizing: border-box; }
.qcf-scope .qcf-row { margin-bottom: 12px; }

/* 50/50 top */
.qcf-scope .qcf-top-two { display:grid; gap:16px; grid-template-columns: 1fr; }
@media (min-width: 900px){
  .qcf-scope .qcf-top-two { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Info grid */
.qcf-scope .qcf-six-line { display:grid; gap:12px; }
.qcf-scope .qcf-six-line > div { min-width:0; }
@media (min-width: 900px){
  .qcf-scope .qcf-six-line.qcf--no-return { grid-template-columns: 10% 10% 20% 20% 40%; align-items:end; }
  .qcf-scope .qcf-six-line.qcf--return-active { grid-template-columns: 10% 10% 20% 20% 20% 20%; align-items:end; }
}
@media (max-width: 899px){
  .qcf-scope .qcf-six-line { grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
}

/* Labels & inputs */
.qcf-scope label, .qcf-scope .qcf-fieldlabel { display:block; font-weight:600; margin-bottom:6px; font-size:14px; color: var(--qcf-label-color); }
.qcf-scope .qcf-input { width:100%; padding:14px; border:1px solid #ddd; border-radius: var(--qcf-radius); height:50px; line-height:22px; }
.qcf-scope .qcf-top-two .qcf-input { height:50px; }
.qcf-scope .qcf-time { height:50px; border-radius: var(--qcf-radius); }

/* Select arrow gap */
.qcf-scope select.qcf-input {
  appearance: none;
  background-color:#fff;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
  padding-right: 2.5rem;
}

/* Return toggle */
.qcf-scope .qcf-return-toggle { width:100%; height:50px; padding:0 16px; border:1px solid #e5e5e5; background:#fff; border-radius: var(--qcf-radius); cursor:pointer; text-align:center; color:#000; display:flex; align-items:center; justify-content:center; }
.qcf-scope .qcf-return-toggle:hover { background:#DE6D11; border-color:#DE6D11; color:#000; }
.qcf-scope .qcf-return-toggle strong { background:transparent; border-radius:8px; padding:3px 6px; color:#000; }

/* Buttons */
.qcf-scope .qcf-actions { display:flex; gap:10px; margin-top:14px; }
.qcf-scope .qcf-btn { padding:12px 16px; border-radius: var(--qcf-radius); border:1px solid var(--qcf-btn); background: var(--qcf-btn); color: var(--qcf-btnText); cursor:pointer; }
.qcf-scope .qcf-btn.qcf-primary { background: var(--qcf-btn); color: var(--qcf-btnText); border-color: var(--qcf-btn); }
.qcf-scope .qcf-btn:hover, .qcf-scope .qcf-btn:active, .qcf-scope .qcf-btn:focus { background:#e0e0e0; border-color:#e0e0e0; color:#000; }

/* Datepicker visuals */
.ui-datepicker { z-index: 999999 !important; background:#fff; border:1px solid #ddd; padding:8px; border-radius: var(--qcf-radius); }
.ui-datepicker .ui-datepicker-header { font-weight:600; margin-bottom:6px; font-size:13px; }
.ui-datepicker table { width:100%; font-size:12px; }
.ui-datepicker td a { display:block; padding:4px 6px; color:#333 !important; background:#fff; border-radius:8px; }
.ui-datepicker td a:hover { background:#f2f2f2; }
.ui-datepicker .ui-state-active { background:#DE6D11 !important; color:#000 !important; }
.ui-datepicker .ui-state-highlight { background:#ffe8d6 !important; color:#000 !important; }

/* Time input */
.qcf-scope input[type="time"]::-webkit-datetime-edit { padding:0 2px; }
.qcf-scope input[type="time"]::-webkit-datetime-edit-fields-wrapper { display:flex; }
.qcf-scope input[type="time"]::-webkit-calendar-picker-indicator { display:none; }

/* Vehicle list: horizontal 3/2/1 columns */
.qcf-scope .qcf-vehicles{ display:grid; gap:18px; }
@media (min-width: 1200px){ .qcf-scope .qcf-vehicles{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 900px) and (max-width: 1199px){ .qcf-scope .qcf-vehicles{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 899px){ .qcf-scope .qcf-vehicles{ grid-template-columns: 1fr; } }

/* Card structure: image | details | price/button */
.qcf-scope .qcf-card{
  display:grid;
  grid-template-columns: 140px 1fr auto;
  grid-template-rows: auto auto;
  gap:10px 14px;
  padding:14px;
  border:1px solid #eee;
  background:#fff;
  border-radius:12px;
  align-items:center;
}
.qcf-scope .qcf-card img{
  grid-row:1 / span 2;
  width:auto !important;
  height:110px;
  max-width:100%;
  object-fit:contain;
  margin:0 !important;
  display:block;
}
.qcf-scope .qcf-card h4{ margin:0; font-size:18px; line-height:1.3; }
.qcf-scope .qcf-card .qcf-meta{ font-size:13px; color:#555; margin-top:2px; }
.qcf-scope .qcf-card .qcf-price{ grid-column:3; grid-row:1; font-size:20px; font-weight:700; text-align:right; align-self:start; }
.qcf-scope .qcf-card .qcf-btn.qcf-choose{ grid-column:3; grid-row:2; width:160px; justify-self:end; margin-top:4px; }

@media (max-width: 900px){
  .qcf-scope .qcf-card{ grid-template-columns: 110px 1fr; grid-template-rows: auto auto auto; }
  .qcf-scope .qcf-card img{ height:90px; }
  .qcf-scope .qcf-card .qcf-price{ grid-column:2; grid-row:2; text-align:left; }
  .qcf-scope .qcf-card .qcf-btn.qcf-choose{ grid-column:1 / -1; grid-row:3; width:100%; justify-self:stretch; }
}

/* === v2.0a: Horizontal list, vertical card; top center; bottom price left / button right === */

/* Ensure grid list (3/2/1) */
.qcf-scope .qcf-vehicles{
  display: grid !important;
  gap: 18px !important;
}
@media (min-width: 1200px){
  .qcf-scope .qcf-vehicles{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (min-width: 900px) and (max-width: 1199px){
  .qcf-scope .qcf-vehicles{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 899px){
  .qcf-scope .qcf-vehicles{ grid-template-columns: 1fr !important; }
}

/* Card re-layout: two-column grid for bottom row */
.qcf-scope .qcf-card{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-auto-rows: auto;
  gap: 8px 14px !important;
}

/* Image full width on top, centered */
.qcf-scope .qcf-card img{
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  width: auto !important;
  max-width: 100% !important;
  height: 110px !important;
  object-fit: contain !important;
  margin: 0 auto 6px !important;
  display: block !important;
}

/* Title + meta centered, full width */
.qcf-scope .qcf-card h4{
  grid-column: 1 / -1 !important;
  text-align: center !important;
  margin: 0 !important;
}
.qcf-scope .qcf-card .qcf-meta{
  grid-column: 1 / -1 !important;
  text-align: center !important;
  font-size: 13px !important;
  color: #555 !important;
  margin-top: 2px !important;
}

/* Bottom row: price left, button right */
.qcf-scope .qcf-card .qcf-price{
  grid-column: 1 !important;
  text-align: left !important;
  font-weight: 700 !important;
  align-self: center !important;
}
.qcf-scope .qcf-card .qcf-btn.qcf-choose{
  grid-column: 2 !important;
  justify-self: end !important;
  width: auto !important;
  min-width: 150px;
  margin-top: 0 !important;
}

/* === v2.0b: force card layout via grid-areas (image, title, meta center; bottom: price left, button right) === */
.qcf-scope .qcf-card{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
    "image image"
    "title title"
    "meta  meta"
    "price button" !important;
  gap: 8px 14px !important;
}
.qcf-scope .qcf-card img{ grid-area: image !important; width:auto !important; max-width:100% !important; height:110px !important; object-fit:contain !important; margin:0 auto 6px !important; display:block !important; }
.qcf-scope .qcf-card h4{ grid-area: title !important; text-align:center !important; margin:0 !important; }
.qcf-scope .qcf-card .qcf-meta{ grid-area: meta !important; text-align:center !important; font-size:13px !important; color:#555 !important; margin-top:2px !important; }
.qcf-scope .qcf-card .qcf-price{ grid-area: price !important; text-align:left !important; font-weight:700 !important; align-self:center !important; }
.qcf-scope .qcf-card .qcf-btn.qcf-choose{ grid-area: button !important; justify-self:end !important; width:auto !important; min-width:150px; margin-top:0 !important; }
/* === One snippet for BOTH 5 & 6 columns (desktop) === */
@media (min-width: 900px){
  /* Top & second row same gap so edges align */
  .qcf-scope .qcf-top-two{ gap:16px !important; }

  /* 5 columns (Return OFF): Persons | Suitcases | Pickup Date | Pickup Time | Add Roundtrip */
  .qcf-scope .qcf-six-line{
    /* weighted widths: small, small, big, big, largest */
    grid-template-columns: 0.8fr 0.8fr 1.2fr 1.2fr 1.6fr !important;
    gap:16px !important;
    align-items:end !important;
  }

  /* 6 columns (Return ON): Persons | Suitcases | Pickup Date | Pickup Time | Return Date | Return Time */
  .qcf-scope .qcf-six-line.qcf--return-active{
    /* balanced big fields so row fit rahe */
    grid-template-columns: 0.7fr 0.7fr 1.2fr 1.2fr 1.2fr 1.2fr !important;
  }

  /* Safety: koi inner element min-width se overflow na kare */
  .qcf-scope .qcf-six-line > div{ min-width:0 !important; }

  /* Controls apne cell ko poora fill karein */
  .qcf-scope .qcf-six-line .qcf-input,
  .qcf-scope .qcf-six-line .qcf-return-toggle{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}
/* === One snippet for BOTH 5 & 6 columns (desktop) === */
@media (min-width: 900px){
  /* Top & second row same gap so edges align */
  .qcf-scope .qcf-top-two{ gap:16px !important; }

  /* 5 columns (Return OFF): Persons | Suitcases | Pickup Date | Pickup Time | Add Roundtrip */
  .qcf-scope .qcf-six-line{
    /* weighted widths: small, small, big, big, largest */
    grid-template-columns: 0.8fr 0.8fr 1.2fr 1.2fr 1.6fr !important;
    gap:16px !important;
    align-items:end !important;
  }

  /* 6 columns (Return ON): Persons | Suitcases | Pickup Date | Pickup Time | Return Date | Return Time */
  .qcf-scope .qcf-six-line.qcf--return-active{
    /* balanced big fields so row fit rahe */
    grid-template-columns: 0.7fr 0.7fr 1.2fr 1.2fr 1.2fr 1.2fr !important;
  }

  /* Safety: koi inner element min-width se overflow na kare */
  .qcf-scope .qcf-six-line > div{ min-width:0 !important; }

  /* Controls apne cell ko poora fill karein */
  .qcf-scope .qcf-six-line .qcf-input,
  .qcf-scope .qcf-six-line .qcf-return-toggle{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* === Uniform 10px radius for ALL form fields/buttons === */
.qcf-scope .qcf-input,
.qcf-scope input.qcf-date,
.qcf-scope input.qcf-time,
.qcf-scope select.qcf-input,
.qcf-scope textarea.qcf-input,
.qcf-scope .qcf-return-toggle,
.qcf-scope .qcf-btn {
  border-radius: 10px !important;
}
/* === Vehicle image full-bleed inside card (touches card borders) === */
.qcf-scope .qcf-card{
  --qcf-card-pad: 14px;      /* card padding your build uses */
  --qcf-card-radius: 12px;   /* card radius your build uses */
}

/* sirf main image ko full width pe lao */
.qcf-scope .qcf-card > img{
  display: block !important;
  /* card padding ko negate karke full-bleed */
  width: calc(100% + (var(--qcf-card-pad) * 2)) !important;
  max-width: none !important;
  margin: calc(-1 * var(--qcf-card-pad)) calc(-1 * var(--qcf-card-pad)) 8px !important;

  /* look & safety */
  height: auto !important;           /* natural aspect ratio */
  object-fit: contain !important;    /* image crop na ho */
  border-top-left-radius: var(--qcf-card-radius);
  border-top-right-radius: var(--qcf-card-radius);
}
#qcf_total_badge{ margin-left:8px; display:inline-block; padding:2px 8px; border-radius:999px; background:#ffe8d6; border:1px solid #f3cfb0; font-size:12px; color:#000; }
#qcf_total_old{ text-decoration: line-through; opacity:.7; font-weight:500; margin-right:6px; }

#qcf_total_breakdown{ font-size:12px; opacity:.8; margin-top:4px; }

/* Hide Meet & Greet field and label completely */
#qcf_meet_greet,
label[for="qcf_meet_greet"] {
  display: none !important;
}