/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    /* Paleta principala Relatio */
    --rq-primary: #ef4444;
    --rq-primary-hover: #dc2626;
    --rq-bg-dark: #0f0f11;
    --rq-card-dark: #1a1a1d;
    --rq-border: rgba(255,255,255,0.1);
    --rq-text-main: #ffffff;
    --rq-text-muted: #9ca3af;

    --rq-red: var(--rq-primary);
    --rq-red-hover: var(--rq-primary-hover);
    --rq-bg: var(--rq-bg-dark);
    --rq-card: var(--rq-card-dark);
    --rq-text: var(--rq-text-main);
    --rq-muted: var(--rq-text-muted);
}

/* ============================
   PART 1: ADMIN BUILDER
   ============================ */

#relatio-app {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--rq-bg-dark);
    color: var(--rq-text-main);
    display: flex;
    flex-direction: row;
    height: 85vh;
    width: 100%;
    margin: 20px 0 0 -20px;
    border: 1px solid #333;
    box-sizing: border-box;
    position: relative;
}

#relatio-app * {
    box-sizing: border-box;
}

.grid-label {
    text-align: center;
    margin: 10px 0;
}

/* Sidebar */
#relatio-app .relatio-sidebar {
    width: 320px;
    background: #050505;
    border-right: 1px solid var(--rq-border);
    display: flex;
    flex-direction: column;
    padding: 20px;
    flex-shrink: 0;
    overflow: hidden;
}

#relatio-app .brand {
    color: var(--rq-primary);
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 20px;
}

#relatio-app .sidebar-content {
    flex: 1;
    overflow-y: auto;
}

/* Tabs */
#relatio-app .tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

#relatio-app .tab-btn {
    flex: 1;
    padding: 10px;
    background: #1a1a1d;
    border: 1px solid #333;
    color: #888;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 600;
}

#relatio-app .tab-btn.active {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

/* Steps list */
#relatio-app .step-item {
    background: var(--rq-card-dark);
    padding: 12px 15px;
    margin-bottom: 8px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: 0.2s;
}

#relatio-app .step-item:hover {
    background: #27272a;
}

#relatio-app .step-item.active {
    background: rgba(239,68,68,0.1);
    border-color: var(--rq-primary);
}

#relatio-app .step-item strong {
    display: block;
    font-size: 14px;
    color: #ffffff;
}

#relatio-app .step-item small {
    color: #666;
    font-size: 11px;
    text-transform: uppercase;
}

/* Add step button */
#relatio-app .add-btn {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px dashed #444;
    color: #888;
    cursor: pointer;
    border-radius: 8px;
    margin-top: 10px;
    transition: 0.2s;
}

#relatio-app .add-btn:hover {
    border-color: var(--rq-primary);
    color: var(--rq-primary);
}

/* Main area */
#relatio-app .relatio-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--rq-bg-dark);
    overflow: hidden;
    min-width: 0;
}

/* Top bar */
#relatio-app .top-bar {
    padding: 15px 30px;
    border-bottom: 1px solid var(--rq-border);
    background: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

/* Editor container */
#relatio-app .editor-container {
    flex: 1;
    overflow-y: auto;
    padding: 40px;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

/* Form elements */
#relatio-app .form-group {
    margin-bottom: 20px;
}

#relatio-app label {
    display: block;
    color: var(--rq-text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
}

#relatio-app input,
#relatio-app select,
#relatio-app textarea {
    background: #1a1a1d;
    border: 1px solid #333;
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
}

#relatio-app input:focus,
#relatio-app select:focus,
#relatio-app textarea:focus {
    outline: none;
    border-color: var(--rq-primary);
}

/* Specific input */
#relatio-app .form-input {
    width: 100%;
    background: #1a1a1d;
    border: 1px solid #333;
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
}

#relatio-app .form-input:focus {
    outline: none;
    border-color: var(--rq-primary);
}

/* Save button */
#relatio-app .btn-save {
    background: var(--rq-primary);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

/* ============================
   PART 2: FRONTEND RUNNER
   ============================ */

