/* Glas-Vorschau im Shop */
#glas-preview-wrapper {
    margin: 10px auto;
    max-width: 100%;
}

#glas-preview {
    position: relative;
    width: 420px;   /* slightly wider so the note fits on one line */
    height: 260px;  /* keep original height so it is not a square */
    margin: 0 auto;
    border: 1px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
}

#glas-rect {
    position: relative;
    background: rgba(22, 142, 234, 0.15);
    border: 2px solid #168eea;
    box-sizing: border-box;
    transition: width 0.2s ease, height 0.2s ease;
    min-width: 30px;
    min-height: 30px;
}

.dim-label {
    position: absolute;
    font-size: 11px;
    color: #333;
    background: rgba(255, 255, 255, 0.85);
    padding: 2px 4px;
    border-radius: 2px;
    white-space: nowrap;
}

.dim-label-top {
    /* outside above the rectangle */
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
}

.dim-label-right {
    /* outside to the right of the rectangle, text rotated vertically */
    top: 50%;
    right: -55px; /* push further outside so it never overlaps the rectangle */
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center center;
}

/* Polycarbonat-Vorschau im Shop (gleiche Optik wie Glas) */
#pc-preview-wrapper {
    margin: 10px auto;
    max-width: 100%;
}

#pc-preview {
    position: relative;
    width: 420px;
    height: 260px;
    margin: 0 auto;
    border: 1px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
}

#pc-rect {
    position: relative;
    background: rgba(22, 142, 234, 0.15);
    border: 2px solid #168eea;
    box-sizing: border-box;
    transition: width 0.2s ease, height 0.2s ease;
    min-width: 30px;
    min-height: 30px;
}

/* Align the three headings (Einstellungen / Vorschau / Abmessungen) on the same top line */
#shop-glas-config .services-grid h4 {
    margin-top: 0;
}

/* Remove global 50px top margin from the 3rd services-grid in this specific row */
#shop-glas-config .services-grid {
    margin-top: 0;
}

/* Make the caption below the preview smaller and aligned with the preview canvas */
#shop-glas-config p.sub_p {
    font-size: 11px;
    max-width: 420px;        /* match preview width so left edge aligns */
    margin: 5px auto 0 auto; /* center the block, text aligns left inside */
    text-align: left;
}

/* The same layout rules for the Polycarbonat-Konfigurator */
#shop-pc-config .services-grid h4 {
    margin-top: 0;
}

#shop-pc-config .services-grid {
    margin-top: 0;
}

#shop-pc-config p.sub_p {
    font-size: 11px;
    max-width: 420px;
    margin: 5px auto 0 auto;
    text-align: left;
}

.fa-input {
    font-family: "Font Awesome 5 Free", 'Istok Web', sans-serif;        
    font-weight: 600;
    font-size: 14px;
}

.cart-container h4 {
    margin-bottom: 15px;
}

/* Light blue background for price sections - applied to entire row */
.price-section-row {
    background: linear-gradient(to right, #ffffff, #f0f8ff);
    padding: 10px 15px;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 15px;
}

.cart-strip {
    background: #f2f2f2;
    padding-top: 50px;
    padding-bottom: 50px;
}

/* Invoice-style cart table + summary */
.invoice-table {
    font-size: 12px;
}
.invoice-summary {
    margin-top: 20px;
    max-width: 420px;
    margin-left: auto;
}
.invoice-summary table {
    width: 100%;
    font-size: 12px;
}
.invoice-summary td {
    padding: 3px 0;
}
.invoice-summary td.label {
    text-align: right;
    color: #555;
}
.invoice-summary td.value {
    text-align: right;
    font-weight: 600;
}
.invoice-summary tr.total-row td {
    border-top: 1px solid #ccc;
    font-size: 13px;
    padding-top: 6px;
}
.invoice-summary .shipping-note {
    font-size: 11px;
    color: #777;
    text-align: right;
    margin-top: 4px;
}

/* Cart totals + shipping breakdown side by side */
.cart-summary-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: 30px;
    margin-top: 20px;
}
.cart-summary-box {
    max-width: 320px;
    font-size: 12px;
}
.cart-summary-box .label {
    text-align: right;
    color: #555;
    padding-right: 6px;
}
.cart-summary-box .value {
    text-align: right;
    font-weight: 600;
}
.cart-summary-box.shipping-box {
    border-right: 1px solid #eee;
    padding-right: 10px;
}

.shipping-service-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 11px;
    border-top: 1px solid black;
}

.shipping-service-total .fa-stack {
    font-size: 14px;
}

/* ── Zubehör – Coming Soon ───────────────────────────────────────────────── */

.zubehoer-coming-soon {
    text-align: center;
    padding: 60px 20px 70px;
    max-width: 720px;
    margin: 0 auto;
}

.zubehoer-coming-soon-icon {
    font-size: 56px;
    color: #168eea;
    margin-bottom: 20px;
    opacity: 0.85;
}

.zubehoer-coming-soon-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}

.zubehoer-coming-soon-text {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 36px;
}

/* Four product-preview tiles */
.zubehoer-coming-soon-products {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.zubehoer-product-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: #f5faff;
    border: 1px solid #d0e8f8;
    border-radius: 8px;
    padding: 22px 24px;
    min-width: 130px;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.zubehoer-product-preview i {
    font-size: 28px;
    color: #168eea;
}

.zubehoer-product-preview:hover {
    box-shadow: 0 4px 14px rgba(22, 142, 234, 0.18);
    border-color: #168eea;
}

.zubehoer-coming-soon-cta-text {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 24px;
}

.zubehoer-contact-btn {
    padding: 12px 36px;
    font-size: 15px;
    border-radius: 4px;
}

/* ── End Zubehör Coming Soon ─────────────────────────────────────────────── */

/* Overlay shown while cart quantities are being updated via AJAX */
.cart-container {
    position: relative;
}

#cart-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    display: none; /* shown via JS */
    align-items: center;
    justify-content: center;
    z-index: 50;
}

#cart-loading-overlay .spinner {
    font-size: 32px;
    color: #555;
}