/**
 * CS Bestellungen — Public CSS
 *
 * Design folgt dem CS-Design-System (Navy #004285, Orange #F29100,
 * System-Font, 4/8/16/24-Raster). Alle Styles sind unter
 * .cs-orders-root gescoped → keine Kollisionen mit Theme-CSS.
 */

.cs-orders-root {
    --cso-primary: var(--awb-custom_color_1);
    --cso-primary-dark: var(--awb-color4);
    --cso-primary-light: #1A5A9E;
    --cso-primary-bg: rgba(0, 66, 133, 0.08);
    --cso-orange: #F29100;
    --cso-green: #B9CE00;
    --cso-cyan: #4CBECF;

    --cso-neutral-900: #1A1A2E;
    --cso-neutral-700: #3D3D56;
    --cso-neutral-500: #6B7280;
    --cso-neutral-300: #D1D5DB;
    --cso-neutral-100: #F3F4F6;
    --cso-white: #FFFFFF;

    --cso-error: #DC2626;
    --cso-warn: #F29100;
    --cso-ok: #7a8600;

    --cso-radius-sm: 6px;
    --cso-radius-md: 12px;
    --cso-radius-lg: 25px;

    /*--cso-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;*/

    /*font-family: var(--cso-font);*/
    color: var(--cso-neutral-900);
}

.cs-orders-root,
.cs-orders-root * {
    box-sizing: border-box;
}

/* ── Grid ─────────────────────────────────────────────────────────── */
.cs-orders-grid__title {
    font-size: 24px;
    font-weight: 600;
    color: var(--cso-primary);
    margin: 0 0 30px 0;
}
.cs-orders-grid__items {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(var(--cso-cols, 3), minmax(0, 1fr));
}
.cs-orders-grid--cols-1 .cs-orders-grid__items { --cso-cols: 1; }
.cs-orders-grid--cols-2 .cs-orders-grid__items { --cso-cols: 2; }
.cs-orders-grid--cols-3 .cs-orders-grid__items { --cso-cols: 3; }
.cs-orders-grid--cols-4 .cs-orders-grid__items { --cso-cols: 4; }
@media (max-width: 900px) {
    .cs-orders-grid__items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .cs-orders-grid__items { grid-template-columns: 1fr; }
}

/* ── Card ─────────────────────────────────────────────────────────── */
.cs-orders-card {
    background: var(--cso-white);
    border: 0px solid var(--cso-neutral-300);
    border-radius: var(--cso-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s ease;
}
.cs-orders-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.cs-orders-card__media {
    aspect-ratio: 4/3;
    background: var(--cso-neutral-100);
    overflow: hidden;
}
.cs-orders-card__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
/* No-Crop-Variante: Bild im Originalverhältnis, kein Beschnitt. */
.cs-orders-card--no-crop .cs-orders-card__media {
    aspect-ratio: auto;
    height: auto;
}
.cs-orders-card--no-crop .cs-orders-card__media img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.cs-orders-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.cs-orders-card__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--cso-primary);
    margin: 0;
    line-height: 1.3;
}
.cs-orders-card__desc {
    font-size: 18px;
    color: var(--cso-neutral-700);
    line-height: 1.5;
}
.cs-orders-card__desc p { margin: 0 0 8px 0; }
.cs-orders-card__desc p:last-child { margin-bottom: 0; }
.cs-orders-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: var(--cso-neutral-500);
}
.cs-orders-card__delivery {
    font-style: italic;
}
.cs-orders-card__unavailable {
    padding: 12px;
    background: var(--cso-neutral-100);
    border-radius: var(--cso-radius-md);
    text-align: center;
    color: var(--cso-neutral-500);
    font-size: 14px;
    font-style: italic;
}
.cs-orders-card__action {
    margin-top: auto;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Download (Bild-Overlay + Icon-Button rechts) ─────────────────── */
.cs-orders-card__media-link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: var(--cso-white);
    cursor: pointer;
}
.cs-orders-card__media-link img {
    transition: transform .2s ease, filter .2s ease;
}
.cs-orders-card__download-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 66, 133, 0.55);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.cs-orders-card__download-overlay svg {
    color: var(--cso-white);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
    transform: translateY(8px);
    transition: transform .2s ease;
}
.cs-orders-card__media-link:hover .cs-orders-card__download-overlay,
.cs-orders-card__media-link:focus-visible .cs-orders-card__download-overlay {
    opacity: 1;
}
.cs-orders-card__media-link:hover .cs-orders-card__download-overlay svg,
.cs-orders-card__media-link:focus-visible .cs-orders-card__download-overlay svg {
    transform: translateY(0);
}
.cs-orders-card__media-link:hover img {
    transform: scale(1.03);
    filter: brightness(.85);
}
.cs-orders-card__media-link:focus-visible {
    outline: 3px solid var(--cso-orange);
    outline-offset: -3px;
}

