/* ==============================================================
   1. GLOBAL – Schrift & Farben
   ============================================================== */
body,
button,
input,
select,
textarea {
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif !important;
    color: #003B5C;
}

/* ==============================================================
   2. CHECKOUT – Container, Hintergründe, Rahmen
   ============================================================== */
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-checkout .woocommerce-checkout-payment,
.woocommerce-checkout .woocommerce-checkout-form {
    background-color: #F7F7F7 !important;
    border: 1px solid #00AEEF !important;
    padding: 24px !important;
    margin-bottom: 32px !important;
    border-radius: 8px;
}

/* Entfernt WooCommerce-Lila */
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-checkout .woocommerce-checkout-payment {
    border-top: none !important;
    border-bottom: none !important;
}

/* ==============================================================
   3. CHECKOUT – Typografie & Felder
   ============================================================== */
.woocommerce-checkout .form-row label {
    color: #003B5C !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.woocommerce-checkout input,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    font-size: 15px !important;
    color: #003B5C !important;
    border-radius: 4px !important;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: #00AEEF !important;
    box-shadow: 0 0 0 1px #00AEEF !important;
}

.woocommerce-checkout .form-row {
    margin-bottom: 14px !important;
}

.woocommerce-checkout h3 {
    margin-bottom: 12px !important;
}

/* ==============================================================
   4. BUTTONS – CC24 Style
   ============================================================== */
.woocommerce-checkout .button,
.woocommerce-checkout .button.alt,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: #00AEEF !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px;
    padding: 12px 24px !important;
    font-weight: 600;
}

.woocommerce-checkout .button:hover,
.woocommerce-checkout .button.alt:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background-color: #003B5C !important;
}

/* ==============================================================
   5. WOOCOMMERCE – Info-/Fehlermeldungen & Tabellen
   ============================================================== */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-thankyou-order-received,
.woocommerce-checkout-review-order-table thead,
.woocommerce-checkout-payment .payment_box {
    background: #F7F7F7 !important;
    border-color: #00AEEF !important;
    color: #003B5C !important;
}

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
    border-left: 4px solid #00AEEF !important;
}

.woocommerce-checkout-review-order-table thead th {
    background: #E5E5E5 !important;
    color: #003B5C !important;
}

/* ==============================================================
   6. GUTSCHEIN – Desktop: dezent
   ============================================================== */
.woocommerce-info {
    font-size: 0.85em !important;
    opacity: 0.7 !important;
    padding: 10px 14px !important;
}

.woocommerce-form-coupon {
    font-size: 0.85em !important;
    opacity: 0.8 !important;
    padding: 12px !important;
    background: #F0F0F0 !important;
    border: 1px solid #00AEEF !important;
    border-radius: 6px !important;
}

.woocommerce-form-coupon input.input-text {
    font-size: 0.9em !important;
    padding: 8px !important;
}

.woocommerce-form-coupon .button {
    padding: 8px 16px !important;
    font-size: 0.85em !important;
}

/* ==============================================================
   7. MOBILE – Gutschein komplett ausblenden
   ============================================================== */
@media only screen and (max-width: 768px) {
  .woocommerce-form-coupon,
  .woocommerce-info {
    display: none !important;
  }
}

/* ==============================================================
   8. TRUST-ELEMENTE – Checkout (10 Icons)
   ============================================================== */

/* Wrapper */
.cc24-trust-wrapper {
    background: #F7F7F7;
    border: 1px solid #00AEEF;
    padding: 20px;
    margin-top: 24px;
    border-radius: 8px;
    display: block;
}

/* Einzel-Element */
.cc24-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
    color: #003B5C;
    font-size: 16px;
    line-height: 1.45;
}

.cc24-trust-item:last-child {
    margin-bottom: 0;
}

/* SVG-Icon */
.cc24-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-block;
}

/* MOBILE */
@media only screen and (max-width: 480px) {
    .cc24-trust-wrapper {
        padding: 16px;
    }
    .cc24-trust-item {
        font-size: 15px;
        gap: 12px;
    }
    .cc24-icon {
        width: 26px;
        height: 26px;
    }
}

/* ==============================================================
   8b. Entfernt ALLE doppelten WooCommerce/Enfold-Trust-Listen
   ============================================================== */

/* Entfernt zusätzliche Textblöcke direkt nach der Bestellübersicht */
.woocommerce-checkout-review-order .woocommerce-checkout-review-order-table + div {
    display: none !important;
}

/* Entfernt Enfold-eingeschobene Trust-/Info-Blöcke */
.woocommerce-checkout-review-order > div:not(.cc24-trust-wrapper):not(.woocommerce-checkout-review-order-table) {
    display: none !important;
}

/* ==============================================================
   8c. Fix: verhindert riesige SVG-Icons
   ============================================================== */

.cc24-icon {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}