/* ==========================================================================
   MyNextRing – Account Page Styles
   Farben werden ueber CSS Custom Properties gesteuert (injiziert aus DB).
   Breakdance nutzt .breakdance-woocommerce als Parent → wir brauchen
   mindestens gleiche Spezifitaet.
   ========================================================================== */

:root {
    --mnr-link-color: #141a20;
    --mnr-link-hover: #A67C4F;
    --mnr-button-bg: #141a20;
    --mnr-button-hover: #A67C4F;
    --mnr-tab-active: #A67C4F;
    --mnr-text-color: #374151;
}

/* --- Tabelle: vertikale Zentrierung --- */
.breakdance-woocommerce .woocommerce-orders-table td,
.breakdance-woocommerce .woocommerce-orders-table th,
.woocommerce-orders-table td,
.woocommerce-orders-table th {
    vertical-align: middle !important;
}

.breakdance-woocommerce .woocommerce-orders-table th,
.woocommerce-orders-table th {
    color: var(--mnr-text-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

/* --- Order-Links (Bestell-IDs) --- */
.breakdance-woocommerce .woocommerce-orders-table__cell-order-number a,
.woocommerce-orders-table__cell-order-number a {
    color: var(--mnr-link-color) !important;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}
.breakdance-woocommerce .woocommerce-orders-table__cell-order-number a:hover,
.woocommerce-orders-table__cell-order-number a:hover {
    color: var(--mnr-link-hover) !important;
    text-decoration: none;
}

/* --- Allgemeine Links im Account-Bereich --- */
.breakdance-woocommerce .woocommerce-MyAccount-content a:not([class]),
.woocommerce-MyAccount-content a:not([class]) {
    color: var(--mnr-link-color) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}
.breakdance-woocommerce .woocommerce-MyAccount-content a:not([class]):hover,
.woocommerce-MyAccount-content a:not([class]):hover {
    color: var(--mnr-link-hover) !important;
}

/* --- Buttons in Tabelle (Anzeigen, Bezahlen etc.) --- */
.breakdance-woocommerce .woocommerce-orders-table .woocommerce-button,
.breakdance-woocommerce .woocommerce-orders-table .button,
.breakdance-woocommerce .woocommerce-button.view,
.breakdance-woocommerce .woocommerce-button.pay,
.woocommerce-orders-table .woocommerce-button,
.woocommerce-orders-table .button {
    background-color: var(--mnr-button-bg) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: inline-block;
    line-height: 1.4;
}
.breakdance-woocommerce .woocommerce-orders-table .woocommerce-button:hover,
.breakdance-woocommerce .woocommerce-orders-table .button:hover,
.breakdance-woocommerce .woocommerce-button.view:hover,
.breakdance-woocommerce .woocommerce-button.pay:hover,
.woocommerce-orders-table .woocommerce-button:hover,
.woocommerce-orders-table .button:hover {
    background-color: var(--mnr-button-hover) !important;
    color: #fff !important;
}

/* --- Account-Navigation Tabs --- */
.breakdance-woocommerce .woocommerce-MyAccount-navigation ul,
.woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    border-bottom: 2px solid #e5e5e5;
}
.breakdance-woocommerce .woocommerce-MyAccount-navigation ul li,
.woocommerce-MyAccount-navigation ul li {
    margin: 0;
}
.breakdance-woocommerce .woocommerce-MyAccount-navigation ul li a,
.woocommerce-MyAccount-navigation ul li a {
    color: #6b7280;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    font-weight: 500;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}
.breakdance-woocommerce .woocommerce-MyAccount-navigation ul li.is-active a,
.breakdance-woocommerce .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--mnr-link-color) !important;
    border-bottom-color: var(--mnr-tab-active);
}

/* ==========================================================================
   View-Order Detail-Seite (Einzelbestellung)
   Breakdance setzt hier extrem kleine font-sizes.
   ========================================================================== */

/* Bestelldetail-Tabelle: Produktnamen, Mengen, Preise */
.breakdance-woocommerce .woocommerce-table--order-details td,
.breakdance-woocommerce .woocommerce-table--order-details th,
.woocommerce-table--order-details td,
.woocommerce-table--order-details th {
    font-size: 15px !important;
    padding: 14px 16px !important;
    vertical-align: middle !important;
}