/* Download-Icon-Button rechts in der Action-Leiste — kein Linktext, nur Icon. */
.cs-orders-card__download {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 25px;
    background: var(--cso-primary);
    
    color: #FFFFFF;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    flex-shrink: 0;
}
.cs-orders-card__download:hover,
.cs-orders-card__download:focus-visible {
    background: var(--cso-primary-dark);
    border-color: var(--cso-primary-dark);
    color: var(--cso-white);
    text-decoration: none;
}
.cs-orders-card__download:focus-visible {
    outline: 2px solid var(--cso-orange);
    outline-offset: 2px;
}
.cs-orders-card__download svg {
    display: block;
}

/* ── Compact ──────────────────────────────────────────────────────── */
.cs-orders-compact-list__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--cso-primary);
    margin: 0 0 12px;
}
.cs-orders-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--cso-neutral-300);
    border-radius: var(--cso-radius-md);
    background: var(--cso-white);
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.cs-orders-compact__title {
    flex: 1;
    font-weight: 500;
    color: var(--cso-neutral-900);
    min-width: 0;
}
.cs-orders-compact__unavailable {
    font-size: 13px;
    color: var(--cso-neutral-500);
    font-style: italic;
}

/* ── Button-Gruppe ────────────────────────────────────────────────── */
.cs-orders-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Listing (Tabelle) ────────────────────────────────────────────── */
.cs-orders-listing__title {
    font-size: 22px;
    font-weight: 600;
    color: var(--cso-primary);
    margin: 0 0 16px 0;
}
.cs-orders-listing__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.cs-orders-listing__table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--cso-neutral-100);
    border-bottom: 2px solid var(--cso-neutral-300);
    font-weight: 600;
    color: var(--cso-neutral-700);
}
.cs-orders-listing__table td {
    padding: 12px;
    border-bottom: 1px solid var(--cso-neutral-100);
    vertical-align: middle;
}
.cs-orders-listing__desc {
    color: var(--cso-neutral-500);
    font-size: 13px;
    margin-top: 4px;
}
.cs-orders-listing__delivery {
    font-size: 12px;
    color: var(--cso-neutral-500);
    font-style: italic;
    margin-top: 4px;
}
.cs-orders-listing__unavailable {
    color: var(--cso-neutral-500);
    font-size: 13px;
    font-style: italic;
}

/* ── Menge ────────────────────────────────────────────────────────── */
.cs-orders-qty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--cso-white);
    border: 0 solid var(--cso-neutral-300);
    border-radius: var(--cso-radius-md);
    margin-bottom: 10px;
    padding: 2px;
}
.cs-orders-qty__btn {
    width: 32px; height: 32px;
    background: transparent;
    border: none;
    font-size: 18px;
    font-weight: 600;
    color: var(--cso-primary);
    cursor: pointer;
    border-radius: var(--cso-radius-sm);
    transition: background .15s;
}
.cs-orders-qty__btn:hover { background: var(--cso-primary-bg); }
.cs-orders-qty__input {
    width: 52px;
    padding: 6px 4px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--cso-neutral-900);
    font-family: inherit;
    -moz-appearance: textfield;
}
.cs-orders-qty__input::-webkit-outer-spin-button,
.cs-orders-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.cs-orders-qty__input:focus {
    outline: none;
    background: var(--cso-primary-bg);
}
.cs-orders-qty__unit {
    padding: 0 10px 0 4px;
    font-size: 13px;
    color: var(--cso-neutral-500);
}
.cs-orders-qty--sm .cs-orders-qty__btn { width: 26px; height: 26px; font-size: 16px; }
.cs-orders-qty--sm .cs-orders-qty__input { width: 99px; padding: 4px 2px; font-size: 13px; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.cs-orders-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    border-radius: var(--cso-radius-md);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 25px;
}
.cs-orders-btn--primary {
    background: var(--cso-primary);
    color: var(--cso-white);
}
.cs-orders-btn--primary:hover { background: var(--cso-primary-dark); }
.cs-orders-btn--primary:disabled {
    background: var(--cso-neutral-300);
    cursor: not-allowed;
}
.cs-orders-btn--secondary {
    background: var(--cso-white);
    color: var(--cso-neutral-700);
    border-color: var(--cso-neutral-300);
}
.cs-orders-btn--secondary:hover {
    background: var(--cso-neutral-100);
}
.cs-orders-btn--sm { padding: 6px 14px; font-size: 13px; }
.cs-orders-btn--lg { padding: 12px 28px; font-size: 16px; }

