/* 
=========================================================
OUTER WRAPPERS
These control the overall width and card-style container
========================================================= 
*/

/* Ensure the quote builder always spans full container width */
.ppqb-card, 
.ppqb-plain { 
  width: 100%; 
}

/* Card-style wrapper (used when card="1" shortcode option is set) */
.ppqb-card {
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 18px;
  background: var(--ppqb-bg, transparent);
}

/* 
=========================================================
BASE QUOTE BUILDER VARIABLES & TYPOGRAPHY
Central place for shared spacing, borders, colours
========================================================= 
*/

.ppqb {
  font-family: inherit;
  color: inherit;

  /* Reusable CSS variables */
  --ppqb-gap: 12px;
  --ppqb-radius: 12px;
  --ppqb-border: rgba(0,0,0,.14);
  --ppqb-muted: rgba(0,0,0,.65);
}

/* Main heading */
.ppqb__title { 
  margin: 0 0 6px; 
  font-size: 1.35rem; 
}

/* Subheading / helper intro text */
.ppqb__subtitle { 
  margin: 0 0 16px; 
  color: var(--ppqb-muted); 
}

/* 
=========================================================
SECTIONS & LAYOUT
Used to break the form into logical blocks
========================================================= 
*/

.ppqb__section { 
  margin-top: 18px; 
}

.ppqb__sectionTitle { 
  margin: 0 0 12px; 
  font-size: 1.1rem; 
}

/* Main form grid (single column by default) */
.ppqb__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Mobile safety (explicit but currently same as default) */
@media (max-width: 720px) {
  .ppqb__grid { 
    grid-template-columns: 1fr; 
  }
}

/* 
=========================================================
FORM FIELDS
Labels, inputs, help text
========================================================= 
*/

/* Each field stacks label + input vertically */
.ppqb__field { 
  display: grid; 
  gap: 6px; 
}

/* Fields that should span full width */
.ppqb__field--full { 
  grid-column: 1 / -1; 
}

/* Field labels */
.ppqb__label { 
  font-weight: 600; 
  font-size: .95rem; 
}

/* Small helper text under fields */
.ppqb__help { 
  color: var(--ppqb-muted); 
  font-size: .85rem; 
}

/* Inputs, selects, textareas */
.ppqb__control {
  padding: 10px 12px;
  border: 1px solid var(--ppqb-border);
  border-radius: var(--ppqb-radius);
  background: transparent;
  color: inherit;
}

/* Mobile safety */
@media (max-width: 720px) {
  .ppqb__control { 
    padding: 10px 12px;
    border: 1px solid var(--ppqb-border);
    border-radius: var(--ppqb-radius);
    background: transparent;
    color: inherit; 
    width: 100%;
  }
}

/* 
=========================================================
POSITION CHECKBOX GRID (Front / Back / Sleeve etc.)
========================================================= 
*/

.ppqb__checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Stack positions vertically on mobile */
@media (max-width: 720px) {
  .ppqb__checks { 
    grid-template-columns: 1fr; 
  }
}

/* Individual position card */
.ppqb__check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--ppqb-border);
  border-radius: var(--ppqb-radius);
}

/* Small italic-style hint text inside position cards */
.ppqb__check em { 
  font-style: normal; 
  color: var(--ppqb-muted); 
  margin-left: 6px; 
}

/* Cost hint shown next to position name */
.ppqb__posHint {
  display: inline-block;
  margin-left: 8px;
  font-size: .9rem;
  color: var(--ppqb-muted);
}

/* 
=========================================================
BUTTONS & ACTIONS
========================================================= 
*/

.ppqb__actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Base button style */
.ppqb__btn {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--ppqb-border);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* Primary action (Add item / Submit quote) */
.ppqb__btn--primary { 
  border-color: currentColor; 
  font-weight: 700; 
}

/* Secondary / ghost buttons */
.ppqb__btn--ghost { 
  opacity: .9; 
}

/* Small buttons (Remove item) */
.ppqb__btn--mini {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .85rem;
}

/* 
=========================================================
MESSAGES (SUCCESS / ERROR)
========================================================= 
*/

.ppqb__msg { 
  margin-top: 10px; 
  min-height: 1.2em; 
}

.ppqb__msg--ok { 
  color: inherit; 
  font-weight: 600; 
}

.ppqb__msg--error { 
  color: #b32d2e; 
  font-weight: 600; 
}

/* 
=========================================================
CART / QUOTE SUMMARY
========================================================= 
*/

.ppqb__cart { 
  display: grid; 
  gap: 10px; 
}

.ppqb__cartEmpty { 
  color: var(--ppqb-muted); 
  padding: 10px 0; 
}

/* Individual cart item */
.ppqb__cartItem {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--ppqb-border);
  border-radius: var(--ppqb-radius);
  padding: 12px;
}

.ppqb__cartTitle { 
  font-weight: 700; 
}

.ppqb__cartMeta { 
  color: var(--ppqb-muted); 
  font-size: .9rem; 
  margin-top: 4px; 
}

.ppqb__cartPrice { 
  font-weight: 800; 
  text-align: right; 
  margin-bottom: 8px; 
}

/* Quantity pill badge */
.ppqb__pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--ppqb-border);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
}

/* 
=========================================================
TOTALS BOX (Subtotal / Discount / Delivery / Total)
========================================================= 
*/

.ppqb__totals {
  margin-top: 12px;
  border: 1px solid var(--ppqb-border);
  border-radius: var(--ppqb-radius);
  padding: 12px;
}

.ppqb__totalsRow {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
}

/* Final total row */
.ppqb__totalsRow--grand {
  border-top: 1px solid var(--ppqb-border);
  margin-top: 6px;
  padding-top: 10px;
  font-size: 1.05rem;
}

/* 
=========================================================
HONEYPOT FIELD (ANTI-SPAM)
========================================================= 
*/

.ppqb__hp {
  position: absolute !important;
  left: -9999px !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
}

/* 
=========================================================
ADMIN PANEL (left side of admin pages for / edit form)
========================================================= 
*/

/* Add padding inside the admin postbox */
.postbox .ppqb-admin-box {
  padding: 16px !important;
  box-sizing: border-box;
}

/* Remove WordPress default table margins */
.postbox .ppqb-admin-box .form-table {
  margin: 0 !important;
  width: 100%;
}

/* Add spacing so headings/labels aren't stuck to the edge */
.postbox .ppqb-admin-box .form-table th,
.postbox .ppqb-admin-box .form-table td {
  padding: 10px 8px !important;
  vertical-align: top;
}

/* Keep labels narrower so inputs have space */
.postbox .ppqb-admin-box .form-table th {
  width: 130px !important;
  padding-left: 6px !important;
}

/* Ensure inputs never overflow the panel */
.postbox .ppqb-admin-box input[type="text"],
.postbox .ppqb-admin-box input[type="email"],
.postbox .ppqb-admin-box input[type="number"],
.postbox .ppqb-admin-box input[type="tel"],
.postbox .ppqb-admin-box select,
.postbox .ppqb-admin-box textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Small spacing under admin help text */
.ppqb-admin-box .description {
  margin: 6px 0 0;
}

/* Ensure allowed positions grid stays within panel */
.ppqb-allowedpos-grid {
  max-width: 100%;
}