/* ============================================================
   Haruby Plugin Shop – Frontend Styles
   ============================================================ */

:root {
    --hps-primary:   #1a1a2e;
    --hps-accent:    #667eea;
    --hps-accent2:   #764ba2;
    --hps-success:   #10b981;
    --hps-warning:   #f59e0b;
    --hps-danger:    #ef4444;
    --hps-surface:   #ffffff;
    --hps-bg:        #f0f4f8;
    --hps-border:    #e2e8f0;
    --hps-text:      #1a202c;
    --hps-muted:     #718096;
    --hps-radius:    14px;
    --hps-shadow:    0 4px 24px rgba(0,0,0,.10);
}

/* ── Layout ─────────────────────────────────────────────── */
.hps-shop { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

.hps-test-banner {
    background: repeating-linear-gradient(45deg, #f59e0b, #f59e0b 12px, #fbbf24 12px, #fbbf24 24px);
    color: #78350f;
    font-weight: 700;
    text-align: center;
    padding: 10px 16px;
    border-radius: var(--hps-radius) var(--hps-radius) 0 0;
    font-size: 14px;
    margin-bottom: 24px;
}

/* ── Produkt-Grid ────────────────────────────────────────── */
.hps-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.hps-product-card {
    background: var(--hps-surface) !important;
    border-radius: var(--hps-radius) !important;
    box-shadow: var(--hps-shadow) !important;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    border: 1px solid var(--hps-border) !important;
}
.hps-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,.15) !important;
}

.hps-product-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.hps-product-body { padding: 22px !important; }

.hps-product-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--hps-accent), var(--hps-accent2));
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.hps-product-name {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--hps-text) !important;
    margin: 0 0 4px !important;
    -webkit-text-fill-color: var(--hps-text) !important;
}

.hps-product-version {
    font-size: 13px !important;
    color: var(--hps-muted) !important;
    margin: 0 0 12px !important;
}

.hps-product-description {
    font-size: 14px !important;
    color: var(--hps-muted) !important;
    line-height: 1.6;
    margin-bottom: 18px !important;
}

.hps-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--hps-border) !important;
}

.hps-product-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.hps-price-amount {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--hps-text) !important;
    -webkit-text-fill-color: var(--hps-text) !important;
}
.hps-price-currency {
    font-size: 14px !important;
    color: var(--hps-muted) !important;
    -webkit-text-fill-color: var(--hps-muted) !important;
}

.hps-buy-button {
    background: linear-gradient(135deg, var(--hps-accent), var(--hps-accent2)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 11px 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: opacity .2s, transform .15s !important;
    -webkit-text-fill-color: #fff !important;
    appearance: none !important;
    margin: 0 !important;
}
.hps-buy-button:hover {
    opacity: .9 !important;
    transform: scale(1.03) !important;
}

/* ── Modal ──────────────────────────────────────────────── */
.hps-modal-overlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(10,10,20,.65) !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    backdrop-filter: blur(4px);
}
.hps-modal-overlay.hps-modal-open {
    display: flex !important;
}

.hps-modal {
    background: var(--hps-surface) !important;
    border-radius: var(--hps-radius) !important;
    width: 100%;
    max-width: 480px !important;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,.3) !important;
    position: relative;
    padding: 36px !important;
    animation: hpsSlideUp .25s ease;
}

@keyframes hpsSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hps-modal-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    background: var(--hps-bg) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--hps-muted) !important;
    -webkit-text-fill-color: var(--hps-muted) !important;
    appearance: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: background .15s !important;
}
.hps-modal-close:hover { background: #e2e8f0 !important; }

.hps-modal-header { text-align: center; margin-bottom: 24px; }
.hps-modal-icon { font-size: 40px; margin-bottom: 10px; }
.hps-modal-header h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--hps-text) !important;
    margin: 0 0 4px !important;
    -webkit-text-fill-color: var(--hps-text) !important;
}
.hps-modal-price {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--hps-accent) !important;
    margin: 0 !important;
    -webkit-text-fill-color: var(--hps-accent) !important;
}

.hps-modal-test-notice {
    background: #fef9c3;
    border-left: 3px solid var(--hps-warning);
    padding: 10px 14px;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: #78350f;
    margin-bottom: 20px;
}

