/* ============================================
   DruckWerk Custom CSS
   ============================================ */

/* =============================================
   PRODUCT PAGE
   ============================================= */

.ph-item-attributes-box input[type="text"],
.ph-item-attributes-box textarea,
.ph-gift-box-form input[type="text"],
.ph-gift-box-form textarea {
    color: #fff !important;
    background-color: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    width: 100% !important;
}

.ph-item-attributes-box input[type="text"]::placeholder,
.ph-gift-box-form input[type="text"]::placeholder {
    color: rgba(255,255,255,0.5) !important;
}

.phTextAttributeInput {
    color: #ccc !important;
}

.ph-form-quantity label {
    color: #ddd !important;
    font-size: 15px !important;
}

.ph-form-quantity .ph-input-quantity {
    color: #fff !important;
    background-color: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    width: 60px !important;
    text-align: center !important;
    border-radius: 6px !important;
}

.ph-form-button .btn,
.ph-form-button button,
button.ph-btn {
    color: #fff !important;
    background: linear-gradient(135deg, #00c9a7, #a8e063) !important;
    border: none !important;
    padding: 12px 28px !important;
    border-radius: 30px !important;
    font-weight: bold !important;
    font-size: 16px !important;
    cursor: pointer !important;
}

.ph-form-button .btn:hover,
button.ph-btn:hover {
    opacity: 0.9 !important;
}

.ph-form-button .btn svg,
button.ph-btn svg {
    fill: #fff !important;
    margin-right: 8px !important;
    width: 18px !important;
    height: 18px !important;
}

.ph-item-add-to-cart-box {
    float: none !important;
    clear: both !important;
    margin-top: 20px !important;
}

.ph-form-quantity {
    display: inline-block !important;
    margin-right: 15px !important;
    vertical-align: middle !important;
}

.ph-form-button {
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Only hide EMPTY phItemHiddenAttribute divs - the JS appends color/image swatches into these divs! */
div[id^="phItemHiddenAttribute"]:empty {
    display: none;
    height: 0;
    overflow: hidden;
}

/* Phoca Cart Color Swatches - improved visibility */
.phSelectBoxButton {
    display: inline-block !important;
    width: 28px !important;
    height: 28px !important;
    margin: 4px !important;
    padding: 0 !important;
    border: 2px solid rgba(255,255,255,0.4) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    box-sizing: content-box !important;
    vertical-align: middle !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
    transition: all 0.15s ease !important;
}
.phSelectBoxButton:hover {
    transform: scale(1.1) !important;
    border-color: #fff !important;
}
.phSelectBoxButton.on {
    border: 2px solid #fff !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    box-shadow: 0 0 0 2px #00c9a7, 0 2px 6px rgba(0,0,0,0.4) !important;
}

/* Image swatches (type 3) */
.phSelectBoxImage {
    display: inline-block !important;
    margin: 4px !important;
    padding: 2px !important;
    border: 2px solid rgba(255,255,255,0.4) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
    transition: all 0.15s ease !important;
}
.phSelectBoxImage img {
    display: block !important;
    max-width: 60px !important;
    max-height: 60px !important;
    border-radius: 4px !important;
}
.phSelectBoxImage:hover {
    transform: scale(1.05) !important;
    border-color: #fff !important;
}
.phSelectBoxImage.on {
    border-color: #00c9a7 !important;
    box-shadow: 0 0 0 2px #00c9a7, 0 2px 6px rgba(0,0,0,0.4) !important;
}

/* Hide the original select that JS clips visually but might still take space */
div[id^="phItemBoxAttribute"].phjItem,
div[id^="phItemBoxAttribute"].phjCleanAttribute {
    position: absolute !important;
    clip: rect(0,0,0,0) !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.ph-item-stock-box,
.ph-item-stock-text,
.ph-stock-box,
div.ph-item-price-box-stock,
.ph-category-stock-box,
.ph-items-stock-box {
    display: none !important;
}


/* =============================================
   CHECKOUT / KASSE - Alles dunkel + helle Schrift
   ============================================= */

/* Gesamter Checkout View */
.pc-view.pc-checkout-view {
    color: #fff !important;
}

/* Warenkorb Tabelle Header */
.pc-checkout-view th,
.pc-checkout-view thead td {
    color: #fff !important;
    font-weight: bold !important;
    font-size: 15px !important;
}

/* Warenkorb Produkt-Name + Zellen */
.pc-checkout-view td,
.pc-checkout-view td a,
.pc-checkout-view .ph-checkout-cart-item-title,
.pc-checkout-view .ph-checkout-cart-item-title a {
    color: #fff !important;
    font-size: 15px !important;
}

/* Warenkorb Optionen-Liste */
.pc-checkout-view li,
.pc-checkout-view ul li {
    color: #ccc !important;
    font-size: 13px !important;
}

/* Preise */
.pc-checkout-view .ph-price,
.pc-checkout-view td:last-child {
    color: #fff !important;
    font-weight: bold !important;
}

/* Zwischensumme / Gesamtsumme */
.pc-checkout-view tfoot td,
.pc-checkout-view tfoot th,
.pc-checkout-view tr:last-child td {
    color: #fff !important;
    font-weight: bold !important;
    font-size: 16px !important;
}

/* Menge Input im Warenkorb */
.pc-checkout-view input.ph-input-quantity,
.pc-checkout-view input[type="text"] {
    color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 4px !important;
    width: 50px !important;
    text-align: center !important;
}


/* =============================================
   CHECKOUT - Formularbereiche DUNKEL
   ============================================= */

/* Checkout Boxen - dunkler Hintergrund, keine Rahmen */
.ph-checkout-box-login,
.ph-checkout-box-address,
.ph-checkout-box-shipping,
.ph-checkout-box-payment,
.ph-checkout-box-confirm,
[class*="ph-checkout-box-"] {
    background-color: transparent !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 15px !important;
}

/* Login Formular: Nicht inline, sondern gestapelt */
#ph-login-form.form-inline,
#ph-login-form .form-inline {
    display: block !important;
}

#ph-login-form .form-group {
    display: block !important;
    margin-bottom: 12px !important;
    width: 100% !important;
}

#ph-login-form .form-group .form-control,
#ph-login-form input[type="text"],
#ph-login-form input[type="password"] {
    display: block !important;
    width: 100% !important;
    max-width: 400px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
}

