/* ══════════════════════════════════════════════
   CrimsonTech Order Form — ctof.css
   All rules scoped under #ctof-app to prevent
   Divi (or any theme) from overriding styles.
══════════════════════════════════════════════ */

/* ── CSS CUSTOM PROPERTIES (scoped, not :root) ── */
#ctof-app {
    --ctof-crimson:       #b91c1c;
    --ctof-crimson-dark:  #991b1b;
    --ctof-crimson-light: #fef2f2;
    --ctof-gray-50:       #f9fafb;
    --ctof-gray-100:      #f3f4f6;
    --ctof-gray-200:      #e5e7eb;
    --ctof-gray-400:      #9ca3af;
    --ctof-gray-600:      #4b5563;
    --ctof-gray-800:      #1f2937;
    --ctof-radius:        8px;
    --ctof-shadow:        0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --ctof-shadow-md:     0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);

    font-family:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif !important;
    max-width:    900px !important;
    margin:       32px auto !important;
    color:        var(--ctof-gray-800) !important;
    line-height:  1.5 !important;
    box-sizing:   border-box !important;
    /* Explicit px base — prevents Divi's shrunken inherited font-size from scaling our rem/em values */
    font-size:    16px !important;
}

/* Box-sizing reset for all children */
#ctof-app *,
#ctof-app *::before,
#ctof-app *::after {
    box-sizing: border-box !important;
}

/* ── HEADER ── */
#ctof-app .ctof-header {
    display:       flex !important;
    align-items:   center !important;
    gap:           24px !important;
    background:    var(--ctof-crimson) !important;
    color:         #fff !important;
    padding:       28px 36px !important;
    border-radius: var(--ctof-radius) var(--ctof-radius) 0 0 !important;
    margin:        0 !important;
}

#ctof-app .ctof-logo-area {
    display:        flex !important;
    flex-direction: column !important;
    line-height:    1 !important;
    border-right:   1px solid rgba(255,255,255,.4) !important;
    border-bottom:  none !important;
    padding-right:  24px !important;
}

#ctof-app .ctof-brand {
    font-size:    24px !important;
    font-weight:    300 !important;
    letter-spacing: .1em !important;
    color:          #fff !important;
    margin:         0 !important;
    padding:        0 !important;
    line-height:    1 !important;
    display:        block !important;
}

#ctof-app .ctof-brand strong {
    font-weight: 800 !important;
    color:       #fff !important;
}

#ctof-app .ctof-brand-sub {
    font-size:    11px !important;
    letter-spacing: .3em !important;
    opacity:        .8 !important;
    margin-top:     2px !important;
    color:          #fff !important;
    display:        block !important;
}

#ctof-app .ctof-title-area h2 {
    margin:         0 !important;
    padding:        0 !important;
    font-size:    22px !important;
    font-weight:    700 !important;
    letter-spacing: .05em !important;
    color:          #fff !important;
    line-height:    1.2 !important;
    background:     none !important;
    border:         none !important;
    text-transform: none !important;
}

#ctof-app .ctof-title-area p {
    margin:    4px 0 0 !important;
    padding:   0 !important;
    font-size:    14px !important;
    opacity:   .85 !important;
    color:     #fff !important;
}

/* ── INTRO ── */
#ctof-app .ctof-intro {
    background:    var(--ctof-crimson-light) !important;
    border-left:   4px solid var(--ctof-crimson) !important;
    border-top:    none !important;
    border-right:  none !important;
    border-bottom: none !important;
    padding:       16px 24px !important;
    font-size:    14px !important;
    color:         var(--ctof-gray-600) !important;
    margin:        0 !important;
    line-height:   1.6 !important;
}

/* ── SECTIONS ── */
#ctof-app .ctof-section {
    background:  #fff !important;
    border:      1px solid var(--ctof-gray-200) !important;
    border-top:  none !important;
    padding:     28px 36px !important;
    margin:      0 !important;
}