/* ── Formular ─────────────────────────────────────────────── */
.hps-form-group { margin-bottom: 18px !important; }
.hps-form-group label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--hps-text) !important;
    margin-bottom: 6px !important;
    -webkit-text-fill-color: var(--hps-text) !important;
}
.hps-form-group input[type="text"],
.hps-form-group input[type="email"] {
    width: 100% !important;
    padding: 11px 14px !important;
    border: 1.5px solid var(--hps-border) !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    background: #fff !important;
    color: var(--hps-text) !important;
    box-sizing: border-box !important;
    transition: border-color .2s !important;
    margin: 0 !important;
    appearance: none !important;
}
.hps-form-group input:focus {
    border-color: var(--hps-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(102,126,234,.15) !important;
}
.hps-field-hint {
    font-size: 12px !important;
    color: var(--hps-muted) !important;
    margin: 4px 0 0 !important;
}

.hps-privacy-group label { font-weight: 400 !important; }
.hps-checkbox-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
}
.hps-checkbox-label input[type="checkbox"] {
    margin-top: 2px !important;
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--hps-accent) !important;
}
.hps-checkbox-label span {
    font-size: 13px !important;
    color: var(--hps-muted) !important;
    line-height: 1.5 !important;
    -webkit-text-fill-color: var(--hps-muted) !important;
}
.hps-checkbox-label a { color: var(--hps-accent) !important; }

.hps-form-message {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 14px;
    display: none;
}
.hps-form-message.error   { background: #fee2e2; color: #b91c1c; border-left: 3px solid var(--hps-danger); }
.hps-form-message.success { background: #d1fae5; color: #065f46; border-left: 3px solid var(--hps-success); }

.hps-submit-button {
    width: 100% !important;
    padding: 14px !important;
    background: linear-gradient(135deg, var(--hps-accent), var(--hps-accent2)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    margin-top: 6px !important;
    transition: opacity .2s !important;
    -webkit-text-fill-color: #fff !important;
    appearance: none !important;
}
.hps-submit-button:hover    { opacity: .9 !important; }
.hps-submit-button:disabled { opacity: .6 !important; cursor: not-allowed !important; }

/* ── PayPal Step ─────────────────────────────────────────── */
.hps-order-summary {
    background: var(--hps-bg);
    border-radius: 10px;
    padding: 16px;
    margin: 16px 0;
}
.hps-order-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--hps-border);
    font-size: 14px;
}
.hps-order-row:last-child { border-bottom: none; }
.hps-order-row span { color: var(--hps-muted); }
.hps-order-row strong { color: var(--hps-text); }

.hps-paypal-steps { margin: 20px 0; }
.hps-step {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--hps-text);
}
.hps-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hps-accent), var(--hps-accent2));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.hps-paypal-button {
    display: block !important;
    text-align: center !important;
    background: #0070ba !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-radius: 30px !important;
    padding: 14px 24px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    margin: 20px 0 !important;
    transition: background .2s !important;
}
.hps-paypal-button:hover { background: #005ea6 !important; }

.hps-paypal-note {
    font-size: 13px !important;
    color: var(--hps-muted) !important;
    text-align: center !important;
    -webkit-text-fill-color: var(--hps-muted) !important;
    margin: 0 !important;
}

/* ── Test Success ────────────────────────────────────────── */
.hps-success-message {
    background: #d1fae5;
    border-radius: 10px;
    padding: 18px;
    color: #065f46;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.hps-close-button {
    width: 100% !important;
    padding: 13px !important;
    background: var(--hps-bg) !important;
    color: var(--hps-text) !important;
    border: 1.5px solid var(--hps-border) !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    -webkit-text-fill-color: var(--hps-text) !important;
    appearance: none !important;
    margin: 0 !important;
}

@media (max-width: 500px) {
    .hps-modal { padding: 24px !important; }
    .hps-products-grid { grid-template-columns: 1fr; }
}

/* ── Beschreibung Mehr/Weniger ──────────────────────────── */
.hps-read-more,
.hps-read-less {
    background: none !important;
    border: none !important;
    color: var(--hps-accent) !important;
    -webkit-text-fill-color: var(--hps-accent) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 0 0 4px !important;
    text-decoration: underline !important;
    white-space: nowrap !important;
    appearance: none !important;
}
.hps-read-more:hover,
.hps-read-less:hover { opacity: .75 !important; }
.hps-desc-short,
.hps-desc-full {
    font-size: 14px !important;
    color: var(--hps-muted) !important;
    line-height: 1.6 !important;
    -webkit-text-fill-color: var(--hps-muted) !important;
}