/* 
   Joint Application Form — form.css  v2.2
   Strategy:
   - #jaf-form-wrapper / #jaf-dashboard scoping = specificity boost (no  needed for layout)
   -  ONLY on: input/select/textarea/button/label properties
     that themes commonly override (border, background, color, padding,
     font, appearance, box-shadow, height, float, width on form elements)
  */

/* Force highest specificity — double ID trick for theme override */

/* ── CSS Variables (scoped so they don't leak) ── */
:root {
     --jaf-primary: #686157;
     --jaf-primary-dark: #504a41;
     --jaf-green: #1a7a3a;
     --jaf-red: #cc0000;
     --jaf-border: #e0e0e0;
     --jaf-bg: #fafafa;
     --jaf-radius: 8px;
     --jaf-shadow: 0 0 24px rgba(26, 60, 94, 0.2);
     --jaf-transition: 0.25s ease;
     --montserrat: 'Montserrat', sans-serif;
     --playfair: 'Playfair Display', serif;
}

/* Wrapper */
#jaf-form-wrapper {
     max-width: 1140px;
     margin: 0 auto;
     font-family: var(--montserrat);
     color: #333;
     position: relative;
     overflow: hidden;
     border-radius: var(--jaf-radius);
     box-shadow: var(--jaf-shadow);
     box-sizing: border-box;
}

#jaf-form-wrapper .jaf-price-badge {
     position: absolute;
     top: 0;
     right: 0;
     background: var(--jaf-primary);
     color: #fff;
     padding: 8px 16px 8px 28px;
     font-weight: 700;
     font-size: 13px;
     border-radius: 0 0 0 8px;
     clip-path: polygon(18px 0%, 100% 0%, 100% 100%, 0% 100%);
     z-index: 2;
}

/* 
   HEADER
 */
#jaf-form-wrapper .jaf-form-header {
     text-align: center;
     padding: 28px 40px 12px;
}
#jaf-form-wrapper .jaf-form-header h2 {
     margin: 0 0 6px;
     font-size: 26px;
     font-family: var(--playfair);
     font-weight: 700;
     color: var(--jaf-primary);
}
#jaf-form-wrapper .jaf-form-header p {
     margin: 0;
     color: #666;
     font-size: 14px;
}

/* 
   STEP INDICATOR
    */
#jaf-form-wrapper .jaf-steps-indicator {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 24px 20px;
}
#jaf-form-wrapper .jaf-step-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
}
#jaf-form-wrapper .jaf-step-circle {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     border: 2px solid #ccc;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
     font-size: 15px;
     color: #999;
     background: #fff;
     transition: all 0.35s ease;
}
#jaf-form-wrapper .jaf-step-check {
     display: none;
}
#jaf-form-wrapper .jaf-step-item.active .jaf-step-circle {
     border-color: var(--jaf-primary);
     color: var(--jaf-primary);
     box-shadow: 0 0 0 4px rgba(26, 60, 94, 0.12);
}
#jaf-form-wrapper .jaf-step-item.complete .jaf-step-circle {
     border-color: var(--jaf-primary);
     background: var(--jaf-primary);
     color: #fff;
}
#jaf-form-wrapper .jaf-step-item.complete .jaf-step-num {
     display: none;
}
#jaf-form-wrapper .jaf-step-item.complete .jaf-step-check {
     display: block;
}
#jaf-form-wrapper .jaf-step-label {
     font-size: 12px;
     font-weight: 600;
     color: #999;
     white-space: nowrap;
}
#jaf-form-wrapper .jaf-step-item.active .jaf-step-label {
     color: var(--jaf-primary);
}
#jaf-form-wrapper .jaf-step-item.complete .jaf-step-label {
     color: var(--jaf-primary);
}
#jaf-form-wrapper .jaf-step-line {
     flex: 1;
     height: 2px;
     background: #ddd;
     min-width: 40px;
     max-width: 100px;
     transition: background 0.4s ease;
}
#jaf-form-wrapper .jaf-step-line.complete {
     background: var(--jaf-primary);
}

/* 
   FORM BODY & PANELS
    */
#jaf-form-wrapper .jaf-form-body {
     padding: 10px 30px 30px;
}
#jaf-form-wrapper .jaf-step-panel {
     display: none;
}
#jaf-form-wrapper .jaf-step-panel.active {
     display: block;
}

@keyframes jaf-slide-in-right {
     from {
          opacity: 0;
          transform: translateX(40px);
     }
     to {
          opacity: 1;
          transform: translateX(0);
     }
}
@keyframes jaf-slide-in-left {
     from {
          opacity: 0;
          transform: translateX(-40px);
     }
     to {
          opacity: 1;
          transform: translateX(0);
     }
}
@keyframes jaf-shake {
     0%,
     100% {
          transform: translateX(0);
     }
     20% {
          transform: translateX(-6px);
     }
     40% {
          transform: translateX(6px);
     }
     60% {
          transform: translateX(-4px);
     }
     80% {
          transform: translateX(4px);
     }
}