#ctof-app .ctof-section:last-of-type {
    border-radius: 0 0 var(--ctof-radius) var(--ctof-radius) !important;
}

#ctof-app .ctof-section-title {
    font-size:    16px !important;
    font-weight:    700 !important;
    color:          var(--ctof-crimson) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    border-bottom:  2px solid var(--ctof-crimson-light) !important;
    border-top:     none !important;
    border-left:    none !important;
    border-right:   none !important;
    padding:        0 0 10px !important;
    margin:         0 0 20px !important;
    background:     none !important;
    line-height:    1.3 !important;
    display:        block !important;
}

#ctof-app .ctof-section-legal {
    background: var(--ctof-gray-50) !important;
}

#ctof-app .ctof-section-legal p {
    font-size:    14px !important;
    color:     var(--ctof-gray-600) !important;
    margin:    0 !important;
    padding:   0 !important;
}

#ctof-app .ctof-section-totals {
    background: var(--ctof-gray-50) !important;
}

/* ── GRID ── */
#ctof-app .ctof-grid-2 {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   20px !important;
}

/* ── FORM FIELDS ── */
#ctof-app .ctof-field {
    display:        flex !important;
    flex-direction: column !important;
    gap:            6px !important;
    margin-bottom:  16px !important;
    width:          100% !important;
}

#ctof-app .ctof-field:last-child {
    margin-bottom: 0 !important;
}

#ctof-app .ctof-field label {
    font-size:    14px !important;
    font-weight: 600 !important;
    color:       var(--ctof-gray-600) !important;
    display:     block !important;
    margin:      0 !important;
    padding:     0 !important;
    line-height: 1.4 !important;
    background:  none !important;
    float:       none !important;
    width:       auto !important;
    text-align:  left !important;
}

#ctof-app .ctof-field .req {
    color: var(--ctof-crimson) !important;
}

#ctof-app .ctof-field input[type="text"],
#ctof-app .ctof-field input[type="number"],
#ctof-app .ctof-field input[type="email"],
#ctof-app .ctof-field select,
#ctof-app .ctof-field textarea {
    border:             1px solid var(--ctof-gray-200) !important;
    border-radius:      6px !important;
    padding:            10px 14px !important;
    font-size:    15px !important;
    color:              var(--ctof-gray-800) !important;
    background:         #fff !important;
    transition:         border-color .2s, box-shadow .2s !important;
    width:              100% !important;
    margin:             0 !important;
    display:            block !important;
    line-height:        1.5 !important;
    height:             auto !important;
    box-shadow:         none !important;
    outline:            none !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
    font-family:        inherit !important;
}

#ctof-app .ctof-field select {
    -webkit-appearance: auto !important;
    appearance:         auto !important;
    cursor:             pointer !important;
}

#ctof-app .ctof-field input[type="text"]:focus,
#ctof-app .ctof-field input[type="number"]:focus,
#ctof-app .ctof-field select:focus,
#ctof-app .ctof-field textarea:focus {
    outline:      none !important;
    border-color: var(--ctof-crimson) !important;
    box-shadow:   0 0 0 3px rgba(185,28,28,.15) !important;
}

/* ── PLAN CARDS ── */
#ctof-app .ctof-plan-cards {
    display:               grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap:                   16px !important;
    margin:                0 !important;
    padding:               0 !important;
    list-style:            none !important;
}

#ctof-app .ctof-plan-card {
    border:         2px solid var(--ctof-gray-200) !important;
    border-radius:  var(--ctof-radius) !important;
    padding:        20px 16px !important;
    cursor:         pointer !important;
    transition:     border-color .2s, background .2s, transform .15s !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            6px !important;
    position:       relative !important;
    background:     #fff !important;
    margin:         0 !important;
    text-align:     left !important;
    float:          none !important;
}

