/**
 * Car Offer Form Styles
 * All styles are scoped to .cof-container to prevent theme conflicts
 */

/* CSS Reset & Isolation - Reset only what's necessary */
.cof-container,
.cof-container *,
.cof-container *::before,
.cof-container *::after {
    box-sizing: border-box !important;
}

/* Main container - isolated from theme styles */
.cof-container {
    display: block !important;
    font-family: var(--cof-body-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif) !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #333333 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
}

.cof-container > * {
    background: #FFFFFF !important;
    border-radius: 30px !important;
    padding: 22px 28px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 
                0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Tab Buttons - Scoped */
.cof-container .cof-tab-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
}

.cof-container .cof-tab-btn {
    flex: 1;
    padding: 16px 10px; /* Reduced side padding to fit text better */
    font-size: 14px; /* Slightly smaller to ensure fit */
    font-weight: 800; /* Bolder as per image */
    border: none;
    background: #F2F2F2; /* Light gray from image */
    color: var(--cof-brand-color, #D87A4E); /* Brand color for inactive text */
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px; /* Matching image rounded corners */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* Flex layout for icon + text */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    
    /* Cross-browser consistency */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: var(--cof-heading-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cof-container .cof-tab-btn.active {
    background: var(--cof-brand-color, #D87A4E);
    color: var(--cof-button-text-color, #FFFFFF);
}

.cof-container .cof-tab-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Button Width Modifier */
.cof-container .cof-btn-auto {
    width: auto !important;
    display: inline-block !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    float: none !important;
}

.cof-container .cof-btn-full {
    width: 100% !important;
    display: block !important;
    float: none !important;
    text-align: center !important;
}

/* Center align buttons container when auto width is used */
.cof-container .cof-form-group:has(.cof-btn-auto) {
    text-align: center;
}

/* Tab button with icons - Scoped */
.cof-container .cof-tab-btn svg {
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    width: 16px; /* Fixed size */
    height: 16px;
    flex-shrink: 0; /* Prevent icon shrinking */
    
    /* Make icon color match text color */
    fill: currentColor; 
    stroke: none;
}

/* For stroke-based icons */
.cof-container .cof-tab-btn svg[stroke] {
    fill: none;
    stroke: currentColor;
}

/* Select Loading State - Scoped */
.cof-container .cof-select-loading {
    position: relative;
}

.cof-container .cof-select-loading::after {
    content: '';
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #E8E8E8;
    border-top-color: var(--cof-brand-color, #D87A4E);
    border-radius: 50%;
    animation: cof-spin 0.6s linear infinite;
}

.cof-container .cof-select-loading select {
    opacity: 0.6;
    cursor: wait !important;
}

@keyframes cof-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* Tab Content - Scoped */
.cof-container .cof-tab-content {
    display: none;
}

.cof-container .cof-tab-content.active {
    display: block;
}

/* Form Sections - Scoped */
.cof-container .cof-form-section {
    display: none;
}

.cof-container .cof-form-section.active {
    display: block;
}

/* Form Groups - Scoped */
.cof-container .cof-form-group {
    margin-bottom: 20px;
    position: relative;
}

/* Field Labels - Above field style */
.cof-container .cof-field-label,
.cof-container label:not(.checkbox-label) {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #666666 !important;
    margin-bottom: 8px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-family: var(--cof-heading-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif) !important;
}

/* Inputs and Selects - Base styling with !important to override theme */
.cof-container input[type="text"],
.cof-container input[type="email"],
.cof-container input[type="tel"],
.cof-container input[type="number"],
.cof-container input[type="date"],
.cof-container textarea,
.cof-container select {
    width: 100% !important;
    height: 56px !important; /* Taller inputs */
    padding: 16px 20px !important;
    font-size: 16px !important;
    border: 1px solid #CCCCCC !important; /* Thinner gray border */
    border-radius: 10px !important; /* Match image rounded corners */
    background: white !important;
    background-color: white !important;
    color: #666666 !important; /* Gray text color */
    transition: all 0.3s ease !important;
    font-weight: 400 !important;
    
    /* Cross-browser consistency */
    font-family: var(--cof-body-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif) !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
    display: block !important;
    margin: 0 !important;
    
    /* Remove ALL default styles */
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.cof-container input:focus,
.cof-container textarea:focus,
.cof-container select:focus {
    border-color: var(--cof-brand-color, #D87A4E) !important;
    outline: none !important;
    box-shadow: none !important;
}

.cof-container input::placeholder,
.cof-container textarea::placeholder,
.cof-container select::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

/* Date input specific styling */
.cof-container input[type="date"] {
    position: relative !important;
    padding-right: 40px !important;
}

.cof-container input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute !important;
    right: 15px !important;
    cursor: pointer !important;
    opacity: 1 !important;
    filter: invert(0.4) !important;
}

/* Number input - hide spinners */
.cof-container input[type="number"]::-webkit-inner-spin-button,
.cof-container input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.cof-container input[type="number"] {
    -moz-appearance: textfield !important;
}

.cof-container input::placeholder,
.cof-container textarea::placeholder {
    color: #AAAAAA;
    font-weight: 400;
}

/* Focus states for inputs and selects - with !important to override theme */
.cof-container input:focus,
.cof-container textarea:focus,
.cof-container select:focus {
    outline: none !important;
    border-color: var(--cof-brand-color, #D87A4E) !important;
    box-shadow: 0 0 0 4px rgba(var(--cof-brand-rgb, 216, 122, 78), 0.1) !important;
}

/* Date picker calendar override */
.cof-container input[type="date"]::-webkit-datetime-edit,
.cof-container input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.cof-container input[type="date"]::-webkit-datetime-edit-text,
.cof-container input[type="date"]::-webkit-datetime-edit-month-field,
.cof-container input[type="date"]::-webkit-datetime-edit-day-field,
.cof-container input[type="date"]::-webkit-datetime-edit-year-field {
    padding: 0 !important;
    color: #333333 !important;
    font-size: 16px !important;
}

/* Select Dropdown Styling - Consolidated with !important */
.cof-container select {
    /* Remove ALL default browser styling */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* Custom dropdown arrow - visible in all browsers */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%23D87A4E'%3E%3Cpath d='M5 7l5 5 5-5H5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    background-size: 18px 18px !important;
    padding-right: 50px !important;
    cursor: pointer !important;
    
    /* Text color for placeholder state */
    color: #999999 !important;
    
    /* Ensure consistent rendering - match input field height */
    line-height: 1.5 !important;
    height: auto !important;
    min-height: auto !important;
}

/* When an option is selected, change text to dark */
.cof-container select:valid,
.cof-container select.has-value,
.cof-container select option:not(:first-child):checked {
    color: #333333;
}

/* Select options styling */
.cof-container select option {
    padding: 12px 16px;
    background: white;
    color: #333333;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
}

/* First option (placeholder) styling */
.cof-container select option:first-child {
    color: #999999;
}

/* Hide default arrow in IE */
.cof-container select::-ms-expand {
    display: none;
}

/* Firefox-specific fixes */
.cof-container select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #333333;
}

/* Safari/WebKit specific fixes */
@supports (-webkit-appearance: none) {
    .cof-container select {
        background-color: white;
    }
}

.cof-container textarea {
    min-height: 120px;
    resize: vertical;
}

/* Field Error Messages - Scoped */
.cof-container .cof-field-error {
    display: block;
    color: #ff4444;
    font-size: 13px;
    margin-top: 6px;
    padding: 8px 12px;
    background-color: #fff5f5;
    border-left: 3px solid #ff4444;
    border-radius: var(--cof-radius-checkboxes, 4px);
    animation: cofSlideDown 0.3s ease;
}

@keyframes cofSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* File Upload Styles - Scoped */
.cof-container .cof-file-upload-wrapper {
    width: 100%;
}

.cof-container .cof-file-drop-zone {
    position: relative;
    border: 3px dashed #D0D0D0;
    border-radius: var(--cof-radius-inputs, 16px);
    padding: 40px 20px;
    text-align: center;
    background: #FAFAFA;
    transition: all 0.3s ease;
    cursor: pointer;
}

.cof-container .cof-file-drop-zone:hover {
    border-color: var(--cof-brand-color, #D87A4E);
    background: #FFF5F0;
}

.cof-container .cof-file-drop-zone.dragover {
    border-color: var(--cof-brand-color, #D87A4E);
    background: #FFF5F0;
    border-style: solid;
    transform: scale(1.02);
}

.cof-container .cof-file-drop-icon {
    margin: 0 auto 20px;
    color: var(--cof-brand-color, #D87A4E);
    opacity: 0.6;
}

.cof-container .cof-file-drop-icon svg {
    stroke-width: 2;
}

.cof-container .cof-file-drop-text {
    color: #666;
}

.cof-container .cof-file-drop-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}

.cof-container .cof-file-drop-subtitle {
    font-size: 15px;
    color: #666;
    margin: 0 0 12px 0;
}

.cof-container .cof-file-drop-info {
    font-size: 13px;
    color: #999;
    margin: 0;
}

.cof-container .cof-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.cof-container .cof-file-preview-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.cof-container .cof-file-preview-item {
    position: relative;
    border-radius: var(--cof-radius-buttons, 10px);
    overflow: hidden;
    background: #F5F5F5;
    border: 2px solid #E5E5E5;
    aspect-ratio: 1;
}

.cof-container .cof-file-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cof-container .cof-file-preview-name {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: white;
    padding: 8px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cof-container .cof-file-upload-status {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.8);
    color: #ffa500;
    padding: 4px 8px;
    font-size: 11px;
    text-align: center;
    font-weight: 600;
}

.cof-container .cof-file-preview-item.uploaded .cof-file-upload-status {
    color: #28a745;
}

.cof-container .cof-file-preview-item.upload-error .cof-file-upload-status {
    color: #ff4444;
}

.cof-container .cof-file-remove-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 50% !important;
    background: rgba(255, 68, 68, 0.95) !important;
    color: white !important;
    border: 2px solid white !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    font-weight: bold !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
}

.cof-container .cof-file-remove-btn:hover {
    background: #dc2626 !important;
    transform: scale(1.1) !important;
}

.cof-container .cof-file-preview-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--cof-brand-color, #D87A4E);
}

.cof-container .cof-file-preview-error {
    padding: 12px;
    background: #FEE;
    border: 2px solid #F88;
    border-radius: var(--cof-radius-buttons, 10px);
    color: #C33;
    font-size: 13px;
    margin-top: 10px;
}

/* Primary Button - Scoped */
.cof-container .cof-btn-primary {
    display: inline-block;
    margin-top: 20px;
    float: right;
    padding: 16px 40px; /* Increased vertical padding */
    font-size: 18px; /* Slightly larger font */
    font-weight: 800; /* Extra bold */
    border: none;
    border-radius: var(--cof-radius-buttons, 10px);
    background: var(--cof-brand-color, #D87A4E);
    color: var(--cof-button-text-color, white);
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    
    /* Cross-browser button fixes */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: var(--cof-heading-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cof-container .cof-btn-primary:hover {
    filter: brightness(0.9);
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

.cof-container .cof-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Manual Entry Link / Edit Form Link - Scoped */
.cof-container .cof-manual-entry {
    display: inline-block;
    margin-top: 40px;
    color: var(--cof-brand-color, #D87A4E);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.cof-container .cof-manual-entry:hover {
    filter: brightness(0.9);
    text-decoration: underline;
}

/* Clear float after button - Scoped */
.cof-container .cof-form-group:after {
    content: "";
    display: table;
    clear: both;
}

/* Step Indicator - Scoped */
.cof-container .cof-step-indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    position: relative;
}

.cof-container .cof-step-indicator::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 15%;
    right: 15%;
    height: 2px;
    background: #ddd;
    z-index: 0;
}

.cof-container .cof-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 1;
    flex: 1;
}

.cof-container .cof-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ddd;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

.cof-container .cof-step.active .cof-step-circle {
    background: var(--cof-brand-color, #D87A4E);
    color: var(--cof-button-text-color, white);
}

.cof-container .cof-step.completed .cof-step-circle {
    background: var(--cof-brand-color, #D87A4E);
    color: var(--cof-button-text-color, white);
}

.cof-container .cof-step.completed .cof-step-circle::before {
    content: '✓';
}

.cof-container .cof-step-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

/* Section Title & Subtitle - Scoped to prevent theme conflicts */
.cof-container .cof-section-title,
.cof-container .section-title {
    font-size: 16px;
    font-weight: 700;
    margin-top: 15px;
    margin-bottom: 0;
    color: #333;
    font-family: var(--cof-heading-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);
}

.cof-container .cof-section-subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    text-align: center;
}

/* Question Groups (for radio/checkbox) - Scoped to prevent theme conflicts */
.cof-container .question-group {
    margin-bottom: 20px;
}

.cof-container .question-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    color: #333 !important;
    font-family: var(--cof-heading-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif) !important;
    line-height: 1.5 !important;
}

/* Button Groups - Scoped to prevent theme conflicts */
.cof-container .button-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

/* Option Buttons - Scoped to prevent theme conflicts */
.cof-container .option-btn {
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
    border: 2px solid #ddd;
    border-radius: var(--cof-radius-buttons, 10px);
    background: white;
    color: #333;
    cursor: pointer;
    transition: all 0.3s;
    
    /* Cross-browser consistency */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: var(--cof-heading-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cof-container .option-btn:hover {
    border-color: var(--cof-brand-color, #D87A4E);
    background: rgba(var(--cof-brand-rgb, 216, 122, 78), 0.05);
}

.cof-container .option-btn.selected {
    border-color: var(--cof-brand-color, #D87A4E);
    background: var(--cof-brand-color, #D87A4E);
    color: var(--cof-button-text-color, white);
}

/* Checkbox Group - Scoped to prevent theme conflicts */
.cof-container .checkbox-group {
    margin-bottom: 20px !important;
}

.cof-container .checkbox-group .question-title {
    width: 100% !important;
    margin-bottom: 16px !important;
}

.cof-container .checkbox-group .checkbox-options-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 16px 28px !important;
}

.cof-container .checkbox-label {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    margin: 0 !important;
    gap: 10px !important;
    font-family: var(--cof-body-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
}

.cof-container .checkbox-label input,
.cof-container input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 2px solid #D0D0D0 !important;
    border-radius: var(--cof-radius-checkboxes, 4px) !important;
    background: white !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.cof-container .checkbox-label input:checked,
.cof-container input[type="checkbox"]:checked {
    background: var(--cof-brand-color, #D87A4E) !important;
    border-color: var(--cof-brand-color, #D87A4E) !important;
}

.cof-container .checkbox-label input:checked::after,
.cof-container input[type="checkbox"]:checked::after {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: var(--cof-button-text-color, white) !important;
    font-size: 14px !important;
    font-weight: bold !important;
    line-height: 1 !important;
}

/* Radio buttons - Custom styling */
.cof-container input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 2px solid #D0D0D0 !important;
    border-radius: 50% !important;
    background: white !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.cof-container input[type="radio"]:checked {
    background: white !important;
    border-color: var(--cof-brand-color, #D87A4E) !important;
}

.cof-container input[type="radio"]:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: var(--cof-brand-color, #D87A4E) !important;
}

/* Navigation Buttons - Scoped */
.cof-container .cof-nav-buttons {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

.cof-container .cof-btn-back {
    flex: 1;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    border: 2px solid var(--cof-brand-color, #D87A4E);
    border-radius: var(--cof-radius-buttons, 10px);
    background: white;
    color: var(--cof-brand-color, #D87A4E);
    cursor: pointer;
    transition: all 0.3s;
    
    /* Cross-browser consistency */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: var(--cof-heading-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cof-container .cof-btn-back:hover {
    background: rgba(var(--cof-brand-rgb, 216, 122, 78), 0.05);
}

.cof-container .cof-btn-next {
    flex: 1;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: var(--cof-radius-buttons, 10px);
    background: var(--cof-brand-color, #D87A4E);
    color: var(--cof-button-text-color, white);
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 6px 16px rgba(var(--cof-brand-rgb, 216, 122, 78), 0.4);
    
    /* Cross-browser consistency */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: var(--cof-heading-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cof-container .cof-btn-next:hover {
    filter: brightness(0.9);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(var(--cof-brand-rgb, 216, 122, 78), 0.5);
}

.cof-container .cof-btn-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Loading Spinner - Scoped */
.cof-container .cof-loading {
    text-align: center;
    padding: 40px 20px;
}

.cof-container .cof-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--cof-brand-color, #D87A4E);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: cofSpin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes cofSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error Message - Scoped */
.cof-container .cof-error-message {
    background: #ff4444;
    color: white;
    padding: 12px 18px;
    border-radius: var(--cof-radius-buttons, 10px);
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 14px;
}

/* Success Message - Scoped */
.cof-container .cof-success-message {
    text-align: center;
    padding: 60px 20px;
}

.cof-container .cof-success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #4CAF50;
    color: white;
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
}

.cof-container .cof-success-message h2 {
    font-size: 32px;
    color: #333;
    margin-bottom: 15px;
}

.cof-container .cof-success-message p {
    font-size: 18px;
    color: #666;
}


/* Divider (OR) - Scoped */
.cof-container .cof-divider {
    position: relative;
    text-align: center;
    margin: 30px 0;
}

.cof-container .cof-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: #ddd;
}

.cof-container .cof-divider span {
    position: relative;
    background: #f5f5f5;
    padding: 0 20px;
    color: #999;
    font-size: 16px;
    font-weight: 600;
}

/* Responsive - Scoped */
@media (max-width: 768px) {
    .cof-container > * {
        padding: 30px 20px;
    }

    .cof-container .cof-tab-btn {
        font-size: 12px;
        padding: 12px 8px;
        letter-spacing: 0.5px;
    }
    
    .cof-container .cof-tab-btn svg {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }

    .cof-container .button-group {
        grid-template-columns: 1fr;
    }

    .cof-container .checkbox-group .checkbox-options-wrapper {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .cof-container .cof-nav-buttons {
        flex-direction: column;
    }

    .cof-container .cof-step-label {
        font-size: 14px;
    }

    .cof-container .cof-step-circle {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .cof-container .cof-step-indicator::before {
        top: 20px;
    }
}

/* Extra Small Devices (phones, less than 480px) */
@media (max-width: 480px) {
    .cof-container .cof-tab-btn {
        font-size: 10px;
        padding: 10px 6px;
        letter-spacing: 0.3px;
    }
    
    .cof-container .cof-tab-btn svg {
        width: 14px;
        height: 14px;
        margin-right: 3px;
        display: none; /* Hide icons on very small screens to save space */
    }
    
    .cof-container .cof-tab-buttons {
        gap: 6px;
    }
}