/* Tabellen-Header (PRODUKT, GESAMTSUMME) */
.breakdance-woocommerce .woocommerce-table--order-details thead th,
.woocommerce-table--order-details thead th {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--mnr-text-color) !important;
    border-bottom: 2px solid #e5e7eb !important;
    padding: 12px 16px !important;
}

/* Produktname im Body */
.breakdance-woocommerce .woocommerce-table--order-details .product-name,
.woocommerce-table--order-details .product-name {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #141a20 !important;
}

/* Produktname-Link */
.breakdance-woocommerce .woocommerce-table--order-details .product-name a,
.woocommerce-table--order-details .product-name a {
    color: var(--mnr-link-color) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
.breakdance-woocommerce .woocommerce-table--order-details .product-name a:hover,
.woocommerce-table--order-details .product-name a:hover {
    color: var(--mnr-link-hover) !important;
}

/* Mengen-Angabe (x 1, x 2) */
.breakdance-woocommerce .woocommerce-table--order-details .product-quantity,
.woocommerce-table--order-details .product-quantity {
    font-weight: 400 !important;
    color: #6b7280 !important;
}

/* Preise in der Tabelle — NICHT zu fett */
.breakdance-woocommerce .woocommerce-table--order-details .woocommerce-Price-amount,
.woocommerce-table--order-details .woocommerce-Price-amount {
    font-weight: 500 !important;
    font-size: 15px !important;
    color: #141a20 !important;
}

/* Footer-Bereich (Zwischensumme, Rabatt, Versand, Gesamt) */
.breakdance-woocommerce .woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot th {
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #6b7280 !important;
}

.breakdance-woocommerce .woocommerce-table--order-details tfoot td,
.woocommerce-table--order-details tfoot td {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #141a20 !important;
}

/* Gesamt-Zeile etwas staerker hervorheben */
.breakdance-woocommerce .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child th {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #141a20 !important;
}

.breakdance-woocommerce .woocommerce-table--order-details tfoot tr:last-child td,
.woocommerce-table--order-details tfoot tr:last-child td {
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Rabatt-Zeile (negativer Betrag) */
.breakdance-woocommerce .woocommerce-table--order-details tfoot .discount td,
.woocommerce-table--order-details tfoot .discount td {
    color: #059669 !important;
}

/* Bestelldetail Ueberschriften (Bestelldetails, Rechnungsadresse etc.) */
.breakdance-woocommerce .woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #141a20 !important;
    margin: 32px 0 12px !important;
}

/* Erste h2 kein Abstand oben */
.breakdance-woocommerce .woocommerce-MyAccount-content h2:first-child,
.woocommerce-MyAccount-content h2:first-child {
    margin-top: 0 !important;
}

/* Adress-Bereiche (Rechnungs-/Versandadresse) */
.breakdance-woocommerce .woocommerce-MyAccount-content address,
.woocommerce-MyAccount-content address {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--mnr-text-color) !important;
    font-style: normal !important;
}

/* "PDF RECHNUNGEN" und andere Plugin-Headings */
.breakdance-woocommerce .woocommerce-MyAccount-content h3,
.woocommerce-MyAccount-content h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #141a20 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 28px 0 12px !important;
}

/* --- Status-Badges --- */
.breakdance-woocommerce .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__cell-order-status {
    font-size: 13px;
}

/* --- Responsive Tabelle/Tabs --- */
@media (max-width: 768px) {
    .breakdance-woocommerce .woocommerce-MyAccount-navigation ul,
    .woocommerce-MyAccount-navigation ul {
        flex-direction: column;
        border-bottom: none;
        border-left: 2px solid #e5e5e5;
    }
    .breakdance-woocommerce .woocommerce-MyAccount-navigation ul li a,
    .woocommerce-MyAccount-navigation ul li a {
        border-bottom: none;
        border-left: 2px solid transparent;
        margin-bottom: 0;
        margin-left: -2px;
        padding: 8px 16px;
    }
    .breakdance-woocommerce .woocommerce-MyAccount-navigation ul li.is-active a,
    .breakdance-woocommerce .woocommerce-MyAccount-navigation ul li a:hover,
    .woocommerce-MyAccount-navigation ul li.is-active a,
    .woocommerce-MyAccount-navigation ul li a:hover {
        border-bottom: none;
        border-left-color: var(--mnr-tab-active);
    }
}