#ctof-app .ctof-plan-card input[type="radio"] {
    position: absolute !important;
    opacity:  0 !important;
    width:    0 !important;
    height:   0 !important;
    margin:   0 !important;
    padding:  0 !important;
}

#ctof-app .ctof-plan-card:hover {
    border-color: var(--ctof-crimson) !important;
    background:   var(--ctof-crimson-light) !important;
}

#ctof-app .ctof-plan-card:has(input:checked) {
    border-color: var(--ctof-crimson) !important;
    background:   var(--ctof-crimson-light) !important;
    transform:    translateY(-2px) !important;
    box-shadow:   var(--ctof-shadow-md) !important;
}

#ctof-app .ctof-plan-name {
    font-weight: 700 !important;
    font-size:    16px !important;
    color:       var(--ctof-gray-800) !important;
    margin:      0 !important;
    padding:     0 !important;
    line-height: 1.3 !important;
}

#ctof-app .ctof-plan-price {
    font-size:    14px !important;
    color:       var(--ctof-crimson) !important;
    font-weight: 600 !important;
    margin:      0 !important;
    padding:     0 !important;
}

#ctof-app .ctof-plan-detail {
    font-size:    13px !important;
    color:     var(--ctof-gray-400) !important;
    margin:    0 !important;
    padding:   0 !important;
}

#ctof-app .ctof-plan-core .ctof-plan-name::before {
    content:      '●' !important;
    color:        #6b7280 !important;
    margin-right: 6px !important;
}
#ctof-app .ctof-plan-secure .ctof-plan-name::before {
    content:      '●' !important;
    color:        #2563eb !important;
    margin-right: 6px !important;
}
#ctof-app .ctof-plan-complete .ctof-plan-name::before {
    content:      '●' !important;
    color:        var(--ctof-crimson) !important;
    margin-right: 6px !important;
}

/* ── PRICING TABLES ── */
#ctof-app .ctof-table-wrap {
    overflow-x: auto !important;
    margin:     0 !important;
}

#ctof-app .ctof-pricing-table {
    width:           100% !important;
    border-collapse: collapse !important;
    font-size:    15px !important;
    border-spacing:  0 !important;
    margin:          0 !important;
    background:      transparent !important;
}

#ctof-app .ctof-pricing-table th {
    background:     var(--ctof-gray-100) !important;
    text-align:     left !important;
    padding:        10px 14px !important;
    font-size:    13px !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color:          var(--ctof-gray-600) !important;
    font-weight:    700 !important;
    border:         none !important;
    line-height:    1.4 !important;
    vertical-align: middle !important;
}

#ctof-app .ctof-pricing-table td {
    padding:        10px 14px !important;
    border-bottom:  1px solid var(--ctof-gray-100) !important;
    border-top:     none !important;
    border-left:    none !important;
    border-right:   none !important;
    vertical-align: middle !important;
    background:     transparent !important;
    color:          var(--ctof-gray-800) !important;
    font-size:    15px !important;
    line-height:    1.4 !important;
}

#ctof-app .ctof-pricing-table tfoot td {
    border-top:    2px solid var(--ctof-gray-200) !important;
    border-bottom: none !important;
    background:    var(--ctof-gray-50) !important;
}

#ctof-app .ctof-total-label {
    text-align:  right !important;
    font-weight: 600 !important;
    color:       var(--ctof-gray-600) !important;
}

#ctof-app .ctof-total-val {
    font-weight: 700 !important;
    color:       var(--ctof-crimson) !important;
}

#ctof-app .ctof-qty {
    width:              90px !important;
    text-align:         center !important;
    padding:            6px 10px !important;
    margin:             0 !important;
    border:             1px solid var(--ctof-gray-200) !important;
    border-radius:      6px !important;
    font-size:    15px !important;
    color:              var(--ctof-gray-800) !important;
    background:         #fff !important;
    display:            inline-block !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
    height:             auto !important;
    box-shadow:         none !important;
}