.relatio-runner-wrapper {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #141218;
    color: var(--rq-text-main);
    line-height: 1.5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.relatio-runner-wrapper * {
    box-sizing: border-box;
}

.relatio-runner-wrapper button {
    font-family: inherit;
    cursor: pointer;
}

/* Layout utils */
.rq-container {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 0 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rq-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 120px;
    -webkit-overflow-scrolling: touch;
}

/* Header and progress */
.rq-header {
    padding: 16px 1px;
    background: #141218;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.rq-progress-track {
    height: 4px;
    background: #27272a;
    border-radius: 10px;
    margin: 0 auto 20px;
    overflow: hidden;
    width: 80%;
}

.rq-progress-fill {
    height: 100%;
    background: var(--rq-primary);
    transition: width 0.4s ease;
    border-radius: 10px;
}

/* Typography */
.rq-title {
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    text-align: center;
    margin: 35px 0;
    line-height: 1.2;
}

.rq-subtitle {
    font-size: 15px;
    color: var(--rq-text-muted);
    text-align: center;
    margin: 0 0 32px 0;
    font-weight: 500;
}

/* Quiz options */
.rq-option {
    background: var(--rq-card-dark);
    border: 1px solid var(--rq-border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s;
    cursor: pointer;
}

.rq-option:hover {
    background: #27272a;
}

.rq-option.selected {
    background: var(--rq-primary);
    border-color: var(--rq-primary);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
}

.rq-opt-icon {
    width: 55px;
    height: 55px;
    border-radius: 10px;
    background: #000;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #555;
}

.rq-opt-label {
    flex: 1;
    font-weight: 600;
    font-size: 16px;
}

.rq-opt-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #555;
    position: relative;
}

.rq-option.selected .rq-opt-radio {
    border-color: #fff;
}

.rq-option.selected .rq-opt-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
}

/* Grid options */
.grid-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.grid-option {
    background: var(--rq-card-dark);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.2s;
}

.grid-option:hover {
    transform: translateY(-2px);
}

/* Checkout header */
.rq-checkout-header {
    background: var(--rq-card-dark);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--rq-border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 50;
    position: sticky;
    top: 0;
}

.rq-timer-label {
    font-size: 10px;
    color: var(--rq-text-muted);
    text-transform: uppercase;
    font-weight: 700;
}

.rq-timer-val {
    font-size: 26px;
    font-weight: 800;
    color: var(--rq-primary);
    line-height: 1;
}

.rq-discount-pill {
    background: var(--rq-primary);
    color: #fff;
    padding: 8px 16px;
    border-radius: 100px;
    font-weight: 800;
    font-size: 14px;
}

/* ============================
   PLAN CARDS 1:1 - UPDATED DESIGN
   ============================ */

/* Card plan general */
.rq-plan-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 18px;
    border-radius: 20px;
    background: #2a2c35;
    margin-bottom: 12px;
    cursor: pointer;
    overflow: visible;
    transition: all 0.2s ease;
    min-height: 76px;
}

.rq-plan-card:hover:not(.selected) {
    background: #32343d;
}

/* Card selectat */
.rq-plan-card.selected {
    background: linear-gradient(135deg, #ff4b5c 0%, #ee3b4d 100%);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
}

/* Container pentru radio + info */
.rq-plan-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

/* Radio din stanga */
.rq-plan-radio {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
}

.rq-plan-card.selected .rq-plan-radio {
    border-color: #fff;
    background: transparent;
}

.rq-plan-card.selected .rq-plan-radio::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
}

/* Info plan (titlu + preturi) */
.rq-plan-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rq-plan-title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #fff;
    line-height: 1;
}

