/**
 * Jordan Pumps Selector Tool - Frontend Styles
 */

/* ==========================================================================
   1. Global Wrapper & Typography
   ========================================================================== */
   .jpst-calculator-wrap,
   .jpst-filter-redirect-wrap,
   .jpst-css-filter-wrap {
       max-width: 700px;
       margin: 0 auto 30px;
       font-family: inherit;
       line-height: 1.6;
       background: #fafafa;
       border: 1px solid #ddd;
       border-radius: 10px;
       padding: 24px 28px;
       box-sizing: border-box;
   }
   
   .jpst-filter-redirect-wrap,
   .jpst-css-filter-wrap {
       padding: 16px 20px;
       border-radius: 8px;
   }
   
   .jpst-header h2 {
       margin-top: 0;
       margin-bottom: 8px;
   }
   
   .jpst-header p {
       color: #555;
       margin-top: 0;
       margin-bottom: 24px;
   }
   
   /* ==========================================================================
      2. Standard Form Layouts
      ========================================================================== */
   .jpst-form-group {
       margin-bottom: 18px;
   }
   
   .jpst-margin-top {
       margin-top: 14px;
   }
   
   .jpst-label {
       display: block;
       font-weight: 600;
       margin-bottom: 6px;
       color: #333;
   }
   
   .jpst-input {
       width: 100%;
       padding: 10px;
       font-size: 16px;
       border: 1px solid #ccc;
       border-radius: 6px;
       box-sizing: border-box;
       background-color: #fff;
       color: #333;
   }
   
   .jpst-input:focus {
       border-color: #2271b1;
       outline: none;
       box-shadow: 0 0 0 1px #2271b1;
   }
   
   .jpst-help-text {
       display: block;
       color: #777;
       font-size: 13px;
       margin-top: 4px;
       line-height: 1.4;
   }
   
   /* Advanced Options Details */
   .jpst-advanced-options {
       margin-bottom: 20px;
       background: #fff;
       padding: 12px 16px;
       border-radius: 6px;
       border: 1px solid #eee;
   }
   
   .jpst-summary {
       cursor: pointer;
       font-weight: 600;
       color: #2271b1;
       list-style: none; /* Hide default arrow in some browsers */
   }
   
   .jpst-summary::-webkit-details-marker {
       display: none;
   }
   
   .jpst-summary:before {
       content: '+ ';
       font-weight: bold;
   }
   
   .jpst-advanced-options[open] .jpst-summary:before {
       content: '- ';
   }
   
   /* ==========================================================================
      3. Inline Forms (Filter Bars)
      ========================================================================== */
   .jpst-inline-form {
       display: flex;
       flex-wrap: wrap;
       gap: 15px;
       align-items: flex-end;
   }
   
   .jpst-inline-group {
       flex: 1 1 150px;
       display: flex;
       flex-direction: column;
   }
   
   .jpst-inline-group label {
       font-weight: 600;
       font-size: 14px;
       margin-bottom: 6px;
   }
   
   .jpst-action-group, 
   .jpst-submit-group {
       flex: 0 1 auto;
       flex-direction: row;
       gap: 10px;
   }
   
   .jpst-filter-title {
       display: block;
       margin-bottom: 12px;
       font-size: 16px;
   }
   
   /* ==========================================================================
      4. Buttons
      ========================================================================== */
   .jpst-btn {
       display: inline-block;
       padding: 10px 24px;
       font-size: 16px;
       border-radius: 6px;
       cursor: pointer;
       font-weight: 600;
       text-align: center;
       text-decoration: none;
       transition: all 0.2s ease;
       border: 1px solid transparent;
   }
   
   .jpst-btn-primary {
       background: #2271b1;
       color: #fff;
   }
   
   .jpst-btn-primary:hover,
   .jpst-btn-primary:focus {
       background: #135e96;
       color: #fff;
   }
   
   .jpst-btn-secondary {
       background: #f0f0f1;
       color: #2271b1;
       border-color: #2271b1;
   }
   
   .jpst-btn-secondary:hover {
       background: #e6e6e6;
   }
   
   .jpst-btn-outline {
       background: transparent;
       color: #2271b1;
       border-color: #2271b1;
   }
   
   .jpst-btn-outline:hover {
       background: #2271b1;
       color: #fff;
   }
   
   /* ==========================================================================
      5. Results Grid & Tier Cards
      ========================================================================== */
   .jpst-results-wrap {
       margin-top: 24px;
       border-top: 2px dashed #ddd;
       padding-top: 24px;
   }
   
   .jpst-tier-card {
       background: #f8fbfd;
       border: 1px solid #cce3f2;
       padding: 20px;
       border-radius: 8px;
       margin-bottom: 16px;
   }
   
   .jpst-primary-card {
       background: #e8f2fa;
       border-color: #a9cfe8;
   }
   
   .jpst-borderline-card {
       background: #fff8e5;
       border-color: #ffe08a;
   }
   
   .jpst-tier-title {
       margin-top: 0;
       margin-bottom: 12px;
       font-size: 18px;
       color: #333;
   }
   
   .jpst-cable-info {
       background: rgba(255, 255, 255, 0.6);
       padding: 10px 14px;
       border-radius: 6px;
       font-size: 14px;
       margin: 12px 0;
   }
   
   .jpst-text-small {
       font-size: 13px;
       color: #666;
       line-height: 1.4;
   }
   
   .jpst-action-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-top: 16px;
       flex-wrap: wrap;
       gap: 12px;
   }
   
   .jpst-price {
       font-size: 18px;
       font-weight: 700;
       color: #111;
   }
   
   .jpst-disclaimer {
       margin-top: 24px;
       font-size: 13px;
       color: #777;
       border-top: 1px solid #eee;
       padding-top: 16px;
   }
   
   /* ==========================================================================
      6. Notices & Loaders
      ========================================================================== */
   .jpst-notice,
   .jpst-filter-message,
   .jpst-error {
       padding: 14px 18px;
       border-radius: 6px;
       margin-top: 16px;
       font-size: 15px;
   }
   
   .jpst-error {
       background: #fbeaea;
       border: 1px solid #f2c7c7;
       color: #d63638;
   }
   
   .jpst-warning,
   .jpst-notice-warning {
       background: #fff8e5;
       border: 1px solid #ffe08a;
       color: #8a6d00;
   }
   
   .jpst-success {
       background: #edf7ed;
       border: 1px solid #cce8cc;
       color: #1e4620;
   }
   
   .jpst-loader {
       margin-top: 20px;
       font-weight: 600;
       color: #555;
       display: flex;
       align-items: center;
       gap: 10px;
   }
   
   .jpst-spinner {
       width: 20px;
       height: 20px;
       border: 3px solid #ddd;
       border-top-color: #2271b1;
       border-radius: 50%;
       animation: jpst-spin 1s linear infinite;
   }
   
   @keyframes jpst-spin {
       to { transform: rotate(360deg); }
   }
   
   /* ==========================================================================
      7. Responsive Overrides
      ========================================================================== */
   @media screen and (max-width: 600px) {
       .jpst-calculator-wrap,
       .jpst-filter-redirect-wrap,
       .jpst-css-filter-wrap {
           padding: 16px;
       }
       
       .jpst-inline-group {
           flex: 1 1 100%;
       }
   
       .jpst-action-row {
           flex-direction: column;
           align-items: stretch;
       }
       
       .jpst-action-row .jpst-btn {
           width: 100%;
       }
   
       .jpst-action-row .jpst-price {
           text-align: center;
       }
   }