/* Orakel Plugin – Frontend Styles */

.orakel-widget {
    max-width: 600px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #2C2C2A;
}

/* Header */
.orakel-header { display:flex; align-items:center; gap:12px; margin-bottom:1.5rem; }
.orakel-logo { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#534AB7,#3C3489); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.orakel-title { font-size:20px !important; font-weight:600 !important; color:#26215C !important; margin:0 !important; padding:0 !important; border:none !important; }
.orakel-subtitle { font-size:12px; color:#888780; margin:2px 0 0 !important; letter-spacing:.03em; }

/* Deck buttons */
.orakel-deck-row { display:flex; gap:8px; margin-bottom:1.25rem; flex-wrap:wrap; }
.orakel-deck-btn { padding:7px 16px; border-radius:99px; border:1px solid #D3D1C7; background:transparent; font-size:13px; cursor:pointer; color:#5F5E5A; transition:all .15s; }
.orakel-deck-btn:hover { border-color:#7F77DD; color:#534AB7; background:#EEEDFE; }
.orakel-deck-btn.active { background:#534AB7; color:white; border-color:#534AB7; font-weight:500; }

/* Mode cards */
.orakel-modes { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:1.25rem; }
.orakel-mode-card { background:#fff; border:1.5px solid #E0DFF8; border-radius:12px; padding:1rem .75rem; text-align:center; cursor:pointer; transition:all .2s; }
.orakel-mode-card:hover { border-color:#7F77DD; background:#EEEDFE; transform:translateY(-2px); }
.orakel-mode-card.active { border-color:#534AB7; background:#EEEDFE; box-shadow:0 0 0 3px rgba(83,74,183,.12); }
.orakel-mode-icon { font-size:24px; margin-bottom:6px; }
.orakel-mode-name { font-size:13px; font-weight:600; color:#26215C; margin-bottom:3px; }
.orakel-mode-desc { font-size:11px; color:#888780; line-height:1.4; }

/* Draw area */
.orakel-question-hint { font-size:13px; color:#5F5E5A; text-align:center; margin-bottom:.75rem; font-style:italic; background:#F1EFE8; border-radius:8px; padding:10px 14px; }

/* Buttons */
.orakel-btn { display:block; width:100%; padding:12px 20px; border-radius:10px; font-size:14px; font-weight:500; cursor:pointer; border:1px solid #D3D1C7; background:transparent; color:#2C2C2A; text-align:center; transition:all .15s; }
.orakel-btn--primary { background:#534AB7; color:white; border-color:#534AB7; }
.orakel-btn--primary:hover { background:#3C3489; }
.orakel-btn--ghost { font-size:13px; color:#888780; border-color:transparent; width:auto; display:inline-block; }
.orakel-btn--ghost:hover { text-decoration:underline; background:transparent; }

/* Result */
.orakel-result-tageskarte { animation: orakel-fadein .5s ease; }
.orakel-result-drei { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; animation:orakel-fadein .5s ease; }
.orakel-result-janein { animation:orakel-fadein .5s ease; }

@keyframes orakel-fadein { from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)} }

/* Card display */
.orakel-card { background:#fff; border:1px solid #E0DFF8; border-radius:14px; padding:1.25rem 1rem; text-align:center; }
.orakel-card--reversed { opacity:.9; border-color:#FAC775; background:#FFFBF4; }
.orakel-card-symbol { font-size:36px; margin-bottom:8px; display:block; }
.orakel-card-name { font-size:15px; font-weight:600; color:#26215C; margin-bottom:3px; }
.orakel-card-reversed-badge { display:inline-block; font-size:10px; background:#FAEEDA; color:#854F0B; padding:2px 8px; border-radius:99px; margin-bottom:6px; font-weight:500; }
.orakel-card-keywords { font-size:11px; color:#888780; margin-bottom:10px; letter-spacing:.03em; }
.orakel-card-text { font-size:13px; color:#2C2C2A; line-height:1.7; text-align:left; }
.orakel-card-position { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:#7F77DD; font-weight:500; margin-bottom:8px; }

/* Ja/Nein result */
.orakel-janein-wrap { background:#fff; border-radius:14px; border:1px solid #E0DFF8; padding:1.5rem; text-align:center; }
.orakel-janein-answer { font-size:48px; font-weight:700; margin:1rem 0 .5rem; }
.orakel-janein-answer.ja { color:#0F6E56; }
.orakel-janein-answer.nein { color:#993C1D; }
.orakel-janein-tendenz { font-size:12px; color:#888780; margin-bottom:1rem; }
.orakel-janein-divider { border:none; border-top:1px solid #E0DFF8; margin:1rem 0; }

/* Loading */
.orakel-loading { display:flex; align-items:center; gap:10px; padding:.75rem 0; font-size:13px; color:#888780; }
.orakel-dots { display:flex; gap:4px; }
.orakel-dot { width:6px; height:6px; border-radius:50%; background:#7F77DD; animation:orakel-pulse 1.2s ease-in-out infinite; }
.orakel-dot:nth-child(2){animation-delay:.2s}
.orakel-dot:nth-child(3){animation-delay:.4s}
@keyframes orakel-pulse{0%,100%{opacity:.25}50%{opacity:1}}

/* Responsive */
@media(max-width:480px){
    .orakel-modes{grid-template-columns:1fr}
    .orakel-result-drei{grid-template-columns:1fr}
}