.rq-plan-prices {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rq-old-price {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    text-decoration: line-through;
    font-weight: 500;
}

.rq-new-price {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
}

/* Pastila daily price pe dreapta - forma de romb/hexagon cu colturi rotunjite */
.rq-daily-tag-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.rq-daily-old {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    text-decoration: line-through;
    font-weight: 500;
}

.rq-daily-tag {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 11px 20px 11px 26px;
    background: #ff4b5c;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100' height='50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 14 2 Q 10 2 8 5 L 2 22 Q 0.5 25 2 28 L 8 45 Q 10 48 14 48 L 92 48 Q 96 48 96 44 L 96 6 Q 96 2 92 2 Z' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='100' height='50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 14 2 Q 10 2 8 5 L 2 22 Q 0.5 25 2 28 L 8 45 Q 10 48 14 48 L 92 48 Q 96 48 96 44 L 96 6 Q 96 2 92 2 Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.rq-plan-card.selected .rq-daily-tag {
    background: #2a2b30;
}

.rq-daily-price {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

/* Currency label - now rendered inline in JS via getCurrency() */

.rq-daily-lbl {
    font-size: 9px;
    opacity: 0.95;
    font-weight: 600;
    margin-top: 2px;
    position: relative;
    z-index: 1;
}

/* Badge recomandat - pozitionat deasupra cardului */
.rq-rec-badge {
    position: absolute;
    top: -10px;
    left: 70%;
    transform: translateX(-50%);
    padding: 5px 16px;
    border-radius: 999px;
    background: #fff;
    color: #ff4b5c;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    white-space: nowrap;
    z-index: 10;
}

.rq-rec-badge span {
    color: #ff4b5c;
}

/* ============================
   REVIEWS
   ============================ */

.rq-section-title {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin: 40px 0 20px;
    color: #fff;
}

.rq-review-card {
    background: var(--rq-card-dark);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 12px;
    border: 1px solid var(--rq-border);
}

.rq-review-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.rq-user-info {
    display: flex;
    gap: 12px;
    align-items: center;
}

.rq-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #27272a;
    color: var(--rq-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
}

.rq-user-meta h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.rq-user-meta span {
    font-size: 11px;
    color: var(--rq-text-muted);
}

.rq-stars {
    color: #22c55e;
    font-size: 14px;
}

.rq-review-body {
    font-size: 13px;
    line-height: 1.5;
    color: #d1d5db;
}

/* Results section */

.rq-results-section {
    margin: 20px 0;
}

.rq-res-header {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 18px;
}

.rq-res-cards {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.rq-res-card {
    flex: 1;
    height: 140px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.rq-res-card.now {
    background: #222;
}

.rq-res-card.goal {
    background: var(--rq-primary);
}

.rq-res-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

.rq-metric {
    margin-bottom: 20px;
}

.rq-metric-top {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.rq-bars {
    display: flex;
    gap: 10px;
    height: 4px;
}

.rq-bar-track {
    flex: 1;
    background: #333;
    border-radius: 10px;
    overflow: hidden;
}

.rq-bar-fill {
    background: #ff5733;
    height: 100%;
}

/* Footer principal */

.rq-sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 24px calc(30px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, #141218 85%, transparent);
    z-index: 40;
    text-align: center;
}

.rq-cta-btn {
    width: 40%;
    background: var(--rq-primary);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 18px;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.4);
    transition: transform 0.1s;
}
.rq-cta-btn:hover {
    background-color: #ef4444;
}

.rq-cta-btn:active {
    transform: scale(0.98);
}

.rq-cta-full {
    width: 100%;
    max-width: 360px;
}

.rq-cta-btn[disabled],
.rq-cta-btn.rq-cta-btn-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

/* Logo header */
.rq-logo-box {
    text-align: center;
}
.rq-logo-box img {
    max-width: 20% !important;
}

/* Loading screen */

.rq-loading-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #141218;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.rq-loading-inner {
    width: 100%;
    max-width: 430px;
    padding: 60px 24px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rq-loader-logo {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: #1f1f23;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.rq-loader-logo-icon {
    width: 16px;
    height: 22px;
    border-radius: 999px;
    background: var(--rq-primary);
    display: inline-block;
}

/* Cerc procent */
.rq-loader-circle {
    position: relative;
    width: 180px;
    height: 180px;
    margin-bottom: 26px;
}

.rq-loader-percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    font-weight: 800;
    color: #fff;
}

/* Texte loader */
.rq-loader-text-main {
    font-size: 16px;
    font-weight: 600;
    color: #f9fafb;
    text-align: center;
    margin-bottom: 4px;
}

.rq-loader-text-sub {
    font-size: 14px;
    color: var(--rq-text-muted);
    text-align: center;
    margin-bottom: 18px;
}

/* Puncte */
.rq-loader-dots {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.rq-loader-dots span {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #f97316;
}

/* Text 1 000 000+ */
.rq-loader-people {
    text-align: center;
    font-size: 18px;
    color: #e5e7eb;
    font-weight: 600;
    margin-bottom: 26px;
    line-height: 1.3;
}

.rq-loader-people-accent {
    color: var(--rq-primary);
    font-weight: 800;
}

/* Carusel recenzii loader */
.rq-loader-carousel {
    width: 100%;
}

.rq-loader-reviews-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    cursor: grab;
}

.rq-loader-reviews-track.dragging {
    cursor: grabbing;
}

.rq-loader-reviews-track::-webkit-scrollbar {
    height: 6px;
}

.rq-loader-reviews-track::-webkit-scrollbar-thumb {
    background: #27272a;
    border-radius: 999px;
}

/* Card review loader */
.rq-loader-review-card {
    min-width: 320px;
    max-width: 460px;
    background: #1f1f23;
    border-radius: 18px;
    padding: 18px 18px 16px;
    border: 1px solid rgba(255,255,255,0.05);
    scroll-snap-align: start;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}

.rq-loader-review-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

.rq-loader-review-top-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* avatar galben */
.rq-loader-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.rq-loader-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    background: #facc15;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #000;
    font-size: 18px;
    flex-shrink: 0;
}

.rq-loader-user-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rq-loader-name {
    font-size: 14px;
    font-weight: 700;
    color: #f9fafb;
}

.rq-loader-extra {
    font-size: 11px;
    color: #9ca3af;
    display: flex;
    gap: 4px;
    align-items: center;
}

/* stele, verified, ago */
.rq-loader-stars-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 10px;
}

.rq-loader-stars-boxes {
    display: inline-flex;
    gap: 4px;
}

.rq-loader-star-box {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #00b67a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rq-loader-star-box span {
    font-size: 11px;
    color: #fff;
    margin-top: -1px;
}

.rq-loader-verified-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #e5e7eb;
}

