/**
 * Tree-Ripe Recipe Submission Form
 *
 * EXACT COPY from approved prototype: recipe-form-concepts.html
 * WITH !important on ALL properties to override theme/plugin conflicts
 *
 * @version 2.0.1
 */

/* ===========================================
   CSS VARIABLES
   =========================================== */

.tr-recipe-page {
    --tr-green: #0F5E41;
    --tr-green-medium: #408469;
    --tr-green-light: #E8F4EB;
    --tr-white: #FFFFFF;
    --tr-black: #333333;
    --tr-shadow-sm: 0 2px 8px rgba(15, 94, 65, 0.08);
    --tr-shadow-md: 0 8px 24px rgba(15, 94, 65, 0.12);
    --tr-shadow-lg: 0 16px 48px rgba(15, 94, 65, 0.16);
    --tr-shadow-focus: 0 0 0 4px rgba(15, 94, 65, 0.15);
    --tr-radius: 12px;
    --tr-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --tr-font-headline: Georgia, "Times New Roman", serif;
    --tr-font-body: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ===========================================
   PAGE CONTAINER
   =========================================== */

.tr-recipe-page {
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: clamp(32px, 6vw, 64px) clamp(20px, 4vw, 40px) !important;
    font-family: var(--tr-font-body) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--tr-black) !important;
    background: var(--tr-white) !important;
    box-sizing: border-box !important;
}

.tr-recipe-page *,
.tr-recipe-page *::before,
.tr-recipe-page *::after {
    box-sizing: border-box !important;
}

/* ===========================================
   PAGE HEADER
   =========================================== */

.tr-recipe-header {
    text-align: center !important;
    margin-bottom: clamp(40px, 8vw, 64px) !important;
}

.tr-recipe-header-title {
    font-family: var(--tr-font-headline) !important;
    font-size: clamp(28px, 6vw, 40px) !important;
    font-weight: 600 !important;
    color: var(--tr-green) !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.tr-recipe-header-subtitle {
    font-family: var(--tr-font-body) !important;
    font-size: clamp(16px, 3vw, 18px) !important;
    font-weight: 400 !important;
    color: var(--tr-black) !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 1.6 !important;
}

/* ===========================================
   PROGRESS BAR
   =========================================== */

.tr-recipe-progress {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: clamp(40px, 8vw, 64px) !important;
    position: relative !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.tr-recipe-progress::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: rgba(15, 94, 65, 0.15) !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
}

.tr-recipe-progress::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    height: 2px !important;
    background: var(--tr-green) !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: var(--progress, 0%) !important;
}

.tr-recipe-progress-step {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--tr-white) !important;
    border: 2px solid rgba(15, 94, 65, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--tr-font-headline) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: rgba(15, 94, 65, 0.4) !important;
    position: relative !important;
    z-index: 3 !important;
    transition: var(--tr-transition) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.tr-recipe-progress-step:hover:not(.active):not(.completed) {
    border-color: rgba(15, 94, 65, 0.4) !important;
    color: rgba(15, 94, 65, 0.6) !important;
}

.tr-recipe-progress-step.active {
    background: var(--tr-green) !important;
    border-color: var(--tr-green) !important;
    color: var(--tr-white) !important;
    box-shadow: var(--tr-shadow-md) !important;
    transform: scale(1.1) !important;
}

.tr-recipe-progress-step.completed {
    background: var(--tr-green) !important;
    border-color: var(--tr-green) !important;
    color: var(--tr-white) !important;
}

.tr-recipe-progress-step.completed .tr-recipe-progress-number {
    display: none !important;
}

.tr-recipe-progress-step.completed::after {
    content: '\2713' !important;
    font-family: system-ui, sans-serif !important;
    font-size: 18px !important;
    color: var(--tr-white) !important;
}