/* ==========================================================================
   Smart Coupons – Premium Gutschein-Design
   Container: #generated_coupon_data_container (woocommerce_before_my_account)
   Jeder Gutschein: <details><summary>.sc-coupon</summary>...</details>
   SC-CSS nutzt #sc-cc als ID-Selektor → hohe Spezifitaet noetig.
   ========================================================================== */

/* --- Gutschein-Sektion Wrapper --- */
#generated_coupon_data_container {
    margin-top: 32px;
    padding: 32px !important;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

#generated_coupon_data_container > h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #141a20;
    margin: 0 0 4px !important;
}

#generated_coupon_data_container > p {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 20px;
}

/* SC-Inline-Styles ueberschreiben */
#generated_coupon_data_container .generated_coupon_data_wrapper .coupon-container {
    display: none !important;
}

/* --- "Mehr Details" Link --- */
#generated_coupon_data_container span.expand_collapse {
    display: none !important;
}

/* --- Gutschein-Grid (SC setzt flex via #sc-cc) --- */
#generated_coupon_data_container #sc-cc .sc-coupons-list,
#generated_coupon_data_container .sc-coupons-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    align-items: stretch !important;
}

/* --- Einzelne Gutschein-Karte (volle Breite, kein max-width) --- */
#generated_coupon_data_container #sc-cc .sc-coupon,
#generated_coupon_data_container .sc-coupon {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    background: linear-gradient(135deg, #141a20 0%, #1e2830 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    box-shadow: 0 4px 20px rgba(20, 26, 32, 0.18) !important;
}

#generated_coupon_data_container #sc-cc .sc-coupon:hover,
#generated_coupon_data_container .sc-coupon:hover {
    transform: translateY(-3px) scale(1.01) !important;
    box-shadow: 0 12px 36px rgba(20, 26, 32, 0.28) !important;
}

/* Dekorativer Gold-Streifen links */
#generated_coupon_data_container #sc-cc .sc-coupon::before,
#generated_coupon_data_container .sc-coupon::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 6px !important;
    background: linear-gradient(180deg, #A67C4F 0%, #DEC7B1 50%, #A67C4F 100%) !important;
    border-radius: 16px 0 0 16px !important;
    z-index: 2 !important;
}

/* Dezenter Gold-Kreis oben rechts */
#generated_coupon_data_container #sc-cc .sc-coupon::after,
#generated_coupon_data_container .sc-coupon::after {
    content: '' !important;
    position: absolute !important;
    top: -30px !important;
    right: -30px !important;
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    background: rgba(166, 124, 79, 0.07) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* --- Inner Content --- */
#generated_coupon_data_container #sc-cc .sc-coupon > div,
#generated_coupon_data_container .sc-coupon > div {
    width: 100% !important;
    padding: 28px 32px 28px 36px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Flex-Container Icon + Text */
#generated_coupon_data_container #sc-cc .sc-coupon .flex,
#generated_coupon_data_container .sc-coupon .flex {
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
}

/* --- Ticket-Icon gold --- */
#generated_coupon_data_container #sc-cc .sc-coupon svg,
#generated_coupon_data_container .sc-coupon svg {
    color: #A67C4F !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex-shrink: 0 !important;
    opacity: 0.9;
    margin-top: 2px;
}

/* --- Betrag + Typ-Label --- */
#generated_coupon_data_container #sc-cc .sc-coupon .text-sm,
#generated_coupon_data_container #sc-cc .sc-coupon .font-bold,
#generated_coupon_data_container .sc-coupon .text-sm,
#generated_coupon_data_container .sc-coupon .font-bold {
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
}

/* "Rabatt & Kostenloser Versand" Label */
#generated_coupon_data_container #sc-cc .sc-coupon .discount-label,
#generated_coupon_data_container .sc-coupon .discount-label {
    color: #A67C4F !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    margin-left: 10px !important;
    white-space: nowrap !important;
}