#ctof-app .ctof-qty:focus {
    outline:      none !important;
    border-color: var(--ctof-crimson) !important;
    box-shadow:   0 0 0 3px rgba(185,28,28,.15) !important;
}

/* ── TOGGLE CHECKBOX ── */
#ctof-app .ctof-toggle {
    display:     inline-flex !important;
    align-items: center !important;
    gap:         8px !important;
    cursor:      pointer !important;
    font-size:    14px !important;
    margin:      0 !important;
    padding:     0 !important;
    float:       none !important;
}

#ctof-app .ctof-toggle input[type="checkbox"] {
    width:        18px !important;
    height:       18px !important;
    accent-color: var(--ctof-crimson) !important;
    cursor:       pointer !important;
    margin:       0 !important;
    padding:      0 !important;
    flex-shrink:  0 !important;
    display:      inline-block !important;
}

#ctof-app .ctof-toggle span {
    color:       var(--ctof-gray-800) !important;
    font-size:    14px !important;
    line-height: 1 !important;
}

/* ── FINE PRINT ── */
#ctof-app .ctof-fine-print {
    margin-top:    14px !important;
    margin-bottom: 0 !important;
    font-size:    13px !important;
    color:         var(--ctof-gray-400) !important;
    font-style:    italic !important;
    line-height:   1.5 !important;
    padding:       0 !important;
}

/* ── TOTALS TABLE ── */
#ctof-app .ctof-totals-table {
    width:           100% !important;
    border-collapse: collapse !important;
    border-spacing:  0 !important;
    margin:          0 !important;
    background:      transparent !important;
}

#ctof-app .ctof-totals-table td {
    padding:        10px 14px !important;
    border-bottom:  1px solid var(--ctof-gray-100) !important;
    border-top:     none !important;
    border-left:    none !important;
    border-right:   none !important;
    vertical-align: middle !important;
    background:     transparent !important;
    line-height:    1.4 !important;
}

#ctof-app .ctof-totals-table td:first-child {
    color:     var(--ctof-gray-600) !important;
    font-size:    15px !important;
}

#ctof-app .ctof-totals-table td:last-child {
    text-align:  right !important;
    font-weight: 600 !important;
    width:       160px !important;
    color:       var(--ctof-gray-800) !important;
}

#ctof-app .ctof-negative {
    color: #059669 !important;
}

#ctof-app .ctof-grand-total td {
    background:  var(--ctof-crimson) !important;
    color:       #fff !important;
    font-size:    17px !important;
    font-weight: 700 !important;
    border:      none !important;
}

#ctof-app .ctof-grand-total td:first-child {
    border-radius: 4px 0 0 4px !important;
    color:         #fff !important;
}

#ctof-app .ctof-grand-total td:last-child {
    border-radius: 0 4px 4px 0 !important;
    color:         #fff !important;
}

/* ── ACCEPTANCE ── */
#ctof-app .ctof-acceptance {
    background:    var(--ctof-gray-50) !important;
    border-radius: var(--ctof-radius) !important;
    padding:       20px !important;
    border:        1px solid var(--ctof-gray-200) !important;
}

#ctof-app .ctof-acceptance p {
    font-size:    14px !important;
    color:       var(--ctof-gray-600) !important;
    margin:      0 0 12px !important;
    padding:     0 !important;
    line-height: 1.5 !important;
}

#ctof-app .ctof-checkbox-label {
    display:     flex !important;
    align-items: flex-start !important;
    gap:         10px !important;
    cursor:      pointer !important;
    font-size:    14px !important;
    font-weight: 600 !important;
    color:       var(--ctof-gray-800) !important;
    margin:      0 !important;
    padding:     0 !important;
    float:       none !important;
    width:       auto !important;
    line-height: 1.5 !important;
}

#ctof-app .ctof-checkbox-label input[type="checkbox"] {
    width:        18px !important;
    height:       18px !important;
    flex-shrink:  0 !important;
    margin:       2px 0 0 !important;
    padding:      0 !important;
    cursor:       pointer !important;
    accent-color: var(--ctof-crimson) !important;
    display:      inline-block !important;
}