.rq-loader-verified-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #9ca3af;
    position: relative;
}

.rq-loader-verified-icon::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 3px;
    width: 7px;
    height: 8px;
    border-right: 2px solid #9ca3af;
    border-bottom: 2px solid #9ca3af;
    transform: rotate(40deg);
}

.rq-loader-verified-text {
    font-size: 11px;
}

.rq-loader-ago {
    justify-self: end;
    font-size: 11px;
    color: #9ca3af;
}

.rq-loader-review-title {
    font-size: 14px;
    font-weight: 700;
    color: #f9fafb;
    margin-bottom: 6px;
}

.rq-loader-review-text {
    font-size: 13px;
    color: #d1d5db;
    line-height: 1.5;
}

/* Popup generic - UPDATED WITH BLUR */

.rq-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 18, 24, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rqFadeIn 0.3s ease;
}

.rq-popup-card {
    background: #1f1f23;
    width: 85%;
    max-width: 360px;
    padding: 30px;
    border-radius: 24px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.rq-popup-title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 10px;
}

.rq-popup-text {
    font-size: 14px;
    color: var(--rq-text-muted);
    margin-bottom: 24px;
}

.rq-popup-actions {
    display: flex;
    gap: 12px;
}

.rq-btn-outline {
    flex: 1;
    padding: 14px;
    border-radius: 14px;
    font-weight: 700;
    background: #27272a;
    border: none;
    color: #fff;
}

.rq-btn-primary {
    flex: 1;
    padding: 14px;
    border-radius: 14px;
    font-weight: 700;
    background: var(--rq-primary);
    border: none;
    color: #fff;
}
.rq-btn-primary:hover {
    background: var(--rq-primary);
}