#jaf-form-wrapper .jaf-slide-in-right {
     animation: jaf-slide-in-right 0.3s ease both;
}
#jaf-form-wrapper .jaf-slide-in-left {
     animation: jaf-slide-in-left 0.3s ease both;
}
#jaf-form-wrapper .jaf-btn-shake {
     animation: jaf-shake 0.5s ease;
}

#jaf-form-wrapper .jaf-step-title-row {
     display: flex;
     justify-content: center;
     align-items: center;
     border-bottom: 2px solid #eee;
     margin-bottom: 24px;
     padding-bottom: 12px;
}
#jaf-form-wrapper .jaf-step-title-row h3,
#jaf-form-wrapper .jaf-step-panel > h3 {
     margin: 0;
     font-size: 20px;
     font-family: var(--playfair);
     color: var(--jaf-primary);
     font-weight: 700;
}
#jaf-form-wrapper .jaf-step-panel > h3 {
     border-bottom: 2px solid #eee;
     padding-bottom: 12px;
     margin-bottom: 24px;
}
#jaf-form-wrapper .jaf-clear-form {
     font-size: 13px;
     color: #6a7680;
     position: absolute;
     right: 40px;
     text-decoration: underline;
}
#jaf-form-wrapper .jaf-clear-form:hover {
     color: var(--jaf-red);
}

/* 
   FIELD GRIDS
    */
.jaf-field-grid {
     display: grid;
     gap: 16px;
     margin-bottom: 16px;
}
.jaf-col-2 {
     grid-template-columns: repeat(2, 1fr);
}
.jaf-col-3 {
     grid-template-columns: repeat(3, 1fr);
}
.jaf-col-4 {
     grid-template-columns: repeat(4, 1fr);
}
.jaf-field {
     margin-bottom: 16px;
}

/* Label — reset theme overrides */
#jaf-form-wrapper .jaf-field > label,
#jaf-dashboard .jaf-field > label {
     display: block;
     float: none;
     width: auto;
     font-size: 14px;
     font-weight: 600;
     line-height: 1.4em;
     color: #34495e;
     margin-bottom: 15px;
     padding: 0;
     background: none;
     text-align: left;
}

#jaf-form-wrapper .req,
#jaf-dashboard .req {
     color: var(--jaf-red);
}

/* Inputs — reset theme heavy overrides */
#jaf-form-wrapper input[type='text'],
#jaf-form-wrapper input[type='email'],
#jaf-form-wrapper input[type='tel'],
#jaf-form-wrapper input[type='date'],
#jaf-form-wrapper input[type='number'],
#jaf-form-wrapper input[type='password'],
#jaf-form-wrapper select,
#jaf-form-wrapper textarea,
#jaf-dashboard input[type='text'],
#jaf-dashboard input[type='email'],
#jaf-dashboard input[type='tel'],
#jaf-dashboard input[type='date'],
#jaf-dashboard input[type='number'],
#jaf-dashboard input[type='password'],
#jaf-dashboard select,
#jaf-dashboard textarea {
     width: 100%;
     padding: 10px 14px;
     font-size: 14px;
     font-family: inherit;
     color: #333;
     border: 1px solid #ccc;
     border-radius: 6px;
     background-color: #fff;
     background-image: none;
     box-sizing: border-box;
     box-shadow: none;
     outline: none;
     height: auto;
     line-height: 1.5;
     display: block;
     margin: 0;
     -webkit-appearance: none;
     appearance: none;
     transition:
          border-color 0.2s ease,
          box-shadow 0.2s ease;
}

/* Focus state */
#jaf-form-wrapper input[type='text']:focus,
#jaf-form-wrapper input[type='email']:focus,
#jaf-form-wrapper input[type='tel']:focus,
#jaf-form-wrapper input[type='date']:focus,
#jaf-form-wrapper input[type='number']:focus,
#jaf-form-wrapper input[type='password']:focus,
#jaf-form-wrapper select:focus,
#jaf-form-wrapper textarea:focus,
#jaf-dashboard input[type='text']:focus,
#jaf-dashboard input[type='email']:focus,
#jaf-dashboard input[type='tel']:focus,
#jaf-dashboard input[type='date']:focus,
#jaf-dashboard input[type='number']:focus,
#jaf-dashboard input[type='password']:focus,
#jaf-dashboard select:focus,
#jaf-dashboard textarea:focus {
     border-color: var(--jaf-primary);
     box-shadow: 0 0 0 3px rgba(26, 60, 94, 0.1);
     outline: none;
     background-color: #fff;
}

/* Select arrow */
#jaf-form-wrapper select,
#jaf-dashboard select {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' fill='none' stroke-width='2'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 12px center;
     padding-right: 36px;
     cursor: pointer;
}

