/*
 * Base Quickbar styles (horizontal). Provide a neutral layout that works
 * across most themes. Colours are intentionally minimal; adjust via
 * parent container or override in your theme if desired.
 */
.pmp-quickbar{
  display:flex;
  gap:.75rem;
  align-items:center;
  flex-wrap:nowrap;
  background:#1e73be;
  padding:.75rem;
  border-radius:.75rem;
  width:100%;
  overflow-x:auto;
}
.pmp-quickbar .pmp-qb-datetime,
.pmp-quickbar .pmp-qb-select{
  padding:.45rem .6rem;
  border-radius:.5rem;
  border:1px solid rgba(0,0,0,.1);
  flex:1 1 0;
  min-width:0;
  width:100%;
}
.pmp-quickbar .pmp-qb-button{
  background:#2d5be3;
  color:#fff;
  border:0;
  border-radius:.6rem;
  padding:.55rem 1rem;
  font-weight:600;
  cursor:pointer;
  flex:0 0 auto;
  white-space:nowrap;
}
.pmp-quickbar .pmp-qb-button:hover{
  opacity:.95;
}

/*
 * Vertical Quickbar: transforms the bar into a stacked card with a
 * modern, elegant look. This layout is suitable for embedding over
 * hero images or in narrow columns. It uses a translucent background,
 * rounded corners and a subtle shadow for depth. Inputs and selects
 * include built-in icons via data-URIs (calendar and chevron) and
 * respond to hover/focus states. On small screens the card scales
 * responsively.
 */
/*
 * Vertical Quickbar: modern floating card
 *
 * The vertical variant is designed for hero headers and narrow sidebars. It
 * presents the form as an elegant floating card with rounded corners,
 * translucent background and subtle shadow. The card adapts its width to
 * the viewport (up to 420px) and centers itself horizontally. Inputs and
 * selects have consistent height and padding, with a gentle border and
 * minimalist icons. The primary button uses a vivid gradient and smooth
 * hover/active states. All elements are responsive for small screens.
 */
.pmp-quickbar.vertical{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  padding:16px;
  margin:0 auto;
  width:100%;
  max-width:420px;
  /* Translucent white background with slight blur for readability over images */
  background:rgba(255,255,255,0.9);
  border:1px solid rgba(0,0,0,0.1);
  border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
  backdrop-filter:saturate(180%) blur(10px);
  color:#0f172a;
  overflow:visible;
}

/* Remove decorative halo on vertical card (not needed on translucent card) */
.pmp-quickbar.vertical::before{
  content:none;
}
.pmp-quickbar.vertical .pmp-qb-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.pmp-quickbar.vertical .pmp-qb-label{
  font-size:13px;
  font-weight:600;
  color:#475569;
}
/* Inputs and selects styling */
.pmp-quickbar.vertical .pmp-qb-input,
.pmp-quickbar.vertical select,
.pmp-quickbar.vertical input[type="text"],
.pmp-quickbar.vertical input[type="datetime-local"],
.pmp-quickbar.vertical input[type="date"],
.pmp-quickbar.vertical input[type="time"]{
  appearance:none;
  display:block;
  width:100%;
  height:48px;
  padding:0 16px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background-color:#ffffff;
  color:#0f172a;
  font-size:15px;
  line-height:48px;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pmp-quickbar.vertical select{
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%236374a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:20px 20px;
}
.pmp-quickbar.vertical input[type="text"],
.pmp-quickbar.vertical input[type="datetime-local"],
.pmp-quickbar.vertical input[type="date"],
.pmp-quickbar.vertical input[type="time"]{
  background-image:url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='17' rx='2' ry='2' stroke='%236374a8' stroke-width='1.6'/%3E%3Cpath d='M8 2v4M16 2v4M3 10h18' stroke='%236374a8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px 18px;
}
/* Hover and focus states */
.pmp-quickbar.vertical select:hover,
.pmp-quickbar.vertical input:hover{
  border-color:#cbd5e1;
}
.pmp-quickbar.vertical select:focus,
.pmp-quickbar.vertical input:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.3);
}
/* Submit button styling */
.pmp-quickbar.vertical .pmp-qb-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 20px;
  margin-top:4px;
  border:0;
  border-radius:10px;
  background:linear-gradient(90deg,#1e3a8a,#2563eb);
  color:#ffffff;
  font-weight:700;
  font-size:15px;
  letter-spacing:.3px;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(37,99,235,0.35);
  transition:transform .08s ease,filter .15s ease,box-shadow .15s ease;
}
.pmp-quickbar.vertical .pmp-qb-button:hover{
  filter:saturate(1.05) brightness(1.04);
}
.pmp-quickbar.vertical .pmp-qb-button:active{
  transform:translateY(2px);
}
.pmp-quickbar.vertical .pmp-qb-button:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(37,99,235,0.3),0 6px 14px rgba(37,99,235,0.35);
}
/* Placeholder colour */
.pmp-quickbar.vertical input::placeholder{
  color:#94a3b8;
}
/* Responsive adjustments */
@media (max-width:480px){
  .pmp-quickbar.vertical{
    max-width:94vw;
    padding:14px;
    gap:10px;
  }
  .pmp-quickbar.vertical .pmp-qb-button{
    height:50px;
  }
}