/* HipnoPorto LMS — Frontend Styles */

:root {
    --hp-primary:    #1a1a2e;
    --hp-accent:     #c9a96e;
    --hp-bg:         #ffffff;
    --hp-bg-soft:    #f9f9f9;
    --hp-border:     #e0e0e0;
    --hp-text:       #1a1a1a;
    --hp-text-muted: #888;
    --hp-error:      #c0392b;
    --hp-radius:     10px;
    --hp-shadow:     0 4px 24px rgba(0,0,0,0.08);
    --hp-transition: 0.25s ease;
}

.hp-checkout { position:relative;max-width:480px;margin:0 auto;font-family:'Georgia',serif;color:var(--hp-text); }
.hp-slide { background:var(--hp-bg);border:1px solid var(--hp-border);border-radius:var(--hp-radius);padding:2rem 2rem 1.5rem;box-shadow:var(--hp-shadow); }
.hp-slide-title { font-size:1.3rem;font-weight:700;color:var(--hp-primary);margin:0 0 1.5rem;padding-bottom:0.75rem;border-bottom:2px solid var(--hp-accent); }

.hp-field { margin-bottom:1.1rem; }
.hp-field label { display:block;font-size:0.82rem;font-weight:600;color:var(--hp-primary);margin-bottom:0.35rem;text-transform:uppercase;letter-spacing:0.04em; }
.hp-field input { width:100%;padding:0.7rem 0.9rem;border:1.5px solid var(--hp-border);border-radius:6px;font-size:1rem;font-family:inherit;color:var(--hp-text);background:var(--hp-bg-soft);transition:border-color var(--hp-transition);box-sizing:border-box; }
.hp-field input:focus { outline:none;border-color:var(--hp-primary);background:var(--hp-bg); }
.hp-error { display:block;font-size:0.8rem;color:var(--hp-error);margin-top:0.3rem; }

.hp-consent { margin-bottom:0.9rem; }
.hp-checkbox-label { display:flex;gap:0.6rem;align-items:flex-start;cursor:pointer;font-size:0.82rem;line-height:1.5;color:#666; }
.hp-checkbox-label input[type="checkbox"] { width:16px;height:16px;flex-shrink:0;margin-top:2px;accent-color:var(--hp-primary); }

.hp-btn { display:inline-block;width:100%;padding:0.9rem 1.5rem;border:none;border-radius:6px;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;text-align:center;transition:all var(--hp-transition);text-decoration:none;margin-top:0.5rem;box-sizing:border-box; }
.hp-btn-primary { background:var(--hp-primary);color:#fff;letter-spacing:0.03em; }
.hp-btn-primary:hover { background:#2d2d4e;color:#fff; }
.hp-btn-secondary { background:transparent;color:var(--hp-primary);border:2px solid var(--hp-primary); }
.hp-btn-link { background:transparent;color:#888;font-weight:400;font-size:0.9rem;text-decoration:underline; }
.hp-form-note { text-align:center;font-size:0.78rem;color:#999;margin-top:0.75rem;display:flex;align-items:center;justify-content:center;gap:0.4rem; }

.hp-total-price { text-align:center;font-size:2.2rem;font-weight:700;color:var(--hp-primary);margin-bottom:1.5rem; }
.hp-price-option { display:flex;align-items:center;gap:0.75rem;padding:0.85rem 1rem;border:1.5px solid var(--hp-border);border-radius:6px;margin-bottom:0.5rem;cursor:pointer; }
.hp-price-option strong { display:block;font-size:1.05rem;color:var(--hp-primary); }
.hp-price-option span { font-size:0.82rem;color:#999; }

.hp-payment-methods { display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-bottom:1rem; }
.hp-method { display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:1.1rem 0.5rem;border:2px solid var(--hp-border);border-radius:8px;cursor:pointer;transition:all var(--hp-transition);font-size:0.88rem;font-weight:600;color:var(--hp-primary);text-align:center; }
.hp-method:hover,.hp-method.selected { border-color:var(--hp-primary);background:#f5f5fb; }
.hp-method-icon { font-size:1.6rem; }

.hp-mbway-input { margin-bottom:0.75rem; }
.hp-mbway-input label { display:block;font-size:0.82rem;font-weight:600;color:var(--hp-primary);margin-bottom:0.35rem;text-transform:uppercase;letter-spacing:0.04em; }
.hp-mbway-input input { width:100%;padding:0.7rem 0.9rem;border:1.5px solid var(--hp-border);border-radius:6px;font-size:1rem;font-family:inherit;box-sizing:border-box; }

.hp-slide-mbway { text-align:center; }
.hp-waiting-icon { font-size:3rem;margin-bottom:1rem; }
.hp-slide-mbway h3 { font-size:1.2rem;margin:0 0 0.75rem;color:var(--hp-primary); }
.hp-slide-mbway p { font-size:0.95rem;color:#888;margin-bottom:0.5rem; }

.hp-countdown-bar { background:var(--hp-border);border-radius:99px;height:6px;margin:1.25rem 0 0.5rem;overflow:hidden; }
.hp-countdown-fill { height:100%;background:var(--hp-accent);border-radius:99px;transition:width 1s linear; }
.hp-countdown-text { font-size:0.85rem;color:#888;text-align:center; }

.hp-slide-mb h3 { font-size:1.2rem;margin:0 0 1.25rem;color:var(--hp-primary); }
.hp-mb-reference { background:var(--hp-bg-soft);border:1px solid var(--hp-border);border-radius:8px;overflow:hidden;margin-bottom:0.5rem; }
.hp-mb-row { display:flex;justify-content:space-between;align-items:center;padding:0.85rem 1rem;border-bottom:1px solid var(--hp-border); }
.hp-mb-row:last-child { border-bottom:none; }
.hp-mb-label { font-size:0.8rem;text-transform:uppercase;letter-spacing:0.05em;color:#888; }
.hp-mb-value { font-size:1.1rem;font-weight:700;color:var(--hp-primary);letter-spacing:0.06em; }

.hp-slide-success { text-align:center;padding:3rem 2rem; }
.hp-success-icon { width:64px;height:64px;background:var(--hp-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.75rem;margin:0 auto 1.5rem; }
.hp-slide-success h3 { font-size:1.4rem;color:var(--hp-primary);margin:0 0 0.75rem; }
.hp-slide-success p { color:#888;margin-bottom:1.5rem; }

.hp-global-error { background:#fdf0ef;border:1px solid #f5c6c4;border-radius:6px;color:var(--hp-error);padding:0.75rem 1rem;font-size:0.9rem;margin-bottom:1rem; }
.hp-error-msg { color:var(--hp-error);font-size:0.9rem; }
.hp-status-msg { margin-top:1rem; }

.hp-loading { position:absolute;inset:0;background:rgba(255,255,255,0.82);border-radius:var(--hp-radius);display:flex;align-items:center;justify-content:center;z-index:10; }
.hp-spinner { width:36px;height:36px;border:3px solid var(--hp-border);border-top-color:var(--hp-primary);border-radius:50%;animation:hp-spin 0.8s linear infinite; }
@keyframes hp-spin { to { transform:rotate(360deg); } }

@media (max-width:520px) {
    .hp-slide { padding:1.5rem 1rem; }
    .hp-payment-methods { grid-template-columns:1fr; }
}