/* Textarea resize */
#jaf-form-wrapper textarea,
#jaf-dashboard textarea {
     resize: vertical;
     min-height: 80px;
}

/* Radio/Checkbox — keep native appearance */
#jaf-form-wrapper input[type='radio'],
#jaf-form-wrapper input[type='checkbox'],
#jaf-dashboard input[type='radio'],
#jaf-dashboard input[type='checkbox'] {
     width: auto;
     height: auto;
     display: inline-block;
     margin: 10px 0;
     padding: 0;
     border: none;
     background: none;
     box-shadow: none;
     -webkit-appearance: auto;
     appearance: auto;
     float: none;
}

#jaf-form-wrapper .jaf-radio-inline {
     display: flex;
     gap: 20px;
     margin-top: 4px;
     flex-wrap: wrap;
     align-items: center;
}
#jaf-form-wrapper .gender-group {
     display: flex;
     align-items: center;
     gap: 20px;
     height: 45px;
     border: 1px solid #ccc;
     border-radius: 8px;
     padding: 0 15px;
     transition: border-color 0.3s ease;
}
#jaf-form-wrapper .jaf-radio-group {
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
     margin-bottom: 12px;
}

/* Radio/checkbox labels —  to undo theme float & width */
#jaf-form-wrapper .jaf-radio-inline label,
#jaf-form-wrapper .jaf-radio-group label {
     display: flex;
     float: none;
     width: auto;
     align-items: center;
     gap: 6px;
     font-size: 14px;
     font-weight: 400;
     color: #333;
     cursor: pointer;
     margin: 0;
     padding: 0;
     background: none;
}

/* Validation */
#jaf-form-wrapper .jaf-input-error {
     border-color: var(--jaf-red);
     background-color: #fff8f8;
}
#jaf-form-wrapper .jaf-field-error > label {
     color: var(--jaf-red);
}
#jaf-form-wrapper .jaf-field-error .jaf-radio-inline {
     outline: 2px solid #fcc;
     border-radius: 4px;
     padding: 4px 8px;
}

/* 
   SECTION TITLES & BOXES
    */
#jaf-form-wrapper .jaf-section-title {
     font-size: 15px;
     font-weight: 700;
     color: var(--jaf-primary);
     margin: 24px 0 12px;
     border-left: 4px solid var(--jaf-primary);
     padding-left: 10px;
}
#jaf-form-wrapper .jaf-address-box,
#jaf-form-wrapper .jaf-jurisdiction-box {
     border: 1px solid var(--jaf-border);
     border-radius: var(--jaf-radius);
     padding: 20px;
     background: var(--jaf-bg);
     margin-bottom: 16px;
}
#jaf-form-wrapper .jaf-address-title {
     font-size: 14px;
     font-weight: 700;
     color: #555;
     margin-bottom: 14px;
     display: block;
}
#jaf-form-wrapper .jaf-jurisdiction-box .jaf-field {
     border-bottom: 1px solid #eee;
     padding-bottom: 14px;
}
#jaf-form-wrapper .jaf-jurisdiction-box .jaf-field:last-child {
     border-bottom: none;
     padding-bottom: 0;
}
#jaf-form-wrapper .jaf-note {
     font-size: 13px;
     color: #666;
     font-style: italic;
     margin: 6px 0 0;
}
#jaf-form-wrapper .jaf-conditional-block {
     margin-bottom: 16px;
}
#jaf-form-wrapper .jaf-mt-20 {
     margin-top: 20px;
}

/* 
   BUTTONS —  because themes override button styles
    */
#jaf-form-wrapper .jaf-btn,
#jaf-dashboard .jaf-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     padding: 11px 28px;
     background: var(--jaf-primary);
     color: #fff;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     font-size: 15px;
     font-weight: 600;
     font-family: inherit;
     text-decoration: none;
     line-height: 1.4;
     box-shadow: none;
     text-shadow: none;
     -webkit-appearance: none;
     appearance: none;
     transition: background var(--jaf-transition);
}
#jaf-form-wrapper .jaf-btn:hover,
#jaf-dashboard .jaf-btn:hover {
     background: var(--jaf-primary-dark);
     color: #fff;
     text-decoration: none;
}
#jaf-form-wrapper .jaf-btn-secondary,
#jaf-dashboard .jaf-btn-secondary {
     background: #f0f0f0;
     color: #444;
}
#jaf-form-wrapper .jaf-btn-secondary:hover,
#jaf-dashboard .jaf-btn-secondary:hover {
     background: #e2e2e2;
     color: #222;
}
#jaf-form-wrapper .jaf-btn-pay {
     min-width: 150px;
     font-size: 16px;
     padding: 13px 32px;
}
#jaf-form-wrapper .jaf-btn-sm,
#jaf-dashboard .jaf-btn-sm {
     padding: 7px 16px;
     font-size: 13px;
}
#jaf-form-wrapper .jaf-btn-loading {
     opacity: 0.7;
     cursor: not-allowed;
}
#jaf-form-wrapper .jaf-nav-buttons {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 30px;
}