/* ── MESSAGES ── */
#ctof-app #ctof-messages {
    margin:  16px 0 0 !important;
    padding: 0 !important;
}

#ctof-app #ctof-messages.ctof-error {
    background:    #fef2f2 !important;
    border:        1px solid #fca5a5 !important;
    color:         var(--ctof-crimson-dark) !important;
    padding:       14px 18px !important;
    border-radius: var(--ctof-radius) !important;
    font-size:    15px !important;
    margin:        16px 0 0 !important;
}

/* ── SUBMIT ROW ── */
#ctof-app .ctof-submit-row {
    padding:       28px 36px !important;
    background:    var(--ctof-gray-50) !important;
    border:        1px solid var(--ctof-gray-200) !important;
    border-top:    none !important;
    border-radius: 0 0 var(--ctof-radius) var(--ctof-radius) !important;
    text-align:    right !important;
    margin:        0 !important;
}

#ctof-app .ctof-btn-submit {
    background:         var(--ctof-crimson) !important;
    color:              #fff !important;
    border:             none !important;
    border-radius:      var(--ctof-radius) !important;
    padding:            14px 40px !important;
    font-size:    16px !important;
    font-weight:        700 !important;
    letter-spacing:     .03em !important;
    cursor:             pointer !important;
    transition:         background .2s, transform .15s, box-shadow .2s !important;
    box-shadow:         var(--ctof-shadow-md) !important;
    display:            inline-block !important;
    line-height:        1.5 !important;
    text-transform:     none !important;
    text-decoration:    none !important;
    margin:             0 !important;
    width:              auto !important;
    font-family:        inherit !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
}

#ctof-app .ctof-btn-submit:hover {
    background: var(--ctof-crimson-dark) !important;
    transform:  translateY(-1px) !important;
    box-shadow: 0 6px 12px rgba(185,28,28,.25) !important;
    color:      #fff !important;
}

#ctof-app .ctof-btn-submit:active {
    transform: translateY(0) !important;
}

#ctof-app .ctof-btn-submit:disabled {
    opacity:   .6 !important;
    cursor:    not-allowed !important;
    transform: none !important;
}

/* ── SUCCESS STATE ── */
#ctof-app .ctof-success-state {
    text-align:    center !important;
    padding:       60px 36px !important;
    background:    #fff !important;
    border:        1px solid var(--ctof-gray-200) !important;
    border-radius: var(--ctof-radius) !important;
    margin:        0 !important;
}

#ctof-app .ctof-success-icon {
    width:         72px !important;
    height:        72px !important;
    background:    #d1fae5 !important;
    color:         #059669 !important;
    border-radius: 50% !important;
    font-size:    35px !important;
    line-height:   72px !important;
    margin:        0 auto 20px !important;
    display:       block !important;
    text-align:    center !important;
}

#ctof-app .ctof-success-state h3 {
    font-size:    24px !important;
    color:       var(--ctof-gray-800) !important;
    margin:      0 0 12px !important;
    padding:     0 !important;
    background:  none !important;
    border:      none !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

#ctof-app .ctof-success-state p {
    color:   var(--ctof-gray-600) !important;
    margin:  0 0 8px !important;
    padding: 0 !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 650px) {
    #ctof-app .ctof-plan-cards {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    #ctof-app .ctof-grid-2 {
        grid-template-columns: 1fr !important;
    }
    #ctof-app .ctof-header {
        flex-direction: column !important;
        text-align:     center !important;
    }
    #ctof-app .ctof-logo-area {
        border-right:  none !important;
        border-bottom: 1px solid rgba(255,255,255,.4) !important;
        padding:       0 0 12px !important;
    }
    #ctof-app .ctof-section,
    #ctof-app .ctof-submit-row {
        padding: 20px 18px !important;
    }
}