.tr-recipe-progress-number {
    display: block !important;
    font-family: var(--tr-font-headline) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

.tr-recipe-progress-label {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-family: var(--tr-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: rgba(15, 94, 65, 0.5) !important;
    white-space: nowrap !important;
    transition: var(--tr-transition) !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tr-recipe-progress-step.active .tr-recipe-progress-label,
.tr-recipe-progress-step.completed .tr-recipe-progress-label {
    color: var(--tr-green) !important;
}

/* ===========================================
   FORM SECTIONS
   =========================================== */

.tr-recipe-form {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.tr-recipe-section {
    display: none !important;
    margin-bottom: clamp(40px, 8vw, 64px) !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.tr-recipe-section.active {
    display: block !important;
    animation: tr-slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes tr-slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tr-recipe-section-title {
    font-family: var(--tr-font-headline) !important;
    font-weight: 600 !important;
    color: var(--tr-green) !important;
    text-align: center !important;
    font-size: clamp(24px, 5vw, 32px) !important;
    margin: 0 0 1.5em 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.tr-recipe-section-label {
    font-family: var(--tr-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--tr-green) !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* ===========================================
   TWO COLUMN LAYOUT
   =========================================== */

.tr-recipe-two-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 500px) {
    .tr-recipe-two-col {
        grid-template-columns: 1fr !important;
    }
}

/* ===========================================
   FLOATING LABEL INPUTS
   =========================================== */

.tr-recipe-float-group {
    position: relative !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    background: transparent !important;
}

.tr-recipe-float-group input,
.tr-recipe-float-group select,
.tr-recipe-float-group textarea {
    width: 100% !important;
    padding: 20px 24px 8px !important;
    font-family: var(--tr-font-body) !important;
    font-size: 15px !important;
    color: var(--tr-black) !important;
    background: var(--tr-white) !important;
    border: 2px solid rgba(15, 94, 65, 0.15) !important;
    border-radius: 100px !important;
    outline: none !important;
    transition: var(--tr-transition) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    box-shadow: none !important;
    min-height: auto !important;
    height: auto !important;
}

.tr-recipe-float-group textarea {
    border-radius: 24px !important;
    min-height: 140px !important;
    padding: 24px !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}

.tr-recipe-float-group select {
    cursor: pointer !important;
    padding-right: 48px !important;
}

.tr-recipe-float-group input:hover,
.tr-recipe-float-group select:hover,
.tr-recipe-float-group textarea:hover {
    border-color: rgba(15, 94, 65, 0.3) !important;
}

.tr-recipe-float-group input:focus,
.tr-recipe-float-group select:focus,
.tr-recipe-float-group textarea:focus {
    border-color: var(--tr-green) !important;
    box-shadow: var(--tr-shadow-focus) !important;
}

.tr-recipe-float-group label {
    position: absolute !important;
    left: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: var(--tr-font-body) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: rgba(51, 51, 51, 0.6) !important;
    pointer-events: none !important;
    transition: var(--tr-transition) !important;
    background: var(--tr-white) !important;
    padding: 0 4px !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
}

.tr-recipe-float-group:has(textarea) label {
    top: 24px !important;
    transform: none !important;
}

.tr-recipe-float-group input:focus ~ label,
.tr-recipe-float-group input:not(:placeholder-shown) ~ label,
.tr-recipe-float-group select:focus ~ label,
.tr-recipe-float-group select.has-value ~ label,
.tr-recipe-float-group textarea:focus ~ label,
.tr-recipe-float-group textarea:not(:placeholder-shown) ~ label {
    top: 0 !important;
    transform: translateY(-50%) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--tr-green) !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
}

.tr-recipe-float-group:has(textarea) input:focus ~ label,
.tr-recipe-float-group:has(textarea) textarea:focus ~ label,
.tr-recipe-float-group:has(textarea) textarea:not(:placeholder-shown) ~ label {
    top: -8px !important;
    transform: none !important;
}

/* ===========================================
   FORM HINTS
   =========================================== */

.tr-recipe-hint {
    font-family: var(--tr-font-body) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: rgba(51, 51, 51, 0.6) !important;
    margin: 8px 0 20px 0 !important;
    padding: 0 0 0 24px !important;
    line-height: 1.5 !important;
}

/* ===========================================
   FRUIT/PRODUCT SELECTION (Card Grid)
   =========================================== */

.tr-recipe-fruits {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 24px 0 !important;
    padding: 4px !important;
    max-height: 360px !important;
    overflow-y: auto !important;
}

.tr-recipe-product-selection.error .tr-recipe-fruits {
    border: 2px solid #AF2D3A !important;
    border-radius: 18px !important;
    padding: 8px !important;
}

.tr-recipe-fruit {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px 12px !important;
    background: var(--tr-white) !important;
    border: 2px solid rgba(15, 94, 65, 0.1) !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    transition: var(--tr-transition) !important;
    margin: 0 !important;
}

.tr-recipe-fruit:hover {
    border-color: var(--tr-green-medium) !important;
    box-shadow: var(--tr-shadow-sm) !important;
}

.tr-recipe-fruit.selected {
    border-color: var(--tr-green) !important;
    background: var(--tr-green-light) !important;
    box-shadow: 0 0 0 1px var(--tr-green) !important;
}

.tr-recipe-fruit-photo {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: var(--tr-green-light) !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.tr-recipe-fruit-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

.tr-recipe-fruit-name {
    font-family: var(--tr-font-body) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--tr-black) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tr-recipe-fruit.selected .tr-recipe-fruit-name {
    color: var(--tr-green) !important;
}

.tr-recipe-fruit input {
    display: none !important;
}

.tr-recipe-no-products {
    padding: 32px !important;
    text-align: center !important;
    color: rgba(51, 51, 51, 0.6) !important;
    font-size: 14px !important;
    background: var(--tr-green-light) !important;
    border-radius: 16px !important;
    margin: 0 0 24px 0 !important;
}

/* ===========================================
   PHOTO UPLOAD
   =========================================== */

.tr-recipe-upload-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(32px, 6vw, 48px) 24px !important;
    background: var(--tr-white) !important;
    border: 2px dashed rgba(15, 94, 65, 0.25) !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: var(--tr-transition) !important;
    margin: 0 0 16px 0 !important;
}

.tr-recipe-upload-area:hover {
    border-color: var(--tr-green) !important;
    background: var(--tr-green-light) !important;
}

.tr-recipe-upload-area.dragging {
    border-color: var(--tr-green) !important;
    background: var(--tr-green-light) !important;
    border-style: solid !important;
}

.tr-recipe-upload-icon {
    color: var(--tr-green) !important;
    opacity: 0.6 !important;
    margin: 0 0 12px 0 !important;
}

.tr-recipe-upload-icon i {
    width: 48px !important;
    height: 48px !important;
}

.tr-recipe-upload-text {
    font-family: var(--tr-font-body) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--tr-black) !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
}

.tr-recipe-upload-hint {
    font-family: var(--tr-font-body) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: rgba(51, 51, 51, 0.5) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tr-recipe-photo-previews {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tr-recipe-photo-preview {
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    aspect-ratio: 1 !important;
}

.tr-recipe-photo-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.tr-recipe-photo-remove {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: none !important;
    border-radius: 50% !important;
    color: var(--tr-white) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    font-size: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tr-recipe-photo-preview:hover .tr-recipe-photo-remove {
    opacity: 1 !important;
}

.tr-recipe-photo-uploading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--tr-green-light) !important;
    aspect-ratio: 1 !important;
    border-radius: 12px !important;
}

.tr-recipe-photo-uploading::after {
    content: '' !important;
    width: 24px !important;
    height: 24px !important;
    border: 2px solid rgba(15, 94, 65, 0.2) !important;
    border-top-color: var(--tr-green) !important;
    border-radius: 50% !important;
    animation: tr-spin 0.8s linear infinite !important;
}

@keyframes tr-spin {
    to { transform: rotate(360deg); }
}

/* ===========================================
   NAVIGATION BUTTONS
   =========================================== */

.tr-recipe-nav {
    display: flex !important;
    gap: 12px !important;
    margin-top: clamp(32px, 6vw, 48px) !important;
    padding: 0 !important;
}

.tr-recipe-nav-btn {
    padding: 16px 28px !important;
    font-family: var(--tr-font-body) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    cursor: pointer !important;
    transition: var(--tr-transition) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 2px solid transparent !important;
    margin: 0 !important;
    box-shadow: none !important;
    min-height: auto !important;
    height: auto !important;
}

.tr-recipe-nav-btn:only-child {
    width: 100% !important;
}

.tr-recipe-nav-btn.back {
    background: var(--tr-white) !important;
    border-color: rgba(15, 94, 65, 0.2) !important;
    color: var(--tr-green) !important;
}

.tr-recipe-nav-btn.back:hover {
    border-color: var(--tr-green) !important;
    background: var(--tr-white) !important;
}

.tr-recipe-nav-btn.next {
    flex: 1 !important;
    background: var(--tr-green) !important;
    border-color: var(--tr-green) !important;
    color: var(--tr-white) !important;
    box-shadow: var(--tr-shadow-sm) !important;
}

.tr-recipe-nav-btn.next:hover {
    box-shadow: var(--tr-shadow-md) !important;
    transform: translateY(-1px) !important;
    background: var(--tr-green) !important;
}

.tr-recipe-nav-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.tr-recipe-nav-btn i {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

/* ===========================================
   REVIEW SECTION
   =========================================== */

.tr-recipe-review-card {
    background: var(--tr-white) !important;
    border: 2px solid var(--tr-green-light) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
}

.tr-recipe-review-image {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: var(--tr-green-light) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tr-recipe-review-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.tr-recipe-review-image-placeholder {
    color: rgba(15, 94, 65, 0.3) !important;
    font-family: var(--tr-font-body) !important;
    font-size: 14px !important;
}

.tr-recipe-review-content {
    padding: clamp(20px, 4vw, 32px) !important;
    margin: 0 !important;
}

.tr-recipe-review-title {
    font-family: var(--tr-font-headline) !important;
    font-size: clamp(22px, 4.5vw, 28px) !important;
    font-weight: 600 !important;
    color: var(--tr-green) !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

.tr-recipe-review-byline {
    font-family: var(--tr-font-body) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: rgba(51, 51, 51, 0.7) !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}

.tr-recipe-review-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin: 0 0 20px 0 !important;
    padding: 0 0 20px 0 !important;
    border-bottom: 1px solid var(--tr-green-light) !important;
}

.tr-recipe-review-meta-item {
    font-family: var(--tr-font-body) !important;
    font-size: 14px !important;
    color: rgba(51, 51, 51, 0.7) !important;
}

.tr-recipe-review-meta-item strong {
    color: var(--tr-black) !important;
    font-weight: 600 !important;
}

.tr-recipe-review-label {
    font-family: var(--tr-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--tr-green) !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

.tr-recipe-review-ingredients {
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}

.tr-recipe-review-ingredients ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tr-recipe-review-ingredients li {
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--tr-green-light) !important;
    font-family: var(--tr-font-body) !important;
    font-size: 15px !important;
    margin: 0 !important;
    color: var(--tr-black) !important;
}

.tr-recipe-review-ingredients li:last-child {
    border-bottom: none !important;
}

.tr-recipe-review-instructions {
    line-height: 1.8 !important;
    font-family: var(--tr-font-body) !important;
    font-size: 15px !important;
    color: var(--tr-black) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tr-recipe-review-instructions ol {
    margin: 0 !important;
    padding: 0 0 0 24px !important;
    list-style-position: outside !important;
}

.tr-recipe-review-instructions li {
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.tr-recipe-review-instructions li:last-child {
    border-bottom: none !important;
}

.tr-recipe-review-fruits {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 132px)) !important;
    gap: 12px !important;
    margin: 8px 0 0 0 !important;
    padding: 4px !important;
}

.tr-recipe-review-fruit-card {
    cursor: default !important;
}

/* ===========================================
   CONFIRMATION
   =========================================== */

.tr-recipe-confirmation {
    text-align: center !important;
    padding: 0 clamp(16px, 4vw, 32px) clamp(40px, 8vw, 64px) !important;
    animation: tr-slideUp 0.5s ease-out !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.tr-recipe-confirmation-icon {
    margin: 0 auto clamp(20px, 4vw, 28px) !important;
    width: clamp(64px, 12vw, 80px) !important;
    height: clamp(64px, 12vw, 80px) !important;
    background: var(--tr-green) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--tr-shadow-md) !important;
    padding: 0 !important;
}

.tr-recipe-confirmation-icon i {
    font-size: 36px !important;
    color: var(--tr-white) !important;
    line-height: 1 !important;
}

.tr-recipe-confirmation-title {
    font-family: var(--tr-font-headline) !important;
    font-size: clamp(26px, 5vw, 34px) !important;
    font-weight: 600 !important;
    color: var(--tr-green) !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

.tr-recipe-confirmation-text {
    font-family: var(--tr-font-body) !important;
    font-size: clamp(16px, 3vw, 18px) !important;
    font-weight: 400 !important;
    color: var(--tr-black) !important;
    line-height: 1.7 !important;
    max-width: 480px !important;
    margin: 0 auto 32px !important;
    padding: 0 !important;
}

.tr-recipe-confirmation .tr-recipe-nav-btn {
    pointer-events: auto !important;
    opacity: 1 !important;
}

/* ===========================================
   CHECKBOX / CONSENT
   =========================================== */

.tr-recipe-checkbox-group {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 24px 0 0 0 !important;
    padding: 20px 24px !important;
    background: var(--tr-green-light) !important;
    border-radius: 16px !important;
    border: none !important;
}

.tr-recipe-checkbox {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border: 2px solid rgba(15, 94, 65, 0.3) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    background: var(--tr-white) !important;
    position: relative !important;
    transition: var(--tr-transition) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tr-recipe-checkbox:checked {
    background: var(--tr-green) !important;
    border-color: var(--tr-green) !important;
}

.tr-recipe-checkbox:checked::after {
    content: '\2713' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: var(--tr-white) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

.tr-recipe-checkbox:focus {
    box-shadow: var(--tr-shadow-focus) !important;
}

.tr-recipe-checkbox-label {
    font-family: var(--tr-font-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--tr-black) !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===========================================
   ERROR STATES
   =========================================== */

.tr-recipe-float-group.error input,
.tr-recipe-float-group.error textarea {
    border-color: #AF2D3A !important;
}

.tr-recipe-float-group.error label {
    color: #AF2D3A !important;
}

.tr-recipe-error-message {
    font-family: var(--tr-font-body) !important;
    font-size: 13px !important;
    color: #AF2D3A !important;
    margin: 6px 0 0 0 !important;
    padding: 0 0 0 24px !important;
}

/* ===========================================
   NOTIFICATIONS
   =========================================== */

.tr-recipe-notification {
    padding: 14px 20px !important;
    border-radius: 12px !important;
    margin: 0 0 20px 0 !important;
    font-family: var(--tr-font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    animation: tr-slideDown 0.3s ease !important;
}

.tr-recipe-notification-error {
    background: #FEF2F2 !important;
    color: #AF2D3A !important;
    border: 1px solid #FECACA !important;
}

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

/* ===========================================
   LOADING STATE
   =========================================== */

.tr-recipe-form.loading {
    pointer-events: none !important;
    opacity: 0.6 !important;
}

.tr-recipe-nav-btn.next.loading::after {
    content: '' !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-top-color: var(--tr-white) !important;
    border-radius: 50% !important;
    animation: tr-spin 0.8s linear infinite !important;
    margin-left: 8px !important;
}

/* ===========================================
   ACCESSIBILITY
   =========================================== */

.tr-recipe-page *:focus-visible {
    outline: 3px solid rgba(15, 94, 65, 0.3) !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    .tr-recipe-section.active,
    .tr-recipe-progress::after,
    .tr-recipe-progress-step,
    .tr-recipe-float-group input,
    .tr-recipe-float-group select,
    .tr-recipe-float-group textarea,
    .tr-recipe-float-group label,
    .tr-recipe-nav-btn {
        animation: none !important;
        transition: none !important;
    }
}