/**
 * Howlform Document Pricing & Legal Verification Styles
 * Fully integrated with Fluent Forms Design System
 * Compact native field styling with strict flexbox containment
 */

/* ==========================================================================
   CONTAINER & WRAPPER CONTAINMENT
   Enforce intrinsic height and prevent stretching in Elementor / flex layouts
   ========================================================================== */

.fluentform,
.fluentform .frm-fluent-form,
.elementor-widget-shortcode .fluentform_wrapper,
.elementor-widget-shortcode .fluentform {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    align-self: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.fluentform .ff-el-group {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    align-self: auto !important;
    box-sizing: border-box !important;
}

.fluentform .ff-doc-pricing-group,
.howlform-document-pricing-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    align-self: auto !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    position: static !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-family: inherit;
    color: inherit;
}

/* Connect upload field and pricing total smoothly without excessive gaps */
.frm-fluent-form .ff-el-group:has(+ .howlform-document-pricing-container) {
    margin-bottom: 12px !important;
}

.frm-fluent-form .ff_submit_btn_wrapper {
    margin-top: 0 !important;
}

/* Inherit font and clean box-sizing on all inner elements */
.howlform-document-pricing-container * {
    box-sizing: border-box;
}

.howlform-document-pricing-container .ff-el-input--content {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   CARD & HEADING SUPPRESSION
   Remove outer card borders, icons, decorative headings, subtitles, and internal tiers
   ========================================================================== */

.howlform-document-pricing-container .ff-el-input--label,
.howlform-document-pricing-container .ff-doc-pricing-subtitle,
.howlform-status-initial,
.howlform-doc-card,
.howlform-doc-header,
.howlform-doc-icon,
.howlform-doc-title,
.howlform-doc-subtitle,
.howlform-tiers-grid,
.howlform-tier-badge,
.howlform-tier-badge-selected,
.howlform-tier-row {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ==========================================================================
   STATUS & VERIFICATION BOX
   ========================================================================== */

.howlform-doc-status-box {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13.5px;
    line-height: 1.4;
}

/* Subtle loading state */
.howlform-status-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ff-primary-color, #1a7efb);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 0;
}

.howlform-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(26, 126, 251, 0.25);
    border-top-color: var(--ff-primary-color, #1a7efb);
    border-radius: 50%;
    animation: howlform-spin 0.8s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

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

/* Status Badges */
.howlform-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.howlform-badge-verified {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.howlform-page-count-badge {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.howlform-file-pages-badge {
    background: #f1f5f9;
    color: #475569;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}

/* ==========================================================================
   VERIFICATION BREAKDOWN TABLE
   Extending Fluent Forms native table style
   ========================================================================== */

.howlform-breakdown-table {
    width: 100%;
    margin-top: 6px;
    margin-bottom: 6px;
    border: 1px solid #e2e8f0;
    border-collapse: collapse;
    font-size: 13px;
    background-color: transparent;
}

.howlform-breakdown-table th,
.howlform-breakdown-table td {
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    vertical-align: middle;
}

.howlform-breakdown-table thead th {
    background-color: #f8fafc;
    color: #334155;
    font-weight: 600;
    font-size: 12.5px;
    text-align: left;
}

.howlform-breakdown-table tfoot td {
    background-color: #fafbfc;
    font-size: 13px;
}

.howlform-breakdown-table .howlform-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
    color: inherit;
}

.howlform-fee-display {
    color: var(--ff-primary-color, #1a7efb);
    font-size: 15px;
    font-weight: 700;
}

/* Error state aligning with Fluent Forms native error */
.howlform-status-error {
    color: #f56c6c;
    font-size: 13px;
    margin-top: 6px;
    padding: 6px 10px;
    background: #fef0f0;
    border: 1px solid #fde2e2;
    border-radius: 4px;
}

/* ==========================================================================
   ADD-ONS & OPTIONAL SERVICES
   Native Fluent Forms Checkable styling
   ========================================================================== */

.howlform-addons-group {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.howlform-addon-item {
    margin-bottom: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.howlform-addon-item .ff-el-form-check-label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 13.5px;
    color: inherit;
    min-height: 22px;
}

.howlform-addon-item.ff-addon-pending .ff-el-form-check-label {
    cursor: not-allowed;
    opacity: 0.75;
}

.howlform-addon-item .ff-el-form-check-input {
    margin-top: 0;
    margin-right: 6px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--ff-primary-color, #1a7efb);
}

.howlform-addon-item .ff-el-form-check-input:disabled {
    cursor: not-allowed;
}

.branding-price-tag {
    font-size: 12px;
    color: inherit;
    opacity: 0.8;
}

.howlform-addon-description-text {
    font-size: 12px;
    line-height: 1.45;
    color: inherit;
    opacity: 0.8;
    margin-top: 3px;
    padding-left: 22px;
}

/* ==========================================================================
   TOTAL SUMMARY ROW: NATIVE FLUENT FORMS ORDER TOTAL STYLE
   Single-line, transparent background, subtle top divider, inherited typography
   ========================================================================== */

.howlform-total-summary {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    transition: all 0.15s ease-in-out;
}

.howlform-total-row {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.howlform-total-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: inherit !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.howlform-total-amount {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: inherit !important;
    text-align: left !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    margin-left: 0 !important;
}

/* Ensure hidden payment items and legacy wrappers remain completely invisible */
.ff-hidden-payment-wrapper,
.howlform-verified-payment-input,
.howlform-verified-doc-pricing-input {
    display: none !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   320px, 375px, 430px, 768px, 1024px, 1440px
   ========================================================================== */

/* Tablet & Smaller (<= 768px) */
@media (max-width: 768px) {
    .howlform-breakdown-table th,
    .howlform-breakdown-table td {
        padding: 5px 8px;
        font-size: 12.5px;
    }

    .howlform-breakdown-table .howlform-file-name {
        max-width: 180px;
    }

    .howlform-total-summary {
        margin-top: 6px !important;
        padding-top: 6px !important;
    }

    .howlform-total-label {
        font-size: 13.5px !important;
    }

    .howlform-total-amount {
        font-size: 15.5px !important;
    }
}

/* Mobile Large & Small (<= 480px: 320px, 375px, 430px) */
@media (max-width: 480px) {
    .howlform-breakdown-table {
        font-size: 12px;
    }

    .howlform-breakdown-table th,
    .howlform-breakdown-table td {
        padding: 5px 6px;
    }

    .howlform-breakdown-table .howlform-file-name {
        max-width: 130px;
        font-size: 11.5px;
    }

    .howlform-addon-item .ff-el-form-check-label {
        min-height: 44px; /* Accessible touch target */
        align-items: center;
    }

    .howlform-addon-item .ff-el-form-check-input {
        min-width: 18px;
        min-height: 18px;
    }

    .howlform-total-summary {
        margin-top: 6px !important;
        padding-top: 6px !important;
    }

    .howlform-total-row {
        display: inline-flex !important;
        flex-direction: row;
        justify-content: flex-start !important;
        align-items: baseline !important;
        gap: 6px !important;
    }

    .howlform-total-label {
        font-size: 13px !important;
    }

    .howlform-total-amount {
        font-size: 15px !important;
        margin-left: 0 !important;
        text-align: left !important;
    }
}

/* Ultra-Compact Mobile (320px) */
@media (max-width: 360px) {
    .howlform-breakdown-table .howlform-file-name {
        max-width: 100px;
    }

    .howlform-addon-description-text {
        padding-left: 0;
        margin-top: 4px;
    }
}