/* 
   PAYMENT STEP 4
    */
#jaf-form-wrapper .jaf-order-summary {
     border: 1px solid var(--jaf-border);
     border-radius: var(--jaf-radius);
     padding: 18px 20px;
     background: var(--jaf-bg);
     margin-bottom: 24px;
}
#jaf-form-wrapper .jaf-order-summary h4 {
     margin: 0 0 10px;
     font-size: 17px;
     font-weight: 700;
     color: #333;
}
#jaf-form-wrapper .jaf-order-row {
     display: flex;
     justify-content: space-between;
     font-size: 15px;
     padding: 4px 0;
}
#jaf-form-wrapper .jaf-order-grand-total {
     border-top: 1px solid var(--jaf-border);
     margin-top: 8px;
     padding-top: 10px;
     font-size: 16px;
     font-weight: 700;
}

#jaf-form-wrapper .jaf-payment-layout {
     display: grid;
     grid-template-columns: 1.1fr 0.9fr;
     gap: 24px;
     align-items: start;
     margin-bottom: 24px;
}
#jaf-form-wrapper .jaf-payment-label {
     font-size: 14px;
     font-weight: 700;
     color: #444;
     margin-bottom: 12px;
     display: block;
}

#jaf-form-wrapper .jaf-payment-tabs {
     display: flex;
     gap: 12px;
     margin-bottom: 16px;
}
#jaf-form-wrapper .jaf-payment-tab {
     border: 1px solid #d0d0d0;
     border-radius: var(--jaf-radius);
     padding: 10px 16px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     font-size: 14px;
     font-weight: 600;
     color: #666;
     background: #fff;
     transition: border-color var(--jaf-transition);
     width: 200px;
}
#jaf-form-wrapper .jaf-payment-tab:hover {
     border-color: #aaa;
}
#jaf-form-wrapper .jaf-payment-tab.active {
     border-color: var(--jaf-green);
     background: #f0fff4;
     color: var(--jaf-primary);
     max-width: 220px;
}

#jaf-form-wrapper .jaf-payment-tab img {
     max-width: 80%;
     max-height: 90%;
     object-fit: contain;
}

#jaf-form-wrapper .jaf-no-services img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
}

#jaf-form-wrapper .jaf-payment-panel {
     padding: 4px 0;
}
#jaf-form-wrapper #jaf-stripe-element {
     border: 1px solid #ccc;
     border-radius: 4px;
     padding: 12px;
     background: #fff;
     min-height: 60px;
}

#jaf-form-wrapper .jaf-step4-services-label {
     font-size: 13px;
     font-weight: 700;
     color: #555;
     margin-bottom: 10px;
     text-transform: uppercase;
     letter-spacing: 0.4px;
     display: block;
}
#jaf-form-wrapper .jaf-step4-services-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
}
#jaf-form-wrapper .jaf-step4-service-card {
     display: block;
     cursor: pointer;
     border: 1px solid var(--jaf-border);
     border-radius: var(--jaf-radius);
     padding: 12px;
     background: #fff;
     transition: border-color var(--jaf-transition);
     position: relative;
}
#jaf-form-wrapper .jaf-step4-service-card:hover {
     background: #f0fff4;
     border: 1px solid var(--jaf-green);
}
#jaf-form-wrapper .jaf-step4-service-card.selected {
     background: #f0fff4;
     border: 1px solid var(--jaf-green);
}
#jaf-form-wrapper .jaf-step4-service-card input[type='checkbox'] {
     position: absolute;
     opacity: 0;
     pointer-events: none;
}
#jaf-form-wrapper .jaf-step4-service-inner {
     display: flex;
     flex-direction: column;
     gap: 4px;
}
#jaf-form-wrapper .jaf-step4-service-check {
     color: #ccc;
     font-size: 16px;
     display: none;
}
#jaf-form-wrapper .jaf-step4-service-card.selected .jaf-step4-service-check {
     color: var(--jaf-primary);
     display: block;
}
#jaf-form-wrapper .jaf-step4-service-name {
     font-size: 13px;
     font-weight: 700;
     color: var(--jaf-primary);
}
#jaf-form-wrapper .jaf-step4-service-desc {
     font-size: 11px;
     color: #686868;
     line-height: 1.4;
}
#jaf-form-wrapper .jaf-step4-service-price {
     font-size: 14px;
     font-weight: 700;
     color: var(--jaf-primary);
     margin-top: 4px;
}