/* --- Coupon-Code (gross + gold) --- */
#generated_coupon_data_container #sc-cc .sc-coupon .font-mono,
#generated_coupon_data_container .sc-coupon .font-mono {
    color: #DEC7B1 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    background: rgba(166, 124, 79, 0.12) !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    display: inline-block !important;
    margin-top: 10px !important;
    word-break: break-all !important;
    filter: none !important;
}

/* Sub-Text Bereich */
#generated_coupon_data_container #sc-cc .sc-coupon .text-xs,
#generated_coupon_data_container .sc-coupon .text-xs {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 13px !important;
    filter: none !important;
}

/* Ablaufdatum */
#generated_coupon_data_container #sc-cc .sc-coupon .space-y-1 > div:last-child,
#generated_coupon_data_container .sc-coupon .space-y-1 > div:last-child {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 12px !important;
    margin-top: 8px !important;
    filter: none !important;
}

/* --- <details> Element Styling --- */
#generated_coupon_data_container details {
    width: 100%;
}

#generated_coupon_data_container details > summary {
    list-style: none !important;
    cursor: pointer;
}

#generated_coupon_data_container details > summary::-webkit-details-marker {
    display: none !important;
}

/* Details-Inhalt wenn aufgeklappt */
#generated_coupon_data_container details .generated_coupon_details {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 16px 24px;
    margin-top: -12px;
    font-size: 13px;
    color: #374151;
}

#generated_coupon_data_container details .generated_coupon_details p {
    margin: 4px 0 !important;
}

/* --- SC-Inline-Styles Reset (SC setzt colors via style-Attribut) --- */
#generated_coupon_data_container #sc-cc .sc-coupon[style],
#generated_coupon_data_container .sc-coupon[style] {
    color: #ffffff !important;
    background: linear-gradient(135deg, #141a20 0%, #1e2830 100%) !important;
    border-color: transparent !important;
}

/* SC "Deine Gutscheine" Abschnitt Headings */
#generated_coupon_data_container h4 {
    font-size: 16px;
    font-weight: 600;
    color: #141a20;
    margin: 20px 0 8px;
}

/* --- SC Endpoint-Seite (wc-smart-coupons Tab) --- */
#sc_coupons_list h4,
#coupons_list h4 {
    font-size: 18px;
    font-weight: 600;
    color: #141a20;
    margin: 24px 0 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
}

/* Total Store Credit Badge */
.wc_sc_total_available_store_credit {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #141a20 0%, #1e2830 100%);
    color: #DEC7B1 !important;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    margin-top: 16px;
}

.wc_sc_total_available_store_credit .woocommerce-Price-amount {
    color: #A67C4F !important;
    font-size: 20px;
    font-weight: 700;
}

/* Print Button */
.wc_sc_coupon_actions_wrapper .button {
    background: #141a20 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background-color 0.2s ease;
}
.wc_sc_coupon_actions_wrapper .button:hover {
    background: #A67C4F !important;
}

/* --- Responsive Gutschein --- */
@media (max-width: 600px) {
    #generated_coupon_data_container {
        padding: 20px !important;
    }

    #generated_coupon_data_container #sc-cc .sc-coupon > div,
    #generated_coupon_data_container .sc-coupon > div {
        padding: 20px 20px 20px 26px !important;
    }

    #generated_coupon_data_container #sc-cc .sc-coupon svg,
    #generated_coupon_data_container .sc-coupon svg {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
    }

    #generated_coupon_data_container #sc-cc .sc-coupon .text-sm,
    #generated_coupon_data_container #sc-cc .sc-coupon .font-bold,
    #generated_coupon_data_container .sc-coupon .text-sm,
    #generated_coupon_data_container .sc-coupon .font-bold {
        font-size: 18px !important;
    }

    #generated_coupon_data_container #sc-cc .sc-coupon .font-mono,
    #generated_coupon_data_container .sc-coupon .font-mono {
        font-size: 12px !important;
        letter-spacing: 0.5px !important;
    }

    #generated_coupon_data_container #sc-cc .sc-coupon .discount-label,
    #generated_coupon_data_container .sc-coupon .discount-label {
        display: block !important;
        margin-left: 0 !important;
        margin-top: 4px !important;
    }
}