/**
 * OGPSR Frontend Styles (My Account Hub)
 * Designed for a premium, clean aesthetic.
 */

.ogpsr-hub-container {
    margin: 20px 0;
    font-family: inherit;
}

.ogpsr-hub-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f1;
}

.ogpsr-hub-header h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: #1d2327;
}

.ogpsr-hub-header p {
    margin: 0;
    color: #64748b;
    font-size: 15px;
}

.ogpsr-hub-table-wrapper {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.ogpsr-hub-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 !important;
}

.ogpsr-hub-table thead th {
    background: #f8fafc;
    padding: 15px 20px;
    text-align: left;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
}

.ogpsr-hub-table tbody td {
    padding: 18px 20px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.ogpsr-hub-table tbody tr:last-child td {
    border-bottom: none;
}

.ogpsr-hub-table tbody tr:hover td {
    background-color: #fbfcfe;
}

.ogpsr-order-number {
    font-weight: 700;
    color: #1d2327;
}

.ogpsr-order-date {
    color: #64748b;
    font-size: 14px;
}

.ogpsr-order-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: capitalize;
    background: #f1f5f9;
    color: #475569;
}

.ogpsr-order-status--completed {
    background: #ecfdf5;
    color: #065f46;
}

.ogpsr-order-status--processing {
    background: #eff6ff;
    color: #1e40af;
}

.ogpsr-order-status--on-hold {
    background: #fffbeb;
    color: #92400e;
}

.ogpsr-order-status--pending {
    background: #fefce8;
    color: #854d0e;
}

.ogpsr-order-status--cancelled,
.ogpsr-order-status--failed {
    background: #fef2f2;
    color: #991b1b;
}

.ogpsr-order-status--refunded {
    background: #f3f4f6;
    color: #374151;
}

.ogpsr-actions-flex {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ogpsr-hub-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #334155;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    line-height: 1;
}

.ogpsr-hub-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #64748b;
}

.ogpsr-hub-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ogpsr-hub-btn:hover .dashicons {
    color: #2271b1;
}

/*! <fs_premium_only> */
/* XML Button Specifics (Pro Vibe) */
.ogpsr-btn-xml {
    border-color: #e2e8f0;
    background: #f8fafc;
}