#jaf-form-wrapper .jaf-terms-row {
     margin: 0 0 20px;
}
#jaf-form-wrapper .jaf-checkbox-label {
     display: flex;
     gap: 10px;
     align-items: flex-start;
     font-size: 13px;
     line-height: 1.6;
     cursor: pointer;
}
#jaf-form-wrapper .jaf-checkbox-label input {
     margin-top: 3px;
     flex-shrink: 0;
}
#jaf-form-wrapper .jaf-checkbox-label a {
     color: var(--jaf-red);
}
#jaf-form-wrapper .jaf-secure-badge {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 12px;
     color: #555;
     margin-top: 10px;
}

/* 
   MESSAGES & LOADING
    */
#jaf-form-wrapper .jaf-error-msg,
#jaf-dashboard .jaf-error-msg {
     color: var(--jaf-red);
     font-size: 13px;
     margin-top: 8px;
     padding: 10px 14px;
     background: #fff0f0;
     border-radius: 4px;
     border-left: 3px solid var(--jaf-red);
     display: block;
}
#jaf-form-wrapper .jaf-success-msg,
#jaf-dashboard .jaf-success-msg {
     color: var(--jaf-green);
     background: #f0fff4;
     border: 1px solid #b2dfdb;
     padding: 10px 14px;
     border-radius: 4px;
     font-size: 13px;
}

@keyframes jaf-spin {
     to {
          transform: rotate(360deg);
     }
}
.jaf-spinner {
     display: inline-block;
     width: 18px;
     height: 18px;
     border: 2px solid #ddd;
     border-top-color: var(--jaf-primary);
     border-radius: 50%;
     animation: jaf-spin 0.7s linear infinite;
     flex-shrink: 0;
}
.jaf-loading {
     display: flex;
     align-items: center;
     gap: 10px;
     color: #666;
     font-size: 14px;
     margin-top: 12px;
}
#jaf-payment-processing {
     background: rgba(255, 255, 255, 0.95);
     padding: 12px 16px;
     border-radius: 6px;
     border: 1px solid var(--jaf-border);
     margin-top: 12px;
     font-weight: 600;
     color: var(--jaf-primary);
     display: flex;
     align-items: center;
     gap: 10px;
}

/* 
   DASHBOARD
    */
#jaf-dashboard {
     max-width: 1140px;
     margin: 0 auto;
     font-family: var(--montserrat);
}

#jaf-dashboard .jaf-dash-header {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-bottom: 24px;
     flex-wrap: wrap;
     font-family: var(--playfair);
}
#jaf-dashboard .jaf-dash-header h2 {
     margin: 0;
     font-size: 22px;
     color: var(--jaf-primary);
     font-weight: 700;
     font-family: var(--playfair);
}
#jaf-dashboard .jaf-dash-ref {
     background: #eef4fb;
     color: var(--jaf-primary);
     padding: 4px 10px;
     border-radius: 20px;
     font-size: 14px;
     font-family: var(--montserrat);
}
#jaf-dashboard .jaf-logout-btn {
     margin-left: auto;
     padding: 8px 20px;
     background: transparent;
     color: #cc0000;
     border: 1px solid #cc0000;
     border-radius: 4px;
     font-size: 13px;
     font-weight: 600;
     text-decoration: none;
     display: inline-block;
     transition: all 0.2s;
}
#jaf-dashboard .jaf-logout-btn:hover {
     background: #cc0000;
     color: #fff;
}

#jaf-dashboard .jaf-status-badge {
     padding: 4px 12px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 700;
     display: inline-block;
}
#jaf-dashboard .jaf-status-badge.jaf-status-paid {
     background: #e0f7ea;
     color: var(--jaf-green);
}
#jaf-dashboard .jaf-status-badge.jaf-status-draft {
     background: #fff0c0;
     color: #997700;
}
#jaf-dashboard .jaf-status-badge.jaf-status-pending_payment {
     background: #ffeedd;
     color: #995500;
}

#jaf-dashboard .jaf-dash-tabs {
     display: flex;
     margin-bottom: 24px;
}
#jaf-dashboard .jaf-dash-tab {
     padding: 10px 20px;
     border: none;
     border-bottom: 3px solid transparent;
     background: none;
     font-size: 14px;
     font-weight: 600;
     font-family: var(--playfair);
     color: var(--jaf-primary);
     cursor: pointer;
     transition:
          color var(--jaf-transition),
          border-color var(--jaf-transition);
     border-radius: 0;
     box-shadow: none;
}
#jaf-dashboard .jaf-dash-tab.active {
     color: #fff;
     background: var(--jaf-primary);
     border-radius: 30px;
}
#jaf-dashboard .jaf-dash-panel {
     display: none;
}
#jaf-dashboard .jaf-dash-panel.active {
     display: block;
}

