/* Απλό, καθαρό UI – prefixed ripa- */

.ripa-open { overflow: hidden; }

.ripa-btn {
  appearance: none; border: 0; cursor: pointer;
  padding: .6rem 1rem; border-radius: .75rem; font-weight: 600;
  background: #f1f5f9; transition: transform .06s ease, box-shadow .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.ripa-btn:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-1px); }

.ripa-btn--ghost { background: transparent; border: 1px solid #e2e8f0; }
.ripa-btn--primary { background: #2563eb; color: #fff; }
.ripa-btn--primary:disabled { opacity: .5; cursor: not-allowed; }

.ripa-modal {
  position: fixed; inset: 0; display: none; z-index: 100000;
}
.ripa-modal[aria-hidden="false"] { display: block; }

.ripa-backdrop {
  position: absolute; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(2px);
}

.ripa-dialog {
  position: relative; width: min(720px, 92vw); max-height: 88vh;
  margin: 5vh auto; background: #fff; border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.25);
}

.ripa-header { padding: 14px 16px; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; }
.ripa-header h3 { margin: 0; font-size: 1.05rem; }
.ripa-close { background: transparent; border: 0; font-size: 22px; cursor: pointer; opacity: .7; }
.ripa-close:hover { opacity: 1; }

.ripa-tabs { display:flex; gap:4px; padding: 10px; border-bottom: 1px solid #e2e8f0; }
.ripa-tab {
  padding: .45rem .8rem; border-radius: 999px; border:1px solid #e2e8f0; background:#fff; cursor:pointer; font-weight:600;
}
.ripa-tab--active { background:#0ea5e9; border-color:#0ea5e9; color:#fff; }

.ripa-body { padding: 16px; overflow: auto; }
.ripa-pane { display: none; }
.ripa-pane--active { display: block; }

.ripa-drop {
  position: relative; border: 2px dashed #cbd5e1; border-radius: 14px; padding: 26px; text-align:center;
}
.ripa-drop--hover { background: #f8fafc; border-color: #94a3b8; }
.ripa-drop .ripa-file {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
.ripa-drop-main { font-weight: 700; margin: 0; }
.ripa-drop-sub { margin: 6px 0 0 0; color: #64748b; }

.ripa-input {
  width: 100%; padding: .7rem .9rem; border:1px solid #e2e8f0; border-radius: 12px; font-size: .95rem;
}

.ripa-selected {
  margin-top: 10px; font-size: .92rem; color: #0f172a; background: #f1f5f9; padding: 10px 12px; border-radius: 10px;
}

.ripa-media-btn {
  appearance:none; border:1px solid #e2e8f0; background:#fff; padding:.6rem 1rem; border-radius:.75rem; font-weight:600; cursor:pointer;
}

.ripa-footer { padding: 12px 16px; border-top: 1px solid #e2e8f0; display:flex; gap:8px; justify-content:flex-end; }