.cqf-form { max-width: 860px; margin: 0 auto; font-family: "Outfit", Sans-serif; }
.cqf-fieldset { border: 1px solid #e3e3e3; padding: 16px; margin: 16px 0; border-radius: 8px; }
.cqf-fieldset legend { font-weight: 600; padding: 0 6px; font-size: 16px;}
.cqf-row { margin-bottom: 12px; }
.cqf-row input[type="text"], 
.cqf-row input[type="email"],
.cqf-row input[type="tel"],
.cqf-row input[type="number"],
.cqf-row textarea,
.cqf-row select { width: 100% !important;padding: 10px; border: 1px solid #cfcfcf; border-radius: 6px; font-size: 14px !important;text-align: left !important; }
.cqf-row input[type="text"]:focus, 
.cqf-row input[type="email"]:focus,
.cqf-row input[type="tel"]:focus,
.cqf-row input[type="number"]:focus,
.cqf-row textarea:focus{border: 1px solid #cfcfcf !important;}
.cqf-inline { display: flex; gap: 8px; align-items: center; }
.cqf-unit { min-width: 100px; display: inline-block; color: #666; }
.cqf-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; margin-top: 8px;    margin-bottom: 8px; }
.cqf-radio, .cqf-check { display: flex; align-items: center; gap: 8px; font-size: 16px; padding-bottom: 8px;}
.cqf-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cqf-req { color: #e00; font-weight: 700; }
.cqf-hidden { display: none; }
.cqf-note { font-size: 12px; color: #666; margin: 6px 0 0; }
.cqf-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.cqf-btn { background: #191919; color: #f1f1f1; border: 0; padding: 15px 30px; border-radius: 11px; cursor: pointer;font-size: 16px;font-weight: 500; }
.cqf-btn:hover{background: transparent !important;color:#191919 !important;border:1px solid #191919 !important;}
#cqf-status { font-size: 14px; }
#cqf-status.cqf-ok { color: #137333; }
#cqf-status.cqf-err { color: #b00020; }
@media (max-width: 720px) {
  .cqf-grid-3 { grid-template-columns: 1fr; }
  .cqf-unit { min-width: unset; }
}

@media (min-width: 769px) {
.cqf-row.cqf-two-col {display: flex;gap: 15px;}
.cqf-row.cqf-two-col label {flex: 1;flex-direction: column;}
.cqf-row.cqf-two-col input {width: 100%;padding: 8px;margin-top: 5px;border: 1px solid #ccc;border-radius: 4px;}
}

/* Style for non-clickable headings inside the dropdown */
#cqf-category option.cqf-heading {
  font-weight: bold;
  font-size: 15px;
  color: #000;
  background-color: #f5f5f5;
}

/* --- New Styles for Product Line Items and Modal --- */
/* ========================================
   Custom Quote Form Styles
   ======================================== */

/* Base Form Styles */
.cqf-form {
  max-width: 900px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
}

.cqf-fieldset {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
  background: #fff;
}

.cqf-fieldset legend {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  padding: 0 10px;
}

.cqf-row {
  margin-bottom: 16px;
}

.cqf-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cqf-grid-3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
}

.cqf-form label {
  display: block;
  font-weight: 500;
  color: #000;
  margin-bottom: 6px;
}

.cqf-form input[type="text"],
.cqf-form input[type="email"],
.cqf-form input[type="tel"],
.cqf-form input[type="number"],
.cqf-form select,
.cqf-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
  transition: border-color 0.2s;
  margin-top: 5px;
}

.cqf-form input:focus,
.cqf-form select:focus,
.cqf-form textarea:focus {
  outline: none;
  border-color: #333;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.cqf-req {
  color: #e74c3c;
}

.cqf-note {
  font-size: 13px;
  color: #777;
  margin-top: 8px;
  font-style: italic;
}

.cqf-hidden {
  display: none !important;
}

.cqf-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cqf-unit {
  font-weight: 500;
  color: #666;
  white-space: nowrap;
}

.cqf-options {
  display: flex;
  flex-wrap: wrap;
  gap: 45px;
  margin-top: 8px;
}

.cqf-radio,
.cqf-check {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: normal;
  margin-bottom: 0;
}

.cqf-radio input,
.cqf-check input {
  width: auto;
  margin-right: 6px;
  cursor: pointer;
}

/* Products Section */
.cqf-products-container {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  min-height: 120px;
}

.cqf-add-products-btn {
  background: #000;
  color: white;
  border: none;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.cqf-add-products-btn:hover , .cqf-add-products-btn:focus{
  background: #000 !important;
color:#fff !important;
}

.cqf-selected-products {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: left;
}

.cqf-product-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f9f9f9;
  position: relative;
}

.cqf-product-image {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eee;
}

.cqf-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cqf-product-details {
  flex: 1;
}

.cqf-product-details h4 {
  margin: 0;
  font-size: 15px;
  color: #333;
}

.cqf-product-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cqf-qty-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #000;
  background: white;
  color: #000;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cqf-qty-btn:hover {
  background: #000;
  color: white;
      border: 1px solid #000;
}
.cqf-qty-btn:focus {
    background: #000;
    color: white;
    border: 1px solid #000;
}

.cqf-qty-input {
  width: 60px;
  text-align: center;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.cqf-remove-product {
position: absolute;
    top: -12px;
    right: -15px;
    width: 25px;
    height: 25px;
    border: none;
    background: #000;
    color: white;
    border-radius: 100%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition: background 0.2s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 5px;
}

.cqf-remove-product:hover {
  background: #000;
color:#fff;
}

/* Modal Styles - FIX #2: Better layout and sizing */
.cqf-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  overflow: auto;
}

.cqf-modal-content {
  background: white;
  margin: 40px auto;
  width: 95%;
  max-width: 1200px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

.cqf-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #eee;
}

.cqf-modal-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.cqf-modal-close {
  background: none;
  border: none;
  font-size: 32px;
  color: #999;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 36px;
  height: 36px;
  transition: color 0.2s;
}

.cqf-modal-close:hover {
  color: #333;
}

.cqf-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

/* Products Grid - FIX #2: Exactly 3 products per row */
.cqf-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.cqf-product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}

.cqf-product-card:hover {
  border-color: #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.cqf-product-card-image {
  width: 100%;
  height: 200px;
  border-radius: 6px;
  overflow: hidden;
  background: #f5f5f5;
  margin-bottom: 12px;
  border: 1px solid #eee;
}

.cqf-product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cqf-product-card-info {
  flex: 1;
  margin-bottom: 12px;
}

.cqf-product-card-info h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
  line-height: 1.4;
  min-height: 44px;
}

/* Product Card Actions - FIX #2: Black & White colors */
.cqf-product-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.cqf-modal-qty-input {
  width: 50px;
  text-align: center;
  padding: 6px;
  border: 1px solid #000;
  border-radius: 4px;
  font-size: 14px;
}

.cqf-product-card-actions .cqf-qty-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #000;
  background: white;
  color: #000;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: all 0.2s;
}

.cqf-product-card-actions .cqf-qty-btn:hover {
  background: #000;
  color: white;
}

.cqf-add-to-selected {
  background: #000;
  color: white;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.cqf-add-to-selected:hover, .cqf-add-to-selected:focus {
  background: #333;
color:#fff;
}

.cqf-loading,
.cqf-error,
.cqf-no-products {
  text-align: center;
  padding: 40px;
  color: #777;
  font-size: 16px;
  grid-column: 1 / -1;
}

.cqf-error {
  color: #e74c3c;
}

/* Submit Button & Status */
.cqf-actions {
  text-align: center;
  margin-top: 24px;
}

.cqf-btn {
  background: #000;
  color: white;
  border: none;
  padding: 14px 48px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.cqf-btn:hover {
  background: #333;
}

#cqf-status {
  margin-top: 16px;
  padding: 12px;
  border-radius: 4px;
  font-weight: 500;
}

#cqf-status.cqf-ok {
  color: #155724;
  background: #d4edda;
  border: 1px solid #c3e6cb;
}

#cqf-status.cqf-err {
  color: #721c24;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
}

/* Responsive - FIX #2: 2 products on tablet, 1 on mobile */
@media (max-width: 992px) {
  .cqf-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .cqf-two-col,
  .cqf-grid-3 {
    grid-template-columns: 1fr;
  }

  .cqf-products-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cqf-product-card-image {
    height: 180px;
  }

  .cqf-modal-content {
    width: 95%;
    margin: 20px auto;
  }

  .cqf-product-item {
    flex-wrap: wrap;
  }

  .cqf-product-controls {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
  
  .cqf-product-card-actions {
    flex-wrap: nowrap !important;
    justify-content: center;
  }
}

.cqf-product-category{
  color: #000 !important;
  font-weight: bold !important;
}

#cqf-category option:disabled {
  color: #ccc;
  cursor: not-allowed;
  opacity: 0.5;
}
#cqf-category optgroup {
  font-weight: bold;
}



/* Disabled button styling */
.cqf-add-products-btn.cqf-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #ccc;
}

.cqf-add-products-btn.cqf-disabled:hover {
  background-color: #ccc;
}

/* Error field styling */
.cqf-error {
  border-color: #dc3545 !important;
  background-color: #fff5f5 !important;
}