/* Credit Note Button Specifics (Clean red/coral accent) */
.ogpsr-btn-credit-note {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.ogpsr-btn-credit-note .dashicons {
    color: #f87171;
}

.ogpsr-btn-credit-note:hover {
    background: #fee2e2;
    border-color: #f87171;
    color: #7f1d1d;
}

.ogpsr-btn-credit-note:hover .dashicons {
    color: #ef4444;
}

.ogpsr-btn-credit-note-xml {
    border-color: #e2e8f0;
    background: #fff8f8;
}

.ogpsr-btn-credit-note-xml:hover {
    border-color: #f87171;
    background: #fef2f2;
}

/* Peppol Network Status Customer Cell & Badges */
.ogpsr-hub-network-status-cell {
    vertical-align: middle;
}

.ogpsr-hub-status-empty {
    color: #94a3b8;
    font-weight: 500;
    display: inline-block;
    padding: 0 4px;
}

.ogpsr-hub-gw-status-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.ogpsr-hub-gw-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.ogpsr-hub-doc-label {
    font-weight: 600;
    color: #475569;
    font-size: 11px;
    letter-spacing: 0.02em;
}

.ogpsr-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

.ogpsr-status-badge .ogpsr-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.ogpsr-status-badge--success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.ogpsr-status-badge--success .ogpsr-status-dot {
    background: #10b981;
}

.ogpsr-status-badge--pending {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.ogpsr-status-badge--pending .ogpsr-status-dot {
    background: #f59e0b;
}

.ogpsr-status-badge--failed {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.ogpsr-status-badge--failed .ogpsr-status-dot {
    background: #ef4444;
}

.ogpsr-status-badge--unknown,
.ogpsr-status-badge--none {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.ogpsr-status-badge--unknown .ogpsr-status-dot,
.ogpsr-status-badge--none .ogpsr-status-dot {
    background: #94a3b8;
}

/* Tiny Sync Button for Customer Frontend */
.ogpsr-hub-gw-actions {
    margin-top: 2px;
}

.ogpsr-hub-sync-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    color: #64748b;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.ogpsr-hub-sync-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

.ogpsr-hub-sync-btn .dashicons {
    font-size: 13px;
    width: 13px;
    height: 13px;
    line-height: 13px;
    color: #64748b;
}

.ogpsr-hub-sync-btn:hover .dashicons {
    color: #2563eb;
}

.ogpsr-hub-sync-btn.ogpsr-is-syncing {
    pointer-events: none;
    opacity: 0.75;
    background: #f1f5f9;
}

@keyframes ogpsr-hub-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ogpsr-spin {
    animation: ogpsr-hub-spin 1s infinite linear;
    display: inline-block;
}
/*! </fs_premium_only> */

.ogpsr-hub-empty {
    padding: 40px;
    text-align: center;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px dashed #e2e8f0;
}

.ogpsr-hub-empty p {
    margin: 0;
    color: #64748b;
    font-style: italic;
}

/* Responsive Tweak */
@media (max-width: 600px) {
    .ogpsr-hub-table thead {
        display: none;
    }
    .ogpsr-hub-table tbody td {
        display: block;
        width: 100%;
        padding: 10px 20px;
        border: none;
        text-align: center;
    }
    .ogpsr-hub-table tbody tr {
        border-bottom: 1px solid #e2e8f0;
        padding: 15px 0;
        display: block;
    }
    .ogpsr-actions-flex {
        justify-content: center;
        margin-top: 10px;
    }
}

/*! <fs_premium_only> */
/* Dynamic Profile Routing Checkout Notice & Field Wrappers */
#ogpsr_dynamic_routing_container,
#ogpsr_buyer_trade_fields,
#ogpsr_buyer_jp_fields,
#ogpsr_buyer_aunz_fields,
#ogpsr_buyer_french_chorus_fields,
#ogpsr_buyer_reference_field {
    display: none;
}

#ogpsr_dynamic_routing_container {
    margin-bottom: 20px;
}

#ogpsr_dynamic_routing_container.ogpsr-hide-toggle {
    margin-bottom: 0;
}

.ogpsr-dynamic-routing-checkout-notice {
    background: #f0fdf4 !important;
    border-left: 4px solid #16a34a !important;
    padding: 12px 15px !important;
    margin-bottom: 12px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    color: #15803d !important;
    line-height: 1.5 !important;
}

/* EU VAT Reverse Charge field — hidden by default, revealed by JS. */
.ogpsr-eu-reverse-charge-wrap {
    display: none;
    margin-top: 10px;
}

/* Applied by ogpsr-checkout.js when the field should be visible. */
.ogpsr-eu-reverse-charge-wrap.ogpsr-rc-visible {
    display: block;
}

/* Suppress optional indicator from all Peppol / VAT / dynamic compliance checkout fields */
#ogpsr_vat_number_field label .optional,
#_vat_number_field label .optional,
#ogpsr_peppol_id_field label .optional,
#_peppol_id_field label .optional,
#ogpsr_buyer_reference_field label .optional,
#_buyer_reference_field label .optional,
#ogpsr_accounting_cost_field label .optional,
#ogpsr_buyer_trade_fields label .optional,
#ogpsr_buyer_jp_fields label .optional,
#ogpsr_buyer_aunz_fields label .optional,
#ogpsr_buyer_french_chorus_fields label .optional,
#ogpsr_buyer_my_fields label .optional,
.wc-block-components-checkout-step [data-field-id^="ogpsr/"] .optional,
.wc-block-components-checkout-step [data-field-id^="ogpsr/"] label .optional,
[data-field-id^="ogpsr/"] .wc-block-components-text-input__label .optional,
[data-field-id^="ogpsr/"] .optional {
    display: none !important;
}

/* ==========================================================================
   1. CHECKOUT FIELD INPUT WRAPPER — VERTICAL FLEX COLUMN ARCHITECTURE
   ==========================================================================
   Forces strict top-to-bottom vertical column stacking inside WooCommerce
   checkout form rows. This guarantees a clean 3-element vertical hierarchy:
     1. [order: 1] — The <input> / <select> / <textarea> field
     2. [order: 2] — Simple inline helper text (.ogpsr-field-hint)
     3. [order: 3] — Live format verification badge (#ogpsr_peppol_id_feedback)
   The repeated selectors (.woocommerce form, .woocommerce-checkout form, etc.)
   ensure complete theme agnosticism across themes with varying DOM wrappers.
   ========================================================================== */
.woocommerce form .form-row .woocommerce-input-wrapper,
.woocommerce-checkout form .form-row .woocommerce-input-wrapper,
.woocommerce-checkout .form-row .woocommerce-input-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: static !important;
    width: 100% !important;
}

.woocommerce form .form-row .woocommerce-input-wrapper > input,
.woocommerce form .form-row .woocommerce-input-wrapper > select,
.woocommerce form .form-row .woocommerce-input-wrapper > textarea,
.woocommerce-checkout .form-row .woocommerce-input-wrapper > input,
.woocommerce-checkout .form-row .woocommerce-input-wrapper > select,
.woocommerce-checkout .form-row .woocommerce-input-wrapper > textarea {
    order: 1 !important;
    width: 100% !important;
    position: static !important;
}

/* ==========================================================================
   2. ACTIVE SIMPLE TEXT HINT STYLING (.ogpsr-field-hint)
   ==========================================================================
   This is the primary container for field guidance text (e.g. mandatory XML
   reminders and localized Tax ID descriptions). It renders as clean, flat,
   unadorned text without boxes, borders, or speech bubbles.
   - Positioned strictly below the input [order: 2] and above verification [order: 3].
   - Toggled dynamically via JS on focus (slideDown) and blur (slideUp).
   - Entirely theme-agnostic because it avoids the theme-hijacked '.description' class.
   ========================================================================== */