#jaf-dashboard .jaf-dash-panel-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
}
#jaf-dashboard .jaf-dash-panel h3,
#jaf-dashboard .jaf-dash-panel h4 {
     margin: 10px 0;
     font-size: 20px;
     color: var(--jaf-primary);
     font-weight: 700;
     font-family: var(--playfair);
}
#jaf-dashboard .jaf-dash-section {
     margin-bottom: 28px;
}
#jaf-dashboard .jaf-dash-section h4 {
     font-size: 15px;
     color: var(--jaf-primary);
     border-bottom: 1px solid #eee;
     padding-bottom: 8px;
     margin-bottom: 14px;
     font-weight: 700;
}

#jaf-dashboard .jaf-detail-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
}
#jaf-dashboard .jaf-detail-item {
     display: flex;
     flex-direction: column;
     gap: 3px;
}
#jaf-dashboard .jaf-detail-label {
     font-size: 14px;
     text-transform: capitalize;
     letter-spacing: 0.5px;
     color: var(--jaf-primary);
     font-weight: 600;
}
#jaf-dashboard .jaf-detail-value {
     font-size: 14px;
     color: #333;
     font-weight: 500;
}

#jaf-dashboard .jaf-services-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 18px;
     margin-top: 16px;
}
#jaf-dashboard .jaf-service-card {
     border: 1px solid var(--jaf-border);
     border-radius: 8px;
     padding: 20px;
     position: relative;
     transition:
          border-color var(--jaf-transition),
          box-shadow var(--jaf-transition);
     background: #fff;
}
#jaf-dashboard .jaf-service-card:not(.jaf-service-purchased):hover {
     border-color: var(--jaf-primary);
     box-shadow: var(--jaf-shadow);
     transform: translateY(-1px);
}
#jaf-dashboard .jaf-service-card.jaf-service-purchased {
     border-color: var(--jaf-green);
     background: #f0fff4;
}
#jaf-dashboard .jaf-service-card h4 {
     margin: 0 0 8px;
     font-size: 16px;
     color: var(--jaf-primary);
     font-weight: 700;
}
#jaf-dashboard .jaf-service-card p {
     font-size: 13px;
     color: #666;
     margin: 0 0 12px;
}
#jaf-dashboard .jaf-service-price {
     font-size: 18px;
     font-weight: 700;
     color: var(--jaf-primary);
     margin-bottom: 14px;
     display: block;
}
#jaf-dashboard .jaf-service-purchased-badge {
     font-size: 12px;
     color: var(--jaf-green);
     font-weight: 700;
     margin-bottom: 8px;
     display: block;
}
#jaf-dashboard .jaf-service-actions {
     display: flex;
     flex-direction: column;
     gap: 8px;
}
#jaf-dashboard .jaf-btn-service-pay,
#jaf-dashboard .jaf-btn-service-new-payment {
     font-size: 13px;
     padding: 8px 14px;
     width: 100%;
     text-align: center;
}

#jaf-dashboard .jaf-service-payment-form {
     margin-top: 14px;
     padding: 14px;
     background: #f9f9f9;
     border-radius: 6px;
     border: 1px solid var(--jaf-border);
}
#jaf-dashboard .jaf-service-payment-tabs {
     display: flex;
     gap: 8px;
     margin-bottom: 12px;
}
#jaf-dashboard .jaf-svc-tab {
     padding: 6px 16px;
     border: 1px solid #ccc;
     border-radius: 4px;
     background: #fff;
     cursor: pointer;
     font-size: 13px;
     color: #555;
     box-shadow: none;
}
#jaf-dashboard .jaf-svc-tab.active {
     border-color: var(--jaf-primary);
     color: var(--jaf-primary);
     font-weight: 700;
}
#jaf-dashboard .jaf-svc-msg {
     margin-top: 10px;
     font-size: 13px;
     padding: 8px 12px;
     border-radius: 4px;
}

#jaf-dashboard .jaf-payment-info-box {
     border: 1px solid var(--jaf-border);
     border-radius: 6px;
     padding: 20px;
     margin-bottom: 24px;
     background: #fff;
}

#jaf-dashboard .jaf-payment-info-box .jaf-detail-item {
     flex-direction: row;
     gap: 20px;
     padding: 8px 0;
     border-bottom: 1px solid #f0f0f0;
     align-items: center;
}
#jaf-dashboard .jaf-payment-info-box .jaf-detail-item:last-child {
     border-bottom: none;
}
#jaf-dashboard .jaf-payment-info-box .jaf-detail-label {
     min-width: 140px;
}
#jaf-dashboard .jaf-paid {
     color: var(--jaf-green);
     font-weight: 700;
}
#jaf-dashboard .jaf-masked-card {
     font-family: 'Courier New', monospace;
     background: #f4f4f4;
     padding: 4px 10px;
     border-radius: 4px;
     letter-spacing: 3px;
     font-size: 14px;
}
#jaf-dashboard .jaf-card-brand {
     font-size: 12px;
     background: #eee;
     padding: 2px 6px;
     border-radius: 3px;
     margin-right: 8px;
     font-family: sans-serif;
     letter-spacing: 0;
}