/* ── Badges ───────────────────────────────────────────────────────── */
.cs-orders-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.cs-orders-badge--warn  { background: rgba(242,145,0,.15); color: #b56d00; }
.cs-orders-badge--ok    { background: rgba(185,206,0,.15); color: var(--cso-ok); }
.cs-orders-badge--info  { background: rgba(76,190,207,.15); color: #2a8a98; }
.cs-orders-badge--muted { background: rgba(107,114,128,.12); color: var(--cso-neutral-500); }

/* ── Cart ─────────────────────────────────────────────────────────── */
.cs-orders-cart {
    max-width: 100%;
}
.cs-orders-cart__heading {
    font-size: 24px;
    color: var(--cso-primary);
    margin: 0 0 20px 0;
}
.cs-orders-cart__subheading {
    font-size: 18px;
    color: var(--cso-primary);
    margin: 32px 0 16px 0;
}
.cs-orders-cart__lines {
    background: var(--cso-white);
    border: 0px solid var(--cso-neutral-300);
    border-radius: var(--cso-radius-lg);
    overflow: hidden;
}
.cs-orders-cart__line {
    display: grid;
    grid-template-columns: 80px 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--cso-neutral-100);
}
.cs-orders-cart__line:last-child { border-bottom: none; }
.cs-orders-cart__thumb img {
    width: 80px; height: 80px; object-fit: cover;
    border-radius: var(--cso-radius-md);
    display: block;
}
.cs-orders-cart__info { min-width: 0; }
.cs-orders-cart__title {
    display: block;
    color: var(--cso-neutral-900);
    font-size: 15px;
    margin-bottom: 4px;
}
.cs-orders-cart__recipient {
    color: var(--cso-neutral-500);
    font-size: 12px;
}
.cs-orders-cart__remove {
    background: transparent;
    border: none;
    font-size: 22px;
    color: var(--cso-neutral-500);
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: var(--cso-radius-sm);
    line-height: 1;
}
.cs-orders-cart__remove:hover {
    background: rgba(220,38,38,.1);
    color: var(--cso-error);
}

.cs-orders-cart__address {
    display: grid;
    gap: 12px;
    max-width: 100%;
}
.cs-orders-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--cso-neutral-700);
    margin-bottom: 4px;
}
.cs-orders-field input,
.cs-orders-field textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--cso-neutral-300);
    border-radius: var(--cso-radius-md);
    font-size: 14px;
    color: var(--cso-neutral-900);
    background: var(--cso-white);
    font-family: inherit;
}
.cs-orders-field input:focus,
.cs-orders-field textarea:focus {
    outline: none;
    border-color: var(--cso-cyan);
    box-shadow: 0 0 0 2px rgba(76,190,207,.2);
}
.cs-orders-field--pair {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
}

.cs-orders-cart__actions {
    margin-top: 24px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}