#ph-login-form .mod-login__remember {
    margin-bottom: 12px !important;
}

#ph-login-form .com-users-login__submit {
    display: block !important;
    margin-bottom: 12px !important;
    max-width: 400px !important;
}

#ph-login-form .btn.ph-btn {
    display: inline-block !important;
    margin-top: 5px !important;
}

/* Rechte Spalte Rahmen entfernen */
.ph-right-border {
    border-right: none !important;
}

.ph-left-border {
    border-left: none !important;
}

/* Checkout Box Header (Schritte 1,2,3,4) */
.ph-checkout-box-header,
.ph-checkout-box-header-pas,
[class*="ph-checkout-box-header"] {
    color: #fff !important;
    font-weight: bold !important;
    font-size: 18px !important;
    padding: 12px 15px !important;
}

[class*="ph-checkout-box-"] h3,
[class*="ph-checkout-box-"] h4,
[class*="ph-checkout-box-"] h5 {
    color: #fff !important;
}

/* Step Icons */
.ph-checkout-icon-spec-pending,
.ph-checkout-icon-spec-active,
.ph-checkout-icon-spec-completed {
    color: #fff !important;
}

/* Inhalt der Checkout Boxen */
.ph-checkout-box-action,
.ph-checkout-box-row {
    color: #fff !important;
}

[class*="ph-checkout-box-"] label,
[class*="ph-checkout-box-"] .control-label,
[class*="ph-checkout-box-"] p,
[class*="ph-checkout-box-"] span,
[class*="ph-checkout-box-"] div,
[class*="ph-checkout-box-"] td,
[class*="ph-checkout-box-"] th,
[class*="ph-checkout-box-"] li {
    color: #fff !important;
}

[class*="ph-checkout-box-"] a:not(.btn) {
    color: #7dcea0 !important;
}