#jaf-dashboard .jaf-services-table {
     width: 100%;
     border-collapse: collapse;
}
#jaf-dashboard .jaf-services-table th,
#jaf-dashboard .jaf-services-table td {
     text-align: left;
     padding: 10px 14px;
     border-bottom: 1px solid #eee;
     font-size: 14px;
}
#jaf-dashboard .jaf-services-table th {
     background: #f4f4f4;
     font-weight: 600;
     color: #333;
}
#jaf-dashboard .jaf-services-table tfoot td {
     font-weight: 600;
}

#jaf-dashboard .jaf-dash-actions {
     display: flex;
     gap: 12px;
     margin-top: 16px;
}
#jaf-dashboard #jaf-dash-edit-mode .jaf-field {
     position: relative;
}

/* Dashboard edit inputs */
#jaf-dashboard input[type='text'],
#jaf-dashboard input[type='email'],
#jaf-dashboard input[type='tel'],
#jaf-dashboard input[type='date'],
#jaf-dashboard select,
#jaf-dashboard textarea {
     width: 100%;
     padding: 9px 12px;
     font-size: 14px;
     font-family: inherit;
     color: #333;
     border: 1px solid #ccc;
     border-radius: 6px;
     background-color: #fff;
     box-sizing: border-box;
     box-shadow: none;
     outline: none;
     height: auto;
     line-height: 1.5;
     display: block;
     margin: 0 0 4px;
     -webkit-appearance: none;
     appearance: none;
}
#jaf-dashboard input[type='text']:focus,
#jaf-dashboard input[type='email']:focus,
#jaf-dashboard input[type='tel']:focus,
#jaf-dashboard input[type='date']:focus,
#jaf-dashboard select:focus,
#jaf-dashboard textarea:focus {
     border-color: var(--jaf-primary);
     box-shadow: 0 0 0 3px rgba(26, 60, 94, 0.1);
}

/* 
   STAGE TRACKING — Application Timeline
    */

/* Timeline steps container */
.jaf-timeline-steps {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 0;
     margin-bottom: 20px;
     padding: 16px 0;
}

/* Single step */
.jaf-timeline-step {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
     min-width: 80px;
}

/* Dot */
.jaf-timeline-dot {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 14px;
     transition: all 0.3s ease;
     border: 2px solid #e2e8f0;
     background: #fff;
     color: #94a3b8;
}

/* Done step */
.jaf-timeline-step.done .jaf-timeline-dot {
     background: var(--jaf-primary);
     border-color: var(--jaf-primary);
     color: #fff;
}

/* Current step — pulse animation */
.jaf-timeline-step.current .jaf-timeline-dot {
     background: #eef4fb;
     border-color: var(--jaf-primary);
     color: var(--jaf-primary);
     box-shadow: 0 0 0 4px rgba(26, 60, 94, 0.15);
     animation: jaf-pulse 2s ease infinite;
}

@keyframes jaf-pulse {
     0%,
     100% {
          box-shadow: 0 0 0 4px #68615750;
     }
     50% {
          box-shadow: 0 0 0 8px #68615735;
     }
}

/* Label */
.jaf-timeline-label {
     font-size: 11px;
     font-weight: 600;
     color: #94a3b8;
     text-align: center;
     line-height: 1.3;
     max-width: 80px;
}
.jaf-timeline-step.done .jaf-timeline-label,
.jaf-timeline-step.current .jaf-timeline-label {
     color: var(--jaf-primary);
}

/* Connector line between steps */
.jaf-timeline-line {
     flex: 1;
     height: 2px;
     background: #e2e8f0;
     min-width: 20px;
     margin-bottom: 18px;
     transition: background 0.4s ease;
}
.jaf-timeline-line.done {
     background: var(--jaf-primary);
}

/* Admin notes section */
.jaf-stage-notes {
     background: #f8fafc;
     border: 1.5px solid #e2e8f0;
     border-radius: 8px;
     padding: 16px;
     margin-top: 12px;
}
.jaf-stage-notes-title {
     font-size: 12px;
     font-weight: 700;
     color: #64748b;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-bottom: 10px;
}
.jaf-stage-note-item {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     padding: 8px 0;
     border-bottom: 1px solid #f1f5f9;
}
.jaf-stage-note-item:last-child {
     border-bottom: none;
}

.jaf-stage-note-badge {
     background: #eef4fb;
     color: var(--jaf-primary);
     font-size: 11px;
     font-weight: 700;
     padding: 3px 10px;
     border-radius: 20px;
     white-space: nowrap;
     flex-shrink: 0;
}
.jaf-stage-note-text {
     font-size: 13px;
     color: #374151;
     flex: 1;
     line-height: 1.5;
}
.jaf-stage-note-date {
     font-size: 11px;
     color: #94a3b8;
     white-space: nowrap;
}