.cs-orders-cart__hint {
    font-size: 12px;
    color: var(--cso-neutral-500);
}
.cs-orders-cart__feedback {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--cso-radius-md);
    font-size: 14px;
}
.cs-orders-cart__feedback.is-success { background: rgba(185,206,0,.10); color: var(--cso-ok); border-left: 3px solid var(--cso-green); }
.cs-orders-cart__feedback.is-error   { background: rgba(220,38,38,.08); color: #b91c1c; border-left: 3px solid var(--cso-error); }

.cs-orders-empty {
    padding: 40px 24px;
    text-align: center;
    background: var(--cso-white);
    border: 1px solid var(--cso-neutral-300);
    border-radius: var(--cso-radius-lg);
    color: var(--cso-neutral-500);
}
.cs-orders-empty p { margin: 0 0 12px 0; }

.cs-orders-cart__history-link {
    margin-top: 16px;
    font-size: 14px;
}
.cs-orders-cart__history-link a { color: var(--cso-primary); }

/* ── History ──────────────────────────────────────────────────────── */
.cs-orders-history__title {
    font-size: 22px;
    color: var(--cso-primary);
    margin: 0 0 16px 0;
}
.cs-orders-history__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--cso-white);
    border: 1px solid var(--cso-neutral-300);
    border-radius: var(--cso-radius-lg);
    overflow: hidden;
}
.cs-orders-history__table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--cso-neutral-100);
    font-weight: 600;
    color: var(--cso-neutral-700);
}
.cs-orders-history__table td {
    padding: 10px 12px;
    border-top: 1px solid var(--cso-neutral-100);
}

/* ── Sticky-Footer ────────────────────────────────────────────────── */
#cs-orders-sticky {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--cso-white);
    border-top: 0px solid var(--cso-neutral-300);
    box-shadow: 0 -4px 12px rgba(0,0,0,.05);
    z-index: 9999;
    animation: cso-slide-in .2s ease-out;
}
@keyframes cso-slide-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.cs-orders-sticky__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 20px;
}
.cs-orders-sticky__label {
    font-size: 14px;
    color: var(--cso-neutral-900);
}
.cs-orders-sticky__count {
    display: inline-block;
    background: var(--cso-primary);
    color: var(--cso-white);
    padding: 2px 10px;
    border-radius: 9999px;
    font-weight: 600;
    margin-right: 8px;
    font-size: 13px;
}
.cs-orders-sticky__cta {
    padding: 8px 18px;
    background: var(--cso-primary);
    color: var(--cso-white);
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: background .15s;
}
.cs-orders-sticky__cta:hover { background: var(--cso-primary-dark); color: var(--cso-white); }

/* ── Toast-Bubble bei Add-to-Cart ─────────────────────────────────── */
.cs-orders-toast {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background: var(--cso-primary);
    color: var(--cso-white);
    padding: 12px 20px;
    border-radius: var(--cso-radius-md);
    font-size: 14px;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    animation: cso-toast-in .25s ease-out;
}
@keyframes cso-toast-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Body-Padding wenn Sticky-Footer aktiv ──────────────────────────
 *
 * JS toggelt die Klasse cs-orders-has-sticky am <body>, sobald mindestens
 * ein Item im Cart liegt (siehe public.js → syncSticky()). Das Padding
 * stellt sicher, dass der Sticky-Footer keinen Seiten-Content ueberdeckt.
 * 80px deckt die Hoehe des Sticky-Footers (~58px) plus etwas Atemluft ab. */
body.cs-orders-has-sticky {
    padding-bottom: 69px;
}
@media (max-width: 600px) {
    /* Mobile: Sticky-Inner kann durch flex-wrap zweizeilig werden — mehr Reserve. */
    body.cs-orders-has-sticky {
        padding-bottom: 110px;
    }
}

/* ── Avada-Theme: Sticky-Footer-Inner an Site-Width binden ────────────
 *
 * Avada exponiert die Site-Width als CSS-Variable --site_width
 * (siehe Avada Customizer → Layout → Site Width). Wenn vorhanden,
 * weitet sich der Sticky-Footer-Inner exakt auf diese Breite,
 * sodass er buendig unter dem Seiteninhalt liegt — statt auf
 * 1200px gekappt. Fallback: 100% (volle Viewport-Breite). */
#cs-orders-sticky.cs-orders-sticky--avada .cs-orders-sticky__inner {
    max-width: var(--site_width, 100%);
}