/* Minimal front-end styling */
.jof-public-wrap{max-width:720px;margin:24px auto;padding:0 14px;}
.jof-form-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px 16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.jof-title{margin:0 0 12px;font-size:18px}

/* FORCE VERTICAL STACKING */
.jof-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jof-field{display:flex;flex-direction:column;gap:6px; position: relative;}
.jof-field-wide{width: 100%;}

/* DARKER & BOLD LABELS WITH ICONS */
.jof-field label {
    color: #000000;    /* Pure Black */
    font-weight: 700;  /* Bold */
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;         /* Space between icon and text */
    line-height: 1.4;
}

/* Icons Styling */
.jof-field label i.fa {
    color: #333;       /* Dark grey icon */
    width: 20px;       /* Fixed width for alignment */
    text-align: center;
    font-size: 16px;
}

.jof-field input, .jof-field select {
    padding: 12px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    color: #000;
    width: 100%;
    box-sizing: border-box; /* Fix width issues */
}
.jof-field.has-error input, .jof-field.has-error select {
    border-color: #b32d2e;
    background-color: #fff8f8;
    outline: 0;
    box-shadow: 0 0 0 1px #b32d2e;
}
.jof-err{font-size:13px;color:#b32d2e;min-height:18px; font-weight: 600;}

/* PHONE VALIDATION STYLES (NEW) */
.jof-phone-check {
    position: absolute;
    right: 12px;
    top: 38px; /* Adjusts based on input height + label height */
    font-size: 18px;
    color: #008000; /* Green */
    display: none;
    pointer-events: none;
    z-index: 10;
}
.jof-valid-phone input {
    border-color: #008000 !important;
    box-shadow: 0 0 0 1px #008000 !important;
}
.jof-valid-phone .jof-phone-check {
    display: block;
}
.jof-phone-feedback {
    font-size: 12px;
    color: #b32d2e; /* Red text */
    font-weight: 600;
    margin-top: -4px;
    margin-bottom: 4px;
}

/* REQUIRED ASTERISK & NOTICE */
.jof-req {
    color: #cc0000; /* Bright Red for Asterisk */
    font-weight: bold;
    margin-left: 4px;
}
.jof-req-notice {
    font-size: 14px;
    color: #000;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* DARK RED SUBMIT BUTTON */
.jof-submit {
    margin-top: 14px;
    width: 100%;
    padding: 15px 15px;
    border: 0;
    border-radius: 6px;
    background: #8B0000; /* Dark Red */
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
    transition: background 0.2s;
}
.jof-submit:hover {
    background: #660000; /* Even Darker Red on Hover */
}
.jof-submit[disabled]{opacity:.7;cursor:not-allowed}

/* Mid-Form Action Container */
.jof-mid-action-btn {
    text-align: center;
    margin: 25px 0 15px;
}

.jof-msg{margin-top:10px;font-size:14px; font-weight: bold;}
.jof-msg.ok{color:#006400}
.jof-msg.bad{color:#8B0000}
.jof-hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden}
.jof-preview-banner{position:sticky;top:0;background:#fff3cd;color:#664d03;padding:10px 12px;border-bottom:1px solid #ffe69c;font-weight:700;z-index:9999}

.jof-radio-list{display:flex;flex-direction:column;gap:10px;padding:8px 0}
.jof-radio-item{display:flex;gap:10px;align-items:flex-start; font-size: 15px; font-weight: 500;}
.jof-radio-item input{margin-top:4px}
.jof-checkbox .jof-check{display:flex;gap:10px;align-items:flex-start; font-weight: 600;}
.jof-html{margin:10px 0}

/* CLEAN PRICE BOX (No Background/Borders) */
.jof-price-box {
    background: transparent;
    border: none;
    margin: 15px 0;
    padding: 5px 0;
    text-align: center;
}
.jof-price-total {
    font-weight: 900;
    font-size: 24px;
    color: #000; /* "Total:" is Black */
    margin-bottom: 6px;
    display: block;
}
.jof-total-price {
    color: #8B0000; /* Price Value is Dark Red */
}
.jof-price-breakdown{
  font-size:13px;
  color: #333;
  opacity: 1;
  line-height:1.4;
}
.jof-waybill-checkbox{ display:none; }

/* Order Bump Field (OTO) */
.jof-oto {
    background-color: #fffdd0;
    border: 3px dotted #000;
    padding: 15px;
    margin: 20px 0;
    color: #000;
}

/* Gate */
.jof-gate{max-width:720px;margin:20px auto 16px;padding:0 16px;font-family:inherit}
.jof-gate-warning{border:1px solid #f2c36b;background:#fff8e9;border-radius:8px;padding:14px 16px;margin:0 auto 16px;line-height:1.45}
.jof-gate-warning b,.jof-gate-warning strong{font-weight:700}
.jof-gate-warning ul{margin:10px 0 0 18px}
.jof-gate-ask{max-width:720px;margin:0 auto 14px;background:#f6f7f7;border:1px solid #e2e4e7;border-radius:8px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start}
.jof-gate-actions{max-width:720px;margin:0 auto 14px;display:flex;flex-direction:column;gap:12px}
.jof-btn{display:block;width:100%;padding:14px 14px;border-radius:6px;font-size:16px;cursor:pointer}
.jof-btn-primary{background:#8B0000;color:#fff;border:1px solid #8B0000}
.jof-btn-secondary{background:#fff;color:#8B0000;border:2px solid #8B0000}
.jof-gate-trust{max-width:720px;margin:0 auto 8px;background:#f6f7f7;border:1px solid #e2e4e7;border-radius:8px;padding:10px 12px}

/* Receipt */
.jof-receipt-wrap{max-width:720px;margin:18px auto;padding:0 16px;font-family:inherit}
.jof-receipt-greeting h2{margin:0 0 10px;font-size:22px;line-height:1.25}
.jof-post-order-note{background:#fff8e9;border:1px solid #f2c36b;border-radius:8px;padding:14px 16px;margin:14px 0 18px;font-size:15px;line-height:1.5}
.jof-receipt-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#f6f7f7;border:1px solid #e2e4e7;border-radius:8px;padding:10px 12px;margin:0 0 14px}
.jof-test-badge{margin-left:auto;background:#111;color:#fff;padding:4px 8px;border-radius:999px;font-size:12px}
.jof-receipt-error{max-width:720px;margin:18px auto;background:#fff1f1;border:1px solid #f1b1b1;border-radius:8px;padding:14px 16px}
.receipt-table{max-width:720px;margin:0 auto;border:1px solid #e2e4e7;border-radius:10px;overflow:hidden}
.receipt-header,.receipt-row{display:flex;align-items:stretch}
.receipt-header{background:#f2f4f7;font-weight:700}
.receipt-row{border-top:1px solid #e2e4e7;background:#fff}
.receipt-row.total{background:#fff9e6;font-weight:700}
.receipt-col{padding:12px 10px;flex:1}
.receipt-col.narrow{flex:0 0 48px;text-align:center}
.receipt-col.product-name{flex:2}
.receipt-sub{font-size:12px;color:#666}
.receipt-row.total .right{text-align:right}
.receipt-row.total .total-amt{font-size:16px;color:#d0021b}

/* --- FIXED: Radio and Checkbox Alignment --- */

/* Ensure the list stacks vertically but items stay left-aligned */
.jof-radio-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 0;
    align-items: flex-start; /* CRITICAL: Prevents centering */
}

/* Ensure the radio/checkbox and label stay on one line, left-aligned */
.jof-radio-item,
.jof-checkbox .jof-check {
    display: flex;
    flex-direction: row;    /* Force side-by-side */
    align-items: flex-start; /* Align to the top of the text */
    justify-content: flex-start; /* Stick to the left */
    gap: 12px;              /* Space between box and text */
    cursor: pointer;
    width: 100%;            /* Allow clicking the whole row */
    text-align: left;       /* Ensure text isn't centered */
}

/* Prevent the input from shrinking or moving */
.jof-radio-item input,
.jof-checkbox .jof-check input {
    margin: 4px 0 0 0;      /* Fine-tune vertical position with text */
    flex-shrink: 0;         /* Don't let the box get squashed */
    width: 18px;            /* Standard size */
    height: 18px;
}

/* Ensure labels inside items don't inherit global centering */
.jof-radio-item span,
.jof-checkbox .jof-check span {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #000;
}

/* ============================================
   JAMISAN ORDER FORM — GOLD/DARK THEME
   Activates only when .jof-theme-gold is present
   ============================================ */

.jof-theme-gold {
  --gold: #F5C518;
  --light-gold: #FFD700;
  --black: #0d0d0d;
  --dark: #111111;
  --dark-2: #1a1a1a;
  --border: #2a2000;
  --border-light: #3A2E00;
  --gray: #aaaaaa;
  --gray-dark: #888888;
  --white: #ffffff;
  --green: #22c55e;
  --red: #b32d2e;

  background: var(--black);
  color: var(--white);
}

.jof-theme-gold .jof-form-card { background: var(--dark); border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.jof-theme-gold .jof-title { color: var(--gold); }
.jof-theme-gold .jof-field label { color: var(--white); }
.jof-theme-gold .jof-field label i.fa { color: var(--gold); }
.jof-theme-gold .jof-field input,
.jof-theme-gold .jof-field select { border: 1px solid var(--border-light); color: var(--dark-2); background: var(--white); }
.jof-theme-gold .jof-field input::placeholder { color: var(--gray-dark); }
.jof-theme-gold .jof-field input:focus,
.jof-theme-gold .jof-field select:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245,197,24,0.2); }
.jof-theme-gold .jof-field select option { background: var(--dark-2); color: var(--white); }

/* BUG FIXED HERE: Duplicate class removed */
.jof-theme-gold .jof-field.has-error input,
.jof-theme-gold .jof-field.has-error select { background-color: #1a0a0a; }

.jof-theme-gold .jof-req-notice { color: var(--gray); border-bottom: 1px solid var(--border); }
.jof-theme-gold .jof-submit { background: var(--green); color: #fff; }
.jof-theme-gold .jof-preview-banner { background: #1a1400; color: var(--gold); border-bottom: 1px solid var(--border); }

/* Radio Lists & Checkboxes */
.jof-theme-gold .jof-radio-item,
.jof-theme-gold .jof-checkbox .jof-check { background: var(--dark-2); border: none; }
.jof-theme-gold .jof-radio-item:hover,
.jof-theme-gold .jof-checkbox .jof-check:hover { border-color: var(--gold); background: #1a1400; }
.jof-theme-gold .jof-radio-item input,
.jof-theme-gold .jof-checkbox .jof-check input { accent-color: var(--gold); background: var(--dark-2); border: 1px solid var(--border-light); }
.jof-theme-gold .jof-radio-item span,
.jof-theme-gold .jof-checkbox .jof-check span { color: var(--white); }

/* Pricing Boxes */
.jof-theme-gold .jof-price-box { background: #1a1400; border: 1px solid var(--border); }
.jof-theme-gold .jof-price-total { color: var(--gray); }
.jof-theme-gold .jof-total-price { color: var(--gold); }
.jof-theme-gold .jof-price-breakdown { color: var(--gray-dark); }

/* Order Bump */
.jof-theme-gold .jof-oto { background: #1a1400; border: 1px solid var(--border-light); color: var(--white); }

/* Receipt */
.jof-theme-gold .jof-receipt-wrap { color: var(--white); }
.jof-theme-gold .jof-receipt-greeting h2 { color: var(--gold); }
.jof-theme-gold .jof-post-order-note { background: #1a1400; border: 1px solid var(--border-light); color: var(--white); }
.jof-theme-gold .jof-receipt-meta { background: var(--dark-2); border: 1px solid var(--border-light); color: var(--gray); }
.jof-theme-gold .jof-test-badge { background: var(--gold); color: #000; }
.jof-theme-gold .receipt-header { background: #1a1400; color: var(--gold); }
.jof-theme-gold .receipt-row { border-top: 1px solid var(--border); background: var(--dark); color: var(--white); }
.jof-theme-gold .receipt-row.total { background: #1a1400; }
.jof-theme-gold .receipt-sub { color: var(--gray-dark); }
.jof-theme-gold .receipt-row.total .total-amt { color: var(--gold); }

/* ============================================
   JAMISAN ORDER FORM — GREEN/WHITE THEME
   Matches Temique Acne Gel landing page
   Activates only when .jof-theme-green is present
   ============================================ */
.jof-theme-green {
  --green: #1a5c3a;
  --green-light: #e8f5ee;
  --green-mid: #2d7a52;
  --gold: #c9952a;
  --gold-light: #fdf6e3;
  --red-cta: #c0392b;
  --red-cta-dark: #9b2921;
  --text: #1a1a1a;
  --text-muted: #555555;
  --border: #e0e0e0;
  --white: #ffffff;
  --off-white: #fafaf8;
  background: var(--off-white);
  color: var(--text);
}

/* ---- FORM CARD ---- */
.jof-theme-green .jof-form-card {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border-radius: 14px;
}

/* ---- TITLE ---- */
.jof-theme-green .jof-title {
  color: var(--green);
  font-family: 'Playfair Display', serif;
}

/* ---- LABELS ---- */
.jof-theme-green .jof-field label {
  color: var(--text);
}

.jof-theme-green .jof-field label i.fa {
  color: var(--green-mid);
}

/* ---- INPUTS & SELECTS ---- */
.jof-theme-green .jof-field input,
.jof-theme-green .jof-field select {
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--white);
  border-radius: 8px;
}

.jof-theme-green .jof-field input::placeholder {
  color: #aaaaaa;
}

.jof-theme-green .jof-field input:focus,
.jof-theme-green .jof-field select:focus {
  border-color: var(--green-mid);
  box-shadow: 0 0 0 2px rgba(45, 122, 82, 0.15);
  outline: none;
}

.jof-theme-green .jof-field select option {
  background: var(--white);
  color: var(--text);
}

/* ---- ERROR STATE ---- */
.jof-theme-green .jof-field.has-error input,
.jof-theme-green .jof-field.has-error select {
  border-color: var(--red-cta);
  background-color: #fff5f5;
}

/* ---- REQUIRED NOTICE ---- */
.jof-theme-green .jof-req-notice {
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

/* ---- SUBMIT BUTTON ---- */
.jof-theme-green .jof-submit {
  background: var(--red-cta);
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(192, 57, 43, 0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}

.jof-theme-green .jof-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(192, 57, 43, 0.35);
}

.jof-theme-green .jof-submit:active {
  transform: translateY(0);
}

/* ---- PREVIEW BANNER ---- */
.jof-theme-green .jof-preview-banner {
  background: var(--green-light);
  color: var(--green);
  border-bottom: 1px solid #c8e6d4;
}

/* ---- RADIO LISTS & CHECKBOXES ---- */
.jof-theme-green .jof-radio-item,
.jof-theme-green .jof-checkbox .jof-check {
  background: var(--white);
  border: none;
}

.jof-theme-green .jof-radio-item:hover,
.jof-theme-green .jof-checkbox .jof-check:hover {
  border-color: var(--green-mid);
  background: var(--green-light);
}

.jof-theme-green .jof-radio-item input,
.jof-theme-green .jof-checkbox .jof-check input {
  accent-color: var(--green);
  border: 1px solid var(--border);
}

.jof-theme-green .jof-radio-item span,
.jof-theme-green .jof-checkbox .jof-check span {
  color: var(--text);
}

/* ---- PRICING BOXES ---- */
.jof-theme-green .jof-price-box {
  background: var(--green-light);
  border: 1px solid #c8e6d4;
  border-radius: 10px;
}

.jof-theme-green .jof-price-total {
  color: var(--text-muted);
}

.jof-theme-green .jof-total-price {
  color: var(--green);
}

.jof-theme-green .jof-price-breakdown {
  color: var(--text-muted);
}

/* ---- ORDER BUMP ---- */
.jof-theme-green .jof-oto {
  background: var(--gold-light);
  border: 1px solid #e8d5a0;
  color: var(--text);
  border-radius: 10px;
}

/* ---- RECEIPT ---- */
.jof-theme-green .jof-receipt-wrap {
  color: var(--text);
}

.jof-theme-green .jof-receipt-greeting h2 {
  color: var(--green);
  font-family: 'Playfair Display', serif;
}

.jof-theme-green .jof-post-order-note {
  background: var(--green-light);
  border: 1px solid #c8e6d4;
  color: var(--text);
  border-radius: 10px;
}

.jof-theme-green .jof-receipt-meta {
  background: var(--off-white);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 10px;
}

.jof-theme-green .jof-test-badge {
  background: var(--green);
  color: #ffffff;
}

.jof-theme-green .receipt-header {
  background: var(--green);
  color: #ffffff;
  border-radius: 10px 10px 0 0;
}

.jof-theme-green .receipt-row {
  border-top: 1px solid var(--border);
  background: var(--white);
  color: var(--text);
}

.jof-theme-green .receipt-row.total {
  background: var(--green-light);
}

.jof-theme-green .receipt-sub {
  color: var(--text-muted);
}

.jof-theme-green .receipt-row.total .total-amt {
  color: var(--green);
}