/* ph-box-header */
[class*="ph-checkout-box-"] .ph-box-header,
.ph-box-header {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

/* Login Formular - dunkle Inputs mit heller Schrift */
[class*="ph-checkout-box-"] input[type="text"],
[class*="ph-checkout-box-"] input[type="email"],
[class*="ph-checkout-box-"] input[type="password"],
[class*="ph-checkout-box-"] input[type="tel"],
[class*="ph-checkout-box-"] select,
[class*="ph-checkout-box-"] textarea {
    color: #fff !important;
    background-color: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
}

[class*="ph-checkout-box-"] input::placeholder,
[class*="ph-checkout-box-"] textarea::placeholder {
    color: rgba(255,255,255,0.5) !important;
}

/* Joomla Login Module */
.mod-login label,
.mod-login .control-label,
#login-form label,
.mod-login__remember label {
    color: #fff !important;
}

#login-form input[type="text"],
#login-form input[type="password"],
.mod-login input[type="text"],
.mod-login input[type="password"] {
    color: #fff !important;
    background-color: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
}

/* Passkey Button */
.plg_system_webauthn_login_button {
    color: #fff !important;
    background-color: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
}

/* Checkout Buttons */
[class*="ph-checkout-box-"] .btn-primary,
[class*="ph-checkout-box-"] .btn-success,
[class*="ph-checkout-box-"] .btn-secondary {
    color: #fff !important;
}

/* Checkbox Labels */
[class*="ph-checkout-box-"] .form-check-label,
[class*="ph-checkout-box-"] .form-group label,
[class*="ph-checkout-box-"] .mod-login__remember label {
    color: #ccc !important;
}

/* Vergessen-Links */
.mod-login a,
[class*="ph-checkout-box-"] .mod-login a {
    color: #7dcea0 !important;
}

/* =============================================
   CHECKOUT - Formulare: Inputs breit + sichtbar
   ============================================= */

/* Alle PhocaCart Formulare im Checkout */
.pc-checkout-view .form-horizontal,
.pc-checkout-view .form-validate,
.pc-checkout-view form {
    width: 100% !important;
}

/* Control Groups (Label + Input Paare) */
.pc-checkout-view .control-group,
.pc-checkout-view .form-group {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    gap: 8px !important;
}

/* Labels in Formularen */
.pc-checkout-view .control-group label,
.pc-checkout-view .control-group .control-label,
.pc-checkout-view .form-group label,
.pc-checkout-view .control-label {
    color: #fff !important;
    min-width: 120px !important;
    flex: 0 0 140px !important;
    font-size: 14px !important;
}

/* Alle Input-Felder im Checkout breit machen */
.pc-checkout-view .form-control,
.pc-checkout-view input[type="text"],
.pc-checkout-view input[type="email"],
.pc-checkout-view input[type="password"],
.pc-checkout-view input[type="tel"],
.pc-checkout-view input[type="number"],
.pc-checkout-view select,
.pc-checkout-view textarea {
    color: #fff !important;
    background-color: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    flex: 1 1 200px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
}

.pc-checkout-view input::placeholder,
.pc-checkout-view textarea::placeholder {
    color: rgba(255,255,255,0.5) !important;
}

/* Select-Dropdowns */
.pc-checkout-view select {
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

.pc-checkout-view select option {
    background-color: #1a1a1a !important;
    color: #fff !important;
}

/* Billing/Shipping Spalten */
.ph-checkout-billing-row,
.ph-checkout-shipping-row {
    padding: 15px !important;
}

/* Box Headers (RECHNUNGSADRESSE, LIEFERADRESSE) */
.pc-checkout-view .ph-box-header {
    color: #fff !important;
    font-weight: bold !important;
    font-size: 16px !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    padding-bottom: 8px !important;
}

/* Checkout Step Headers (1. Login, 2. Billing, etc.) */
.pc-checkout-view h3 {
    color: #fff !important;
    font-size: 20px !important;
}

/* Checkbox "Delivery and billing same" */
.ph-checkout-check-box label,
.ph-checkout-check-box .form-check-label {
    color: #ccc !important;
    font-size: 14px !important;
}

/* Save / Submit Buttons im Checkout */
.ph-checkout-address-save .btn,
.ph-checkout-address-edit .btn,
.pc-checkout-view .btn-primary,
.pc-checkout-view .btn-success {
    color: #fff !important;
    background: linear-gradient(135deg, #00c9a7, #a8e063) !important;
    border: none !important;
    padding: 10px 24px !important;
    border-radius: 30px !important;
    font-weight: bold !important;
}

/* Shipping/Payment Radio-Options */
.pc-checkout-view .form-check,
.pc-checkout-view .radio,
.pc-checkout-view .ph-radio-box {
    color: #fff !important;
    margin-bottom: 8px !important;
}

.pc-checkout-view .form-check-label,
.pc-checkout-view .form-check label,
.pc-checkout-view .radio label {
    color: #fff !important;
}

.pc-checkout-view .form-check-input {
    margin-right: 8px !important;
}

/* Confirm/Order Summary */
.pc-checkout-view .ph-checkout-confirm-box,
.pc-checkout-view .ph-checkout-confirm-table {
    color: #fff !important;
}

.pc-checkout-view .ph-checkout-confirm-table td,
.pc-checkout-view .ph-checkout-confirm-table th {
    color: #fff !important;
    padding: 8px !important;
}

/* Info/Hinweis Texte */
.pc-checkout-view .ph-info-view-content,
.pc-checkout-view p,
.pc-checkout-view span {
    color: #ccc !important;
}

/* Step Numbers (1, 2, 3, 4) */
.ph-checkout-icon-spec-pending,
.ph-checkout-icon-spec-active,
.ph-checkout-icon-spec-completed {
    color: #fff !important;
    font-weight: bold !important;
    font-size: 16px !important;
    background: linear-gradient(135deg, #00c9a7, #a8e063) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Unstyled Lists (Links etc.) */
.pc-checkout-view ul.unstyled li,
.pc-checkout-view .ph-li-inline li {
    color: #ccc !important;
}

.pc-checkout-view ul.unstyled a,
.pc-checkout-view .ph-li-inline a {
    color: #7dcea0 !important;
}

/* Tables im Checkout generell */
.pc-checkout-view table {
    width: 100% !important;
}

.pc-checkout-view table td,
.pc-checkout-view table th {
    color: #fff !important;
    padding: 8px 5px !important;
}

/* =============================================
   System-Meldungen im Checkout ausblenden
   ============================================= */

/* "Data stored" Meldung ausblenden */
.pc-checkout-view .alert-message,
.pc-checkout-view .system-message,
.pc-checkout-view #system-message-container,
.pc-checkout-view .alert.alert-success,
.pc-checkout-view .alert-success {
    display: none !important;
}