/* ── Service status grid ── */
.jaf-svc-status-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
}
.jaf-svc-status-card {
     border: 1.5px solid #e2e8f0;
     border-radius: 10px;
     padding: 16px;
     background: #fff;
}
.jaf-svc-status-name {
     font-size: 14px;
     font-weight: 700;
     color: var(--jaf-primary);
     margin-bottom: 12px;
}
.jaf-svc-status-steps {
     display: flex;
     align-items: center;
}

/* Service step dot */
.jaf-svc-step {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4px;
}
.jaf-svc-dot {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     font-weight: 700;
     border: 1px solid #e2e8f0;
     background: #fff;
     color: #94a3b8;
}
.jaf-svc-step.done .jaf-svc-dot {
     background: var(--jaf-primary);
     border-color: var(--jaf-primary);
     color: #fff;
}
.jaf-svc-step.current .jaf-svc-dot {
     border-color: var(--jaf-primary);
     color: var(--jaf-primary);
     background: #eef4fb;
     animation: jaf-pulse 2s ease infinite;
}
.jaf-svc-step-label {
     font-size: 10px;
     font-weight: 600;
     color: #94a3b8;
     text-align: center;
}
.jaf-svc-step.done .jaf-svc-step-label,
.jaf-svc-step.current .jaf-svc-step-label {
     color: var(--jaf-primary);
}
.jaf-svc-line {
     flex: 1;
     height: 2px;
     background: #e2e8f0;
     min-width: 16px;
     margin-bottom: 16px;
}
.jaf-svc-line.done {
     background: var(--jaf-primary);
}

/* Last completed step — pulse */
.jaf-timeline-step.current.last-step .jaf-timeline-dot,
.jaf-svc-step.current.last-step .jaf-svc-dot {
     background: var(--jaf-primary);
     border-color: var(--jaf-primary);
     color: #fff;
     animation: none;
}

/* 
   RESPONSIVE
    */
@media (max-width: 768px) {
     #jaf-form-wrapper .jaf-payment-layout {
          grid-template-columns: 1fr;
     }
     #jaf-form-wrapper .jaf-step4-services-grid {
          grid-template-columns: 1fr 1fr;
     }
     #jaf-form-wrapper .jaf-col-4,
     #jaf-form-wrapper .jaf-col-3 {
          grid-template-columns: 1fr 1fr;
     }
     #jaf-form-wrapper .jaf-col-2 {
          grid-template-columns: 1fr;
     }
     #jaf-dashboard .jaf-services-grid {
          grid-template-columns: 1fr;
     }
     #jaf-dashboard .jaf-detail-grid {
          grid-template-columns: 1fr 1fr;
     }
     #jaf-form-wrapper .jaf-form-body {
          padding: 10px 14px 20px;
     }
     #jaf-form-wrapper .jaf-step-label {
          display: none;
     }
     #jaf-form-wrapper .jaf-step-title-row {
          flex-direction: column !important;
     }
     #jaf-form-wrapper .jaf-clear-form {
          position: static !important;
          margin-top: 10px !important;
     }
     #jaf-form-wrapper .jaf-payment-tab.active,
     #jaf-form-wrapper .jaf-payment-tab{
          width: 100%;
          max-width: none;
     }
     #jaf-form-wrapper .jaf-payment-tab img {
          max-width: 70%;
          max-height: 100%;
          object-fit: contain;
     }

     #jaf-form-wrapper .jaf-no-services img {
          max-width: 70%;
          max-height: 100%;
          object-fit: contain;
     }
}
@media (max-width: 520px) {
     #jaf-form-wrapper .jaf-col-4,
     #jaf-form-wrapper .jaf-col-3,
     #jaf-form-wrapper .jaf-col-2 {
          grid-template-columns: 1fr;
     }
     #jaf-form-wrapper .jaf-step4-services-grid {
          grid-template-columns: 1fr;
     }
     #jaf-dashboard .jaf-detail-grid {
          grid-template-columns: 1fr;
     }
     #jaf-form-wrapper .jaf-nav-buttons {
          flex-direction: column-reverse;
          gap: 10px;
     }
     #jaf-form-wrapper .jaf-btn,
     #jaf-dashboard .jaf-btn {
          width: 100%;
          justify-content: center;
     }
     #jaf-form-wrapper .jaf-payment-tabs {
          flex-direction: column;
     }
     #jaf-form-wrapper .jaf-price-badge {
          font-size: 11px;
          padding: 6px 10px 6px 20px;
     }
     .jaf-timeline-steps {
          gap: 4px;
     }
     .jaf-timeline-label {
          display: none;
     }
     .jaf-svc-status-grid {
          grid-template-columns: 1fr;
     }
}