.ogpsr-field-hint {
    display: none;
    order: 2 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #475569 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 2px 2px 2px !important;
    margin: 4px 0 2px 0 !important;
    position: static !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    text-shadow: none !important;
}

/* Ensure no speech-bubble arrows exist on any ogpsr hint elements */
.ogpsr-field-hint::before,
.ogpsr-field-hint::after {
    display: none !important;
    content: none !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ==========================================================================
   3. DEFENSIVE THEME RESET — SPEECH-BUBBLE & BLUE POPUP ERADICATION
   ==========================================================================
   Safety Net: WordPress themes (e.g. Twenty Twenty-Three, Twenty Twenty-Four,
   Storefront) ship with CSS targeting '.woocommerce-input-wrapper .description'
   to render it as a blue floating balloon with a '::before' triangle pointer.
   Even though our PHP filter converts our fields to '.ogpsr-field-hint', this
   rule defensively neutralizes any stray or cached '<span class="description">'
   by stripping all blue backgrounds, borders, boxes, and triangle arrows.
   ========================================================================== */
.woocommerce form .form-row .woocommerce-input-wrapper .description,
.woocommerce-checkout .form-row .woocommerce-input-wrapper .description,
.woocommerce-checkout .form-row .description,
.woocommerce form .form-row .description,
#ogpsr_peppol_id_field .description,
#ogpsr_vat_number_field .description,
#_peppol_id_field .description,
#_vat_number_field .description,
#_accounting_cost_field .description,
#ogpsr_accounting_cost_field .description {
    order: 2 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #475569 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    padding: 4px 2px 2px 2px !important;
    margin: 4px 0 2px 0 !important;
    border-radius: 0 !important;
    position: static !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-shadow: none !important;
}

/* Eradicate the obsolete floating speech-bubble arrow with maximum specificity */
.woocommerce form .form-row .woocommerce-input-wrapper .description::before,
.woocommerce form .form-row .woocommerce-input-wrapper .description::after,
.woocommerce-checkout .form-row .woocommerce-input-wrapper .description::before,
.woocommerce-checkout .form-row .woocommerce-input-wrapper .description::after,
.woocommerce form .form-row .description::before,
.woocommerce form .form-row .description::after,
.woocommerce-checkout .form-row .description::before,
.woocommerce-checkout .form-row .description::after,
#ogpsr_peppol_id_field .description::before,
#ogpsr_peppol_id_field .description::after,
#ogpsr_vat_number_field .description::before,
#ogpsr_vat_number_field .description::after {
    display: none !important;
    content: none !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
}

.woocommerce-checkout .form-row .woocommerce-input-wrapper .description a,
.woocommerce form .form-row .woocommerce-input-wrapper .description a,
.ogpsr-field-hint a {
    color: #0284c7 !important;
    text-decoration: underline !important;
}

/* E-Invoicing Compliance Opt-in Checkbox */
.ogpsr-e-invoicing-optin-wrapper {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-left: 4px solid #0284c7;
    padding: 14px 16px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-sizing: border-box;
}

.ogpsr-e-invoicing-optin-wrapper label.ogpsr-e-invoicing-optin-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 15px !important;
    color: #0f172a !important;
    cursor: pointer !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    position: static !important;
    line-height: 1.4 !important;
}

.ogpsr-e-invoicing-optin-wrapper input#ogpsr_e_invoicing_optin,
.ogpsr-e-invoicing-optin-wrapper input.input-checkbox,
.ogpsr-e-invoicing-optin-wrapper input[type="checkbox"] {
    position: static !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

.ogpsr-e-invoicing-optin-desc {
    margin: 0 !important;
    padding-left: 28px !important;
    font-size: 13px !important;
    color: #475569 !important;
    line-height: 1.4 !important;
}

/* Real-time Peppol ID format feedback - strictly ordered below input and guidance message */
.ogpsr-peppol-id-hint,
#ogpsr_peppol_id_feedback {
    order: 3 !important;
    position: static !important;
    clear: both !important;
    width: 100% !important;
    margin-top: 6px !important;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 6px;
    padding: 7px 12px;
    display: none;
    box-sizing: border-box;
}

.ogpsr-peppol-id-hint.ogpsr-hint-valid {
    color: #15803d;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    font-weight: 600;
}

.ogpsr-peppol-id-hint.ogpsr-hint-guidance {
    color: #0369a1;
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
    font-weight: 500;
}

.ogpsr-peppol-id-hint .ogpsr-check-icon {
    font-weight: 700;
    margin-right: 5px;
    color: #16a34a;
}

/* Defensive Floating Label & Placeholder Isolation for Gutenberg Blocks (Twenty Twenty-Five / FSE) */
.wc-block-components-text-input input:not(:focus)::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

.wc-block-components-text-input input:focus::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

/*! </fs_premium_only> */