@keyframes rqFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Stripe card */
.rq-payment-box {
    max-width: 420px;
    margin: 20px auto 10px;
    padding: 16px 18px;
    background: #111827;
    border-radius: 12px;
}

.rq-card-element {
    padding: 10px 12px;
    background: #020617;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.rq-card-errors {
    margin-top: 8px;
    font-size: 13px;
    color: #f97373;
}

/* Scale step */

.rq-scale-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
}

.rq-scale-option {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--rq-card-dark);
    border: 1px solid var(--rq-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #e5e7eb;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rq-scale-option:hover {
    background: #27272a;
}

.rq-scale-option.selected {
    background: var(--rq-primary);
    border-color: var(--rq-primary);
    color: #fff;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
}

.rq-scale-labels {
    display: flex;
    justify-content: space-between;
    margin: 12px 8px 0;
    font-size: 13px;
    color: var(--rq-text-muted);
}

/* Wrapper quiz pe pagina */

.relatio-quiz-active {
    width: 30%;
    max-width: 520px;
    min-width: 360px;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

@media (max-width: 900px) {
    .relatio-quiz-active {
        width: 100%;
        max-width: none;
        min-width: 0;
        left: 0;
        transform: none;
    }
}

/* helper icon gol */
.rq-opt-icon:empty {
    background: red !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Footer pentru buton Continuă la întrebări multi choice */

.rq-step-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 18px 24px calc(28px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, #141218 90%, transparent);
    z-index: 50;
    text-align: center;
}

.rq-step-footer .rq-cta-btn {
    width: 100%;
    max-width: 340px;
    background-color: #ef4444;
}

/* Animatie tranzitie intre intrebari */

.rq-step-anim {
    opacity: 0;
    animation: rqStepIn 0.98s ease-out forwards;
}

@keyframes rqStepIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Buton close generic */

.rq-close-btn {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 22px;
    cursor: pointer;
}

.rq-close-btn:hover {
    color: #fff;
}

.rq-checkout-header .rq-close-btn {
    position: absolute;
    top: 10px;
    right: 16px;
}

/* EMAIL SCREEN */

.rq-email-screen {
    position: absolute;
    inset: 0;
    background: #141218;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 40px 20px 24px;
}

.rq-email-inner {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rq-email-logo {
    width: 52px;
    height: 52px;
    border-radius: 20px;
    background: #1f1f23;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}

.rq-email-logo img {
    width: 34px;
    height: auto;
    display: block;
}

.rq-email-title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #f9fafb;
    line-height: 1.3;
    margin: 0 0 26px 0;
}

.rq-email-title span {
    color: var(--rq-primary);
}

.rq-email-input-wrap {
    width: 100%;
    max-width: 430px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    background: transparent;
}

.rq-email-icon {
    font-size: 18px;
    color: #e5e7eb;
}

.rq-email-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #f9fafb;
    font-size: 16px;
}

.rq-email-input::placeholder {
    color: #9ca3af;
}

.rq-email-error {
    width: 100%;
    max-width: 430px;
    color: #f97316;
    font-size: 12px;
    margin-bottom: 4px;
    display: none;
}

.rq-email-note {
    width: 100%;
    max-width: 430px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
    color: #e5e7eb;
}

.rq-email-lock {
    font-size: 16px;
    margin-top: 2px;
}

/* GRAPH SCREEN */

.rq-graph-screen {
    position: absolute;
    inset: 0;
    background: #141218;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 40px 20px 24px;
}

.rq-graph-inner {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rq-graph-card {
    width: 100%;
    max-width: 360px;
    margin-top: 8px;
    border-radius: 18px;
    overflow: hidden;
    background: transparent;
}

.rq-graph-svg {
    width: 100%;
    height: auto;
    display: block;
}

.rq-graph-title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #f9fafb;
    line-height: 1.3;
    margin: 0 0 24px 0;
}

.rq-graph-title-highlight {
    color: #f97316;
}

/* linie curba, sageata, puncte */
.rq-graph-path {
    stroke: #fb4b4b;
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: rqGraphPath 1.6s ease-out forwards;
}

.rq-graph-arrow {
    fill: #fb4b4b;
    opacity: 0;
    transform-origin: center;
    animation: rqGraphArrow 0.6s ease-out forwards;
    animation-delay: 1.1s;
}

.rq-graph-dot {
    fill: #f97316;
    stroke: #1f2933;
    stroke-width: 4;
    transform-origin: center;
    transform: scale(0);
    animation: rqGraphDot 0.3s ease-out forwards;
}

.rq-dot-1 { animation-delay: 0.4s; }
.rq-dot-2 { animation-delay: 0.7s; }
.rq-dot-3 { animation-delay: 1.0s; }
.rq-dot-4 { animation-delay: 1.3s; }

.rq-graph-tag-today,
.rq-graph-tag-after {
    opacity: 0;
    animation: rqGraphLabels 0.4s ease-out forwards;
    animation-delay: 1.4s;
}

.rq-graph-caption {
    margin-top: 18px;
    font-size: 14px;
    color: #e5e7eb;
    text-align: center;
}

@keyframes rqGraphPath {
    to { stroke-dashoffset: 0; }
}

@keyframes rqGraphArrow {
    0%   { opacity: 0; transform: scale(0.6); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes rqGraphDot {
    0%   { transform: scale(0); }
    100% { transform: scale(1); }
}

@keyframes rqGraphLabels {
    0%   { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* PLAN PAGE, SECTIUNI, FAQ, ETC
   (acestea raman identice ca structura, folosesc cardurile de mai sus) */

.rq-plan-page {
    width: 100%;
    height: 100%;
    background: #141218;
    display: flex;
    flex-direction: column;
}

.rq-plan-topbar {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 30;
    background: #141218;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.rq-plan-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 0.04em;
    color: #f9fafb;
}

.rq-plan-logo-accent {
    color: var(--rq-primary);
}

.rq-plan-top-btn {
    position: absolute;
    right: 16px;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 700;
    background: var(--rq-primary);
    color: #fff;
    cursor: pointer;
}

/* rezultate Acum / Obiectiv 1 la 1 */

.rq-results-1to1 {
    margin-top: 10px;
}

.rq-res-two-cols {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
}

.rq-res-col {
    flex: 1;
}

.rq-res-tag {
    font-size: 13px;
    font-weight: 700;
    color: #e5e7eb;
    margin-bottom: 6px;
}

.rq-res-tag-goal {
    color: var(--rq-primary);
}

.rq-res-box {
    border-radius: 22px;
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.rq-res-box-now {
    background: #1f2933;
}

.rq-res-box-goal {
    background: radial-gradient(circle at top, #fb4b4b, #b91c1c);
}

.rq-res-emoji {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    margin-bottom: 6px;
}

.rq-res-params {
    width: 100%;
}

.rq-res-param {
    margin-bottom: 8px;
}

.rq-res-param-top {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
}

.rq-res-param-name {
    color: #e5e7eb;
}

.rq-res-param-value {
    font-weight: 600;
}

.rq-res-param-value.rq-low {
    color: #f97316;
}

.rq-res-param-value.rq-high {
    color: #fff;
}

.rq-res-param-bar {
    margin-top: 4px;
    height: 4px;
    border-radius: 999px;
    background: rgba(15,23,42,0.7);
    overflow: hidden;
}

.rq-res-param-fill {
    height: 100%;
    border-radius: 999px;
    background: #f97316;
}

.rq-res-box-goal .rq-res-param-bar {
    background: rgba(0,0,0,0.25);
}

.rq-res-box-goal .rq-res-param-fill {
    background: #fff;
}

/* card 94 la suta */

.rq-res-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #1f1f23;
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 12px;
    color: #e5e7eb;
    margin-bottom: 18px;
}

.rq-res-stat-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 9999px;
    background: var(--rq-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
}

.rq-res-stat-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.rq-res-stat-text {
    line-height: 1.4;
    flex: 1;
}

/* text plan intro */

.rq-plan-intro-text {
    margin: 10px 0 16px;
    font-size: 14px;
    color: #e5e7eb;
    text-align: center;
}

/* sectiune grafic in pagina de rezultate */

.rq-results-graph-section {
    margin-bottom: 22px;
}

/* lista beneficii */

.rq-benefits-section {
    margin-bottom: 22px;
}

.rq-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: #e5e7eb;
}

.rq-benefits-list li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 8px;
}

.rq-benefits-list li::before {
    content: "✓";
    font-size: 12px;
    color: var(--rq-primary);
    margin-top: 2px;
}

/* titluri sectiuni */

.rq-plan-section-title {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin: 4px 0 16px;
    color: #fff;
}

/* imagine barbat */

.rq-hero-man-section {
    margin: 24px 0;
}

.rq-hero-man-card {

    border-radius: 26px;
    overflow: hidden;
    padding: 10px;
}

.rq-hero-man-img {
    width: 100%;
    display: block;
    border-radius: 20px;
}

/* logo uri */

.rq-logos-section {
    margin-bottom: 26px;
}

.rq-logos-carousel {
    overflow: hidden;
    margin-top: 12px;
}

.rq-logos-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.rq-logos-track.dragging {
    cursor: grabbing;
}

.rq-logo-box-big {
    min-width: 90px;
    max-width: 170px;
    height: 85px;
    padding: 12px 0px;
    border-radius: 14px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rq-logo-box-big img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;

}

/* recenzii clienti pe pagina plan */

.rq-clients-section {
    margin-bottom: 26px;
}

.rq-clients-reviews {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.rq-review-card-long {
    margin-bottom: 12px;
}

/* wrapper pentru zona de alegere plan */

.rq-choose-wrapper {
    margin-top: 22px;
    margin-bottom: 26px;
}

.rq-choose-title {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}

.rq-plan-goals-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 26px;
    margin-bottom: 16px;
}

.rq-plan-goal {
    text-align: left;
}

.rq-plan-goal-label {
    color: #fb4b4b;
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.rq-plan-goal-icon {
    font-size: 16px;
    line-height: 1;
}

.rq-plan-goal-value {
    color: #f9fafb;
    font-size: 14px;
    font-weight: 500;
}

.rq-plan-goal-divider {
    width: 1px;
    height: 32px;
    background: rgba(148, 163, 184, 0.5);
    align-self: center;
}

.rq-choose-plans {
    margin-top: 8px;
}

.rq-plan-cta-wrapper {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

/* rating mare */

.rq-rating-section {
    margin-bottom: 26px;
}

.rq-rating-card {
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.12);
    background: radial-gradient(circle at top, #111827, #1f2937);
    padding: 18px 16px 20px;
    text-align: center;
}

.rq-rating-stars {
    font-size: 16px;
    color: #22c55e;
    margin-bottom: 4px;
}

.rq-rating-main {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 2px;
}

.rq-rating-sub {
    font-size: 12px;
    color: #e5e7eb;
}

/* garantie 30 de zile */

.rq-guarantee-section {
    margin-bottom: 26px;
}

.rq-guarantee-big {
    border-radius: 24px;
    border: 1px solid rgba(248,250,252,0.12);
    padding: 20px 18px 22px;
    background: #111827;
    text-align: center;
}

.rq-guarantee-icon {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--rq-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    margin: 0 auto 10px;
}

.rq-guarantee-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #f9fafb;
}

.rq-guarantee-text {
    font-size: 13px;
    color: #e5e7eb;
    margin: 0;
}

/* FAQ */

.rq-faq-section {
    margin-bottom: 40px;
}

.rq-faq-item {
    border-radius: 16px;
    background: #1a1a1d;
    border: 1px solid rgba(148,163,184,0.35);
    margin-bottom: 10px;
    overflow: hidden;
}

.rq-faq-item-header {
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f9fafb;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.rq-faq-arrow {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.rq-faq-item-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 14px;
    font-size: 13px;
    color: #e5e7eb;
    line-height: 1.45;
    transition: max-height 0.25s ease;
}

.rq-faq-item.open .rq-faq-item-body {
    padding-bottom: 12px;
}

.rq-faq-item.open .rq-faq-arrow {
    transform: rotate(180deg);
}

/* Upsell guarantee card */

.rq-guarantee-card {
    background: #1a1a1d;
    padding: 18px 16px;
    border-radius: 18px;
    margin-top: 20px;
    border: 1px solid var(--rq-border);
    text-align: left;
    font-size: 13px;
    color: #d1d5db;
}

/* Subscription note in checkout */

.rq-subscription-wrap{
    width:100%;
    max-width:430px;
    margin:0 auto;
}

.rq-subscription-note{
    margin-top:8px;
    font-size:10px;
    line-height:1.4;
    color:#9ca3af;
    text-align:left;
}

/* Payment security section */
.rq-payment-security {
    width: 100%;
    max-width: 430px;
    margin: 20px auto 0;
    text-align: center;
}

.rq-payment-security-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #e5e7eb;
    margin-bottom: 16px;
}

.rq-payment-security-icon {
    width: 24px;
    height: 24px;
    color: #10b981;
}

.rq-payment-cards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.rq-payment-card-logo {
    width: 50px;
    height: 32px;
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
}

.rq-payment-card-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.rq-avatar-circle,
.rq-review-card .rq-avatar {
    width:40px;
    height:40px;
    border-radius:9999px;
    background:#facc15;
    color:#000;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

.rq-rating-card{
    border:2px solid #f97316;
    border-radius:24px;
    padding:20px 32px;
    text-align:center;
    max-width:260px;
    margin:0 auto;
}
.rq-rating-stars-row{
    display:flex;
    justify-content:center;
    gap:8px;
    font-size:18px;
    color:#f97316;
    margin-bottom:8px;
}
.rq-rating-main{
    font-size:32px;
    font-weight:800;
    color:#fb923c;
    margin-bottom:4px;
}
.rq-rating-sub{
    font-size:14px;
    color:#e5e7eb;
}
.rq-what-list{
    list-style:none;
    padding:0;
    margin:0;
}
.rq-what-list li{
    position:relative;
    padding-left:32px;
    margin-bottom:10px;
    line-height:1.4;
}
.rq-what-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:4px;
    width:20px;
    height:20px;
    background-image:url(/pasi/iconite/list-mark.svg);
    background-size:contain;
    background-repeat:no-repeat;
}
.rq-logos-carousel{
    overflow:hidden;
    margin-top:12px;
}
.rq-logos-track{
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-behavior:smooth;
}
.rq-logos-track.dragging{
    cursor:grabbing;
}
.rq-guarantee-box{
    border:2px solid #f97316;
    border-radius:28px;
    padding:24px 20px 28px;
    text-align:center;
    max-width:360px;
    margin:0 auto;
}
.rq-guarantee-icon-wrap{
    width:40px;
    height:40px;
    border-radius:9999px;
    border:2px solid #fb923c;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 12px;
    color:#fb923c;
    font-size:20px;
}
.rq-guarantee-title{
    font-size:20px;
    font-weight:700;
    margin-bottom:10px;
    color:#f9fafb;
}
.rq-guarantee-text{
    font-size:14px;
    color:#e5e7eb;
    line-height:1.5;
}

.rq-checkout-header-results {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.rq-header-logo {
    flex-shrink: 0;
}















/* GRAPH SCREEN - Footer safe-area iPhone */
.rq-graph-footer-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 24px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 16px));
    background: linear-gradient(to top, #1a1a1d 80%, transparent);
    max-width: 430px;
    margin: 0 auto;
    z-index: 50;
}

@supports not (padding-bottom: env(safe-area-inset-bottom)) {
    .rq-graph-footer-btn {
        padding-bottom: 32px;
    }
}






/* Fix iOS Safari auto-zoom on inputs */
.relatio-runner-wrapper input,
.relatio-runner-wrapper textarea,
.relatio-runner-wrapper select {
    font-size: 16px !important;
}