/*
4681	Dashboard 2 - CSS Complete
admin2	Site Wide Header	3 October 2025 at 23:38		css	10
*/

/* ================================================
   DASHBOARD 2 - CSS COMPLET FINAL v15
   ================================================ */

/* Variables */
.db2-container {
    --db2-bg: #0F1422;
    --db2-panel: #111726;
    --db2-panel2: #0B0F18;
    --db2-border: #23283B;
    --db2-text: #E9ECF4;
    --db2-dim: #A8B0C2;
    --db2-gold: #D6B46C;
    --db2-gold2: #F6D773;
    --db2-cta: #FF6B3D;
    --db2-green: #4CAF50;
    --db2-red: #FF4D4D;
    --db2-radius: 14px;
    --db2-shadow: 0 12px 30px rgba(0,0,0,.22);
}

.db2-container {
    font-family: Inter, system-ui, -apple-system, sans-serif;
    color: var(--db2-text);
    line-height: 1.45;
}

.db2-container * {
    box-sizing: border-box;
}

/* ================================================
   MISSIONS SECTION - CENTRAT MOBILE
   ================================================ */
.db2-missions-section {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

/* Concursuri - stepper centrat */
.db2-contest-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.db2-contest-card h4 {
    text-align: center;
    margin-bottom: 12px;
}

.db2-stepper-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 12px 0;
}

.db2-stepper-label {
    text-align: center;
    width: 100%;
}

/* Buton "Plasează bilete" centrat */
.db2-contest-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 12px;
}

.db2-mission-item {
    background: var(--db2-panel);
    border: 1px solid var(--db2-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.db2-mission-item:hover {
    border-color: rgba(214, 180, 108, 0.3);
}

.db2-mission-item.completed {
    opacity: 0.7;
}

.db2-mission-full {
    grid-column: 1 / -1;
}

/* Mission Header - ALINIERE PERFECTĂ */
.db2-mission-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    cursor: pointer;
    transition: background 0.2s ease;
    min-height: 72px;
}

.db2-mission-header:hover {
    background: rgba(214, 180, 108, 0.05);
}

.db2-mission-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 1;
}

.db2-mission-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(214,180,108,.15), rgba(214,180,108,.05));
    border: 1px solid rgba(214,180,108,.3);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    flex-shrink: 0;
}

.db2-mission-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
}

.db2-mission-info h5 {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--db2-text);
    line-height: 1.3 !important;
}

.db2-mission-desc {
    font-size: 13px !important;
    color: var(--db2-dim);
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.db2-mission-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0;
}

.db2-ticket-reward {
    background: linear-gradient(135deg, rgba(255,107,61,.2), rgba(255,107,61,.1));
    border: 1px solid var(--db2-cta);
    color: var(--db2-cta);
    padding: 6px 12px !important;
    border-radius: 8px;
    font-weight: 700 !important;
    font-size: 13px !important;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    height: 32px !important;
}

.db2-status-badge {
    padding: 6px 12px !important;
    border-radius: 8px;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    height: 32px !important;
}

.db2-status-pending {
    background: rgba(255,107,61,.2);
    border: 1px solid var(--db2-cta);
    color: var(--db2-cta);
}

.db2-status-complete {
    background: rgba(76,175,80,.2);
    border: 1px solid var(--db2-green);
    color: var(--db2-green);
}

/* Badge mare pentru toate misiunile */
.db2-status-large {
    height: 36px !important;
    padding: 8px 16px !important;
    min-width: 120px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Mission Expand */
.db2-mission-expand {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: var(--db2-panel2);
    border-top: 1px solid var(--db2-border);
}

.db2-mission-expand.active {
    max-height: 2000px;
}

.db2-mission-expand-content {
    padding: 20px;
}



/* ================================================
   GRID LAYOUT 3 COLOANE
   ================================================ */
.db2-mission-grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr 140px;
    gap: 16px;
    align-items: end;
    margin-bottom: 16px;
}

.db2-grid-input {
    display: flex;
    flex-direction: column;
}

.db2-grid-text {
    display: flex;
    align-items: center;
    padding: 0 8px;
    padding-top: 24px;
}

.db2-grid-button {
    display: flex;
    align-items: center;
}

.db2-grid-button .db2-btn {
    min-width: 140px;
    white-space: nowrap;
}

.db2-info-text {
    color: var(--db2-dim);
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}

.db2-inline-message {
    margin-top: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* EMAIL GRID - CENTRAT MOBILE */
.db2-email-grid {
    display: grid !important;
    grid-template-columns: auto 1fr 140px !important;
    gap: 20px !important;
    align-items: center !important;
}

.db2-email-field-short {
    min-width: 280px !important;
    max-width: 450px !important;
    width: 100% !important;
}

.db2-email-field-short .db2-form-input {
    width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db2-email-text-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 !important;
}

.db2-email-text-center .db2-info-text {
    margin: 0 !important;
}

.db2-email-grid .db2-btn,
.db2-email-grid .db2-btn-disabled {
    min-width: 140px !important;
    width: 140px !important;
    height: 32px !important;
    padding: 6px 12px !important;
    justify-self: end !important;
}

/* Mission Header Email - layout nou 3 zone */
.db2-mission-header-email {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px !important;
    gap: 16px !important;
    min-height: 80px;
}

.db2-mission-header-email .db2-mission-left {
    flex: 0 0 auto;
}

.db2-mission-header-email .db2-mission-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex: 1;
}

.db2-mission-header-email .db2-mission-right {
    flex: 0 0 auto;
    min-width: 120px;
}

/* PHONE GRID */
.db2-phone-grid {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 16px !important;
}

.db2-phone-field-short {
    min-width: 280px !important;
    max-width: 350px !important;
    width: 100% !important;
}

.db2-phone-text-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 !important;
    padding-left: 30px !important;
}

.db2-phone-grid .db2-btn {
    min-width: 140px !important;
    width: 140px !important;
    height: 32px !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
}

#db2-phone-step2 {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #23283B;
}

.db2-referral-row {
    padding: 14px;
    background: rgba(15, 20, 34, 0.4);
    border-radius: 8px;
    margin-bottom: 12px;
}

.db2-referral-row:last-child {
    margin-bottom: 0;
}

.db2-referral-row .db2-mission-grid {
    margin-bottom: 0;
}

.db2-referral-status {
    font-weight: 600;
}

/* ================================================
   MARKETING - FIX OVERLAP TEXT
   ================================================ */
.db2-marketing-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.db2-marketing-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 2;
}

.db2-marketing-right {
    display: flex;
    justify-content: flex-start;
    position: relative;
    z-index: 2;
}

.db2-marketing-right .db2-btn {
    min-width: 180px;
}

.db2-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    position: relative;
    z-index: 3;
    margin-bottom: 8px;
}

.db2-checkbox-wrapper input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    cursor: pointer;
    margin: 2px 0 0 0;
    accent-color: var(--db2-gold);
}

.db2-checkbox-label {
    color: var(--db2-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
}

.db2-marketing-terms {
    max-height: 180px;
    overflow-y: auto;
    padding: 16px;
    background: var(--db2-panel2);
    border: 1px solid var(--db2-border);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--db2-dim);
    margin-top: 12px;
    position: relative;
    z-index: 1;
}

.db2-marketing-terms h6 {
    color: var(--db2-gold2);
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 12px;
}

.db2-marketing-terms ul {
    margin: 12px 0;
    padding-left: 20px;
}

.db2-marketing-terms li {
    margin-bottom: 8px;
}

.db2-marketing-terms a {
    color: var(--db2-gold);
    text-decoration: underline;
}

.db2-marketing-terms::-webkit-scrollbar {
    width: 6px;
}

.db2-marketing-terms::-webkit-scrollbar-track {
    background: var(--db2-panel);
    border-radius: 3px;
}

.db2-marketing-terms::-webkit-scrollbar-thumb {
    background: var(--db2-gold);
    border-radius: 3px;
}

/* ================================================
   DATE PERSONALE - LAYOUT 2 RANDURI IDENTICE
   ================================================ */
.db2-personal-warning {
    background: rgba(214, 180, 108, 0.1);
    border: 1px solid rgba(214, 180, 108, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.db2-warning-icon {
    font-size: 24px;
    flex-shrink: 0;
    line-height: 1;
}

.db2-personal-warning p {
    color: #E9ECF4;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.db2-warning-link {
    color: #D6B46C;
    text-decoration: underline;
}

.db2-section-subtitle {
    color: #D6B46C;
    font-size: 15px;
    font-weight: 700;
    margin: 24px 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* LINIA 1: Grid cu 5 coloane - Prenume | Nume | Zi | Lună | An */
.db2-personal-full-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 80px 140px 100px !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    align-items: flex-end !important;
}

/* Asigură că toate câmpurile rămân în flow normal */
.db2-personal-full-row > .db2-form-field {
    grid-column: auto !important;
}

/* Calendar button - după An */
.db2-personal-full-row > .db2-calendar-wrapper {
    grid-column: auto !important;
    width: 44px !important;
}

/* LINIA 2: Țară + Județ + Localitate (3 coloane egale) */
.db2-address-full-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    align-items: flex-end !important;
}

.db2-calendar-wrapper {
    display: flex !important;
    align-items: flex-end !important;
}

.db2-calendar-btn {
    width: 44px !important;
    height: 44px !important;
    background: linear-gradient(135deg, #111726, #1a1f35) !important;
    border: 1px solid #23283B !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.2s ease;
}

.db2-calendar-btn:hover {
    border-color: #D6B46C !important;
    background: rgba(214, 180, 108, 0.1) !important;
    transform: translateY(-2px);
}

.db2-calendar-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #D6B46C !important;
    stroke-width: 2 !important;
    fill: none !important;
}

/* ================================================
   FORMS
   ================================================ */
.db2-form-field {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.db2-form-group {
    margin-bottom: 0;
}

.db2-form-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--db2-dim);
    margin-bottom: 6px;
}

.db2-form-input,
.db2-form-select {
    width: 100%;
    padding: 10px 14px;
    background: #111726 !important;
    border: 1px solid #23283B !important;
    border-radius: 10px !important;
    color: #E9ECF4 !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease;
    min-height: 42px;
}

.db2-form-input:focus,
.db2-form-select:focus {
    outline: none;
    border-color: #D6B46C !important;
    box-shadow: 0 0 0 3px rgba(214, 180, 108, 0.1);
}

.db2-form-input:disabled,
.db2-form-select:disabled {
    background: rgba(35, 40, 59, 0.5) !important;
    cursor: default !important;
    opacity: 0.7 !important;
}

.db2-form-input::placeholder {
    color: rgba(168, 176, 194, 0.5) !important;
}

.db2-form-input:read-only {
    opacity: 0.7;
    cursor: not-allowed;
    background: #0A0E18 !important;
}

.db2-form-input.invalid {
    border-color: #FF6B3D !important;
    background: rgba(255, 107, 61, 0.05) !important;
}

.db2-form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23D6B46C' d='M1.41 0L6 4.59L10.59 0L12 1.41l-6 6l-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.db2-field-error {
    color: #FF6B3D;
    font-size: 12px;
    font-weight: 500;
    margin-top: 4px;
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.db2-field-error.active {
    display: block;
    opacity: 1;
}

.db2-form-row {
    display: grid;
    gap: 12px;
    margin-bottom: 0;
}

.db2-form-row.db2-two {
    grid-template-columns: 1fr 1fr;
}

.db2-form-row.db2-city-postal {
    grid-template-columns: 2fr 1fr;
}

/* ================================================
   BUTTONS
   ================================================ */
.db2-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    padding: 10px 16px !important;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px !important;
    text-decoration: none;
    text-align: center !important;
    line-height: 1.2 !important;
    min-height: 42px !important;
}

.db2-btn-cta {
    background: var(--db2-cta);
    color: #fff;
}

.db2-btn-cta:hover {
    background: #ff7e52;
    transform: translateY(-2px);
}

.db2-btn-gold {
    background: linear-gradient(135deg, var(--db2-gold), var(--db2-gold2));
    color: #141414;
}

.db2-btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(214,180,108,.4);
}

.db2-btn:disabled,
.db2-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.db2-btn:disabled:hover,
.db2-btn[disabled]:hover {
    transform: none;
    box-shadow: none;
}

.db2-btn-disabled {
    background: #23283B !important;
    color: #A8B0C2 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
    border: 1px solid var(--db2-border) !important;
    min-width: 120px !important;
}

.db2-btn-disabled:hover {
    background: #23283B !important;
    transform: none !important;
}

.db2-btn-pending {
    background: rgba(246, 215, 115, 0.2) !important;
    border: 1px solid var(--db2-gold) !important;
    color: var(--db2-gold) !important;
    cursor: default !important;
    min-width: 140px !important;
}

.db2-btn-confirmed {
    background: rgba(76, 175, 80, 0.2) !important;
    border: 1px solid var(--db2-green) !important;
    color: var(--db2-green) !important;
    cursor: default !important;
    min-width: 140px !important;
}

.db2-btn-full {
    width: auto;
    min-width: 200px;
    align-self: flex-start;
}

.db2-btn-dual-state {
    background: linear-gradient(135deg, #D6B46C, #F6D773) !important;
    color: #000 !important;
    font-weight: 700 !important;
    min-width: 200px !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
}

.db2-btn-dual-state:hover {
    transform: translateY(-2px) !important;
}

.db2-btn-dual-state.edit-mode {
    background: linear-gradient(135deg, #23283B, #2d3348) !important;
    color: #D6B46C !important;
    border: 1px solid #D6B46C !important;
}

.db2-button-container {
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
}

/* Butoane Marketing */
.db2-btn-marketing {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    padding: 10px 20px !important;
    border-radius: 8px;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px !important;
    min-height: 42px !important;
    border: none;
}

.db2-btn-marketing-disabled,
.db2-btn-marketing:not(.db2-btn-marketing-active):not(.db2-btn-marketing-revoke) {
    background: #23283B !important;
    color: #6B7394 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
    border: 1px solid var(--db2-border) !important;
}

.db2-btn-marketing-disabled:hover {
    transform: none !important;
}

.db2-btn-marketing-active {
    background: linear-gradient(135deg, #D6B46C, #F6D773) !important;
    color: #141414 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(214, 180, 108, 0.3) !important;
}

.db2-btn-marketing-active:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(214, 180, 108, 0.4) !important;
}

.db2-btn-marketing-revoke {
    background: rgba(255, 77, 77, 0.2) !important;
    color: #FF4D4D !important;
    border: 1px solid #FF4D4D !important;
    cursor: pointer !important;
}

.db2-btn-marketing-revoke:hover {
    background: rgba(255, 77, 77, 0.3) !important;
    transform: translateY(-2px) !important;
}

.db2-btn-marketing-revoke::before {
    content: "⚠️ ";
    margin-right: 4px;
}

/* Butoane OTP */
.db2-btn-waiting {
    background: #6B7394 !important;
    color: #E9ECF4 !important;
    border: 1px solid #6B7394 !important;
    cursor: not-allowed !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
}

.db2-btn-blocked {
    background: #FF6B3D !important;
    color: #FFFFFF !important;
    border: 1px solid #FF6B3D !important;
    cursor: not-allowed !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(255, 107, 61, 0.3) !important;
}

.db2-btn-change {
    background: transparent !important;
    color: #FF6B3D !important;
    border: 1px solid #FF6B3D !important;
    cursor: pointer !important;
    font-weight: 700 !important;
}

.db2-btn-change:hover {
    background: rgba(255, 107, 61, 0.1) !important;
}

.db2-btn-phone {
    min-width: 140px !important;
    width: 140px !important;
    height: 32px !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
    font-size: 13px !important;
}

/* ================================================
   WALLET SECTION - FIX KPI ALIGNMENT
   ================================================ */
.db2-wallet-section {
    margin-top: 24px;
}

.db2-kpi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.db2-kpi-box {
    border: 1px solid var(--db2-border);
    border-radius: 12px;
    background: var(--db2-panel);
    padding: 16px 12px;
    text-align: center;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.db2-kpi-box:hover {
    border-color: rgba(214,180,108,.3);
    transform: translateY(-2px);
}

.db2-kpi-tag {
    font-size: 12px;
    color: var(--db2-dim);
    margin-bottom: 8px;
    line-height: 1.3;
}

.db2-kpi-val {
    font-size: 24px;
    font-weight: 900;
    color: var(--db2-gold);
    line-height: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.db2-section-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--db2-gold);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.db2-transaction-log {
    display: grid;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.db2-transaction {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--db2-panel);
    border: 1px solid var(--db2-border);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.db2-transaction:hover {
    border-color: rgba(214,180,108,.3);
}

.db2-transaction-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.db2-transaction-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    flex-shrink: 0;
}

.db2-transaction-icon.db2-in {
    background: rgba(76,175,80,.15);
    color: var(--db2-green);
}

.db2-transaction-icon.db2-out {
    background: rgba(255,77,77,.15);
    color: var(--db2-red);
}

.db2-transaction-info {
    font-size: 13px;
    color: var(--db2-text);
}

.db2-transaction-date {
    color: var(--db2-dim);
    font-size: 11px;
    margin-top: 2px;
}

.db2-transaction-amount {
    font-weight: 800;
    font-size: 15px;
}

.db2-transaction-amount.db2-in {
    color: var(--db2-green);
}

.db2-transaction-amount.db2-out {
    color: var(--db2-red);
}

.db2-transaction-log::-webkit-scrollbar {
    width: 8px;
}

.db2-transaction-log::-webkit-scrollbar-track {
    background: var(--db2-panel);
    border-radius: 4px;
}

.db2-transaction-log::-webkit-scrollbar-thumb {
    background: var(--db2-gold);
    border-radius: 4px;
}

/* ================================================
   FIX CAROUSEL - IMAGINI UNIFORME
   ================================================ */
.odr-lottery-card img,
.elementor-widget-container img {
    width: 100%;
    height: 280px;
    object-fit: contain;
    object-position: center;
}

.odr-lottery-image-wrapper,
.elementor-image img {
    width: 100%;
    height: 280px;
    object-fit: contain;
    display: block;
}

.odr-lottery-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 500px;
}

.odr-lottery-card .elementor-widget-wrap > .elementor-element:first-child {
    height: 280px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1f2e;
}

/* ================================================
   FIX ACORDEON - CLEAN (Desktop + Mobile)
   ================================================ */
.cuco-acc .elementor-accordion-item,
.elementor-accordion-item {
    background: #0B0E19 !important;
    border: 1px solid rgba(214, 180, 108, 0.3) !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.2s ease !important;
}

.cuco-acc .elementor-accordion-item:hover,
.elementor-accordion-item:hover {
    border-color: rgba(214, 180, 108, 0.5) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.cuco-acc .elementor-tab-title,
.elementor-tab-title {
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    padding: 20px 24px !important;
}

.cuco-acc .elementor-tab-content,
.elementor-tab-content {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(214, 180, 108, 0.2) !important;
    padding: 0 !important;
}

/* Mission Header - styling uniform pentru TOATE misiunile */
.db2-mission-header,
.db2-mission-header-new {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px !important;
    cursor: pointer;
    transition: background 0.2s ease;
    min-height: 80px;
    gap: 24px !important;
}

.db2-mission-header:hover,
.db2-mission-header-new:hover {
    background: rgba(214, 180, 108, 0.05);
}

.db2-mission-header:active,
.db2-mission-header-new:active {
    background: rgba(214, 180, 108, 0.08);
}

.db2-mission-left {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 0 0 auto !important;
}

.db2-mission-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(214,180,108,.15), rgba(214,180,108,.05));
    border: 1px solid rgba(214,180,108,.3);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    flex-shrink: 0;
}

.db2-mission-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
}

.db2-mission-info h5 {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--db2-text);
    line-height: 1.3 !important;
}

.db2-mission-desc {
    font-size: 13px !important;
    color: var(--db2-dim);
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* Zona centru pentru Email Mission - ocupă spațiul dintre stânga și dreapta */
.db2-mission-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    padding: 0 20px !important;
}

.db2-mission-reward-text {
    font-size: 13px !important;
    color: var(--db2-dim) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

.db2-ticket-display {
    background: linear-gradient(135deg, #4CAF50, #66BB6A) !important;
    color: #fff !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    height: 32px !important;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.25) !important;
    cursor: default !important;
    pointer-events: none !important;
}

.db2-mission-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto !important;
}

/* ================================================
   RESPONSIVE - TABLET
   ================================================ */
@media (max-width: 980px) {
    .db2-kpi {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}
@media (max-width: 768px) {
    .elementor-element-5266191b {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        padding: 0 10px !important;
        align-items: center !important;
    }

    .elementor-element-6699873a .cuco-wallet-chip,
    .elementor-element-6f00b40c .elementor-button {
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .elementor-element-6f00b40c .elementor-button {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .elementor-element-6f00b40c .elementor-button:hover {
        transform: none !important;
    }
}

/* ================================================
   RESPONSIVE - MOBILE ULTRA-SPECIFIC FIX
   ================================================ */
@media (max-width: 768px) {
    /* ====== CONTAINER GLOBAL - LĂȚIME UNIFORMĂ ====== */
    .db2-container,
    #cucoDash,
    .db2-mission-expand-content,
    .elementor-accordion .elementor-tab-content {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Padding uniform 20px lateral pentru TOATE secțiunile */
    .db2-mission-expand-content,
    .elementor-tab-content > * {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* ====== HERO SECTION ====== */
    #cucoDash .title,
    .db2-container > .title {
        margin: 8px 0 16px !important;
        text-align: center !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 0 20px !important;
    }

    #cucoDash .title h1 {
        font-size: 24px !important;
        text-align: center !important;
        width: 100% !important;
    }

    .cuco-wallet-chip {
        margin: 0 auto !important;
        justify-content: center !important;
        display: flex !important;
    }

    /* ====== ACORDEON SPACING ====== */
    .cuco-acc .elementor-accordion-item,
    .elementor-accordion-item {
        margin-bottom: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .db2-mission-header {
        padding: 20px !important;
        min-height: auto !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }

    .db2-mission-left {
        width: 100% !important;
        justify-content: center !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .db2-mission-info {
        text-align: center !important;
        align-items: center !important;
    }

    .db2-mission-info h5,
    .db2-mission-desc {
        text-align: center !important;
    }

    .db2-mission-right {
        width: 100% !important;
        justify-content: center !important;
        padding-left: 0 !important;
    }

    /* ====== CONCURSURI - FORȚAT CENTRAT ====== */
    .db2-contest-card,
    .card.contest {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px !important;
    }

    .db2-contest-card h4,
    .card.contest h4 {
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto 12px !important;
    }

    .db2-contest-card .badges,
    .card.contest .badges {
        justify-content: center !important;
        width: 100% !important;
    }

    /* Stepper - CENTRAT TOTAL */
    .stepper-row,
    .db2-stepper-row,
    .dash-stepper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        margin: 12px auto !important;
    }

    .stepper-row > *,
    .db2-stepper-row > * {
        margin: 4px auto !important;
        text-align: center !important;
    }

    .stepper {
        margin: 0 auto !important;
    }

    /* Label stepper */
    .stepper-row span,
    .db2-stepper-row span,
    .stepper-label {
        text-align: center !important;
        width: 100% !important;
        display: block !important;
    }

    /* Buton "Alocă bilete" / "Plasează bilete" */
    .db2-contest-actions,
    .card.contest .btn-row,
    .contest-btn-row {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: 12px !important;
    }

    .db2-contest-actions .db2-btn,
    .card.contest .btn,
    .contest-btn-row .btn {
        margin: 0 auto !important;
        display: block !important;
    }

    /* ====== EMAIL MISSION - CENTRAT COMPLET ====== */
    .db2-mission-header-email {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
        padding: 20px !important;
    }

    .db2-mission-header-email .db2-mission-left,
    .db2-mission-header-email .db2-mission-center,
    .db2-mission-header-email .db2-mission-right {
        width: 100% !important;
        justify-content: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .db2-mission-center {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
    }

    .db2-mission-reward-text {
        text-align: center !important;
        width: 100% !important;
    }

    .db2-ticket-display {
        margin: 0 auto !important;
    }

    /* Email Grid - VERTICAL CENTRAT */
    .db2-email-grid,
    .db2-phone-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .db2-email-field-short,
    .db2-phone-field-short {
        width: 100% !important;
        max-width: calc(100% - 40px) !important;
        min-width: auto !important;
        margin: 0 20px !important;
    }

    .db2-email-field-short .db2-form-input,
    .db2-phone-field-short .db2-form-input {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .db2-email-text-center,
    .db2-phone-text-center {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 0 20px !important;
    }

    .db2-email-text-center .db2-info-text,
    .db2-phone-text-center .db2-info-text {
        text-align: center !important;
        width: 100% !important;
    }

    .db2-email-grid .db2-btn,
    .db2-email-grid .db2-btn-disabled,
    .db2-phone-grid .db2-btn,
    .db2-btn-phone {
        width: calc(100% - 40px) !important;
        min-width: auto !important;
        max-width: calc(100% - 40px) !important;
        margin: 0 20px !important;
    }

    /* Step 2 OTP */
    #db2-phone-step2 {
        padding: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #db2-phone-step2 .db2-mission-grid {
        width: 100% !important;
    }

    /* ====== DATE PERSONALE - LĂȚIME UNIFORMĂ ====== */
    .db2-personal-warning {
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
        margin: 0 20px 20px 20px !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }

    .db2-section-subtitle {
        width: calc(100% - 40px) !important;
        margin: 24px 20px 16px 20px !important;
        text-align: center !important;
    }

    .db2-personal-full-row,
    .db2-address-full-row {
        width: calc(100% - 40px) !important;
        margin: 0 20px 16px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        box-sizing: border-box !important;
    }

    .db2-personal-full-row > .db2-form-field,
    .db2-address-full-row > .db2-form-field,
    .db2-form-group {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .db2-form-input,
    .db2-form-select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .db2-calendar-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: stretch !important;
    }

    .db2-calendar-btn {
        width: 100% !important;
        max-width: 100% !important;
    }

    .db2-form-row.db2-two,
    .db2-form-row.db2-city-postal {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .db2-button-container {
        width: calc(100% - 40px) !important;
        margin: 20px 20px !important;
        display: flex !important;
        justify-content: center !important;
    }

    .db2-btn-dual-state,
    .db2-btn-full {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ====== MARKETING - FIX OVERLAP + CENTRAT ====== */
    .db2-marketing-container {
        width: calc(100% - 40px) !important;
        margin: 0 20px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .db2-checkbox-wrapper {
        margin-bottom: 12px !important;
        width: 100% !important;
    }

    .db2-marketing-terms {
        width: 100% !important;
        margin-top: 16px !important;
        box-sizing: border-box !important;
    }

    .db2-marketing-right {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .db2-marketing-right .db2-btn,
    .db2-btn-marketing {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ====== KPI PORTOFEL - ALINIERE CIFRE ====== */
    .db2-kpi {
        width: calc(100% - 40px) !important;
        margin: 0 20px 24px 20px !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .db2-kpi-box {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 14px 10px !important;
    }

    .db2-kpi-tag {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }

    .db2-kpi-val {
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        align-items: baseline !important;
        justify-content: center !important;
        font-size: 22px !important;
        line-height: 1 !important;
    }

    /* ====== WALLET SECTION - LĂȚIME UNIFORMĂ ====== */
    .db2-wallet-section {
        width: 100% !important;
        padding: 0 !important;
    }

    .db2-section-title {
        width: calc(100% - 40px) !important;
        margin: 0 20px 16px 20px !important;
        text-align: center !important;
    }

    .db2-transaction-log {
        width: calc(100% - 40px) !important;
        margin: 0 20px !important;
        padding: 0 !important;
    }

    .db2-transaction {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ====== MISSION GRIDS - VERTICAL STACK ====== */
    .db2-mission-grid {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .db2-grid-button .db2-btn {
        width: 100% !important;
    }

    /* ====== REFERRAL ROWS ====== */
    .db2-referral-row {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ====== STATUS BADGES ====== */
    .db2-status-large {
        height: 32px !important;
        padding: 6px 12px !important;
        min-width: 100px !important;
        font-size: 12px !important;
    }

    /* ====== FORM LABELS & INPUTS ====== */
    .db2-form-label {
        font-size: 15px !important;
        margin-bottom: 8px !important;
    }

    .db2-form-input,
    .db2-form-select,
    .db2-info-text {
        font-size: 15px !important;
        min-height: 44px !important;
    }

    .db2-personal-warning p {
        font-size: 15px !important;
    }

    /* ====== CAROUSEL FIX ====== */
    .odr-lottery-card img {
        height: 200px !important;
    }
}
.db2-form-field:has(#db2-birthDay) .db2-form-label {
    white-space: nowrap;
}
/* ==========================================
   REFERRAL SYSTEM - POPUP & MODAL STYLES
   ========================================== */

/* Badge dinamic pentru referral - devine verde când ai prieteni */
#db2-referral-badge.db2-has-referrals {
    background: linear-gradient(135deg, #4CAF50, #66BB6A) !important;
    color: #FFFFFF !important;
    border-color: #4CAF50 !important;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

/* Modal Overlay */
.db2-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    z-index: 9998;
    animation: db2-fadeIn 0.2s ease;
}

/* Modal Popup */
.db2-modal-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1A1F2E;
    border: 2px solid #23283B;
    border-radius: 16px;
    max-width: 560px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    z-index: 9999;
    animation: db2-slideUp 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Modal Header */
.db2-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #23283B;
}

.db2-modal-header h4 {
    color: #E9ECF4;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.db2-modal-close {
    background: none;
    border: none;
    color: #A8B0C2;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.db2-modal-close:hover {
    color: #E9ECF4;
}

/* Modal Body */
.db2-modal-body {
    padding: 24px;
}

.db2-modal-body > p:first-child {
    color: #A8B0C2;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 22px;
}

/* Modal Footer */
.db2-modal-footer {
    padding: 16px 24px 22px;
    border-top: 1px solid #23283B;
    display: flex;
    justify-content: center;
    align-items: center;
}

.db2-modal-footer .db2-btn-ghost {
    background: transparent !important;
    color: #A8B0C2 !important;
    border: none !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    min-height: auto !important;
    transition: color 0.2s ease;
}

.db2-modal-footer .db2-btn-ghost:hover {
    color: #E9ECF4 !important;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ==========================================
   ELIGIBILITY ITEMS - POPUP VERIFICARE
   ========================================== */

/* Eligibility Item */
.db2-eligibility-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 18px 20px;
    background: #0F1422;
    border: 1px solid #23283B;
    border-radius: 12px;
    margin-bottom: 14px;
}

.db2-eligibility-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.db2-eligibility-icon {
    font-size: 24px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(214, 180, 108, 0.12);
    border-radius: 10px;
}

.db2-eligibility-item h5 {
    color: #E9ECF4;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.db2-eligibility-desc {
    color: #A8B0C2;
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
}

/* Butoane Eligibility - Gold Cucurigoo */
.db2-eligibility-item .db2-btn-primary {
    background: linear-gradient(135deg, #D6B46C, #F6D773) !important;
    color: #000000 !important;
    font-weight: 800 !important;
    padding: 11px 22px !important;
    border-radius: 10px !important;
    border: 1px solid #D6B46C !important;
    font-size: 14px !important;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 160px;
    box-shadow: 0 3px 0 rgba(214, 180, 108, 0.3);
    transition: all 0.2s ease;
}

.db2-eligibility-item .db2-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(214, 180, 108, 0.4);
}

.db2-eligibility-item .db2-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(214, 180, 108, 0.3);
}

/* Status completat */
.db2-eligibility-item.db2-completed {
    border-color: rgba(76, 175, 80, 0.4);
    background: rgba(76, 175, 80, 0.08);
}

.db2-eligibility-item.db2-completed .db2-eligibility-icon {
    background: rgba(76, 175, 80, 0.18);
    color: #4CAF50;
}

/* Buton confirmat (verde, inactiv) */
.db2-btn-confirmed {
    background: #4CAF50 !important;
    color: #FFFFFF !important;
    cursor: default !important;
    pointer-events: none;
    border: 1px solid #4CAF50 !important;
    box-shadow: none !important;
}

.db2-btn-confirmed:hover {
    background: #4CAF50 !important;
    transform: none !important;
}

/* ==========================================
   REFERRAL MISSION - SHARE BUTTONS
   ========================================== */

/* Share Buttons Container */
.db2-share-buttons {
    margin-top: 24px;
    padding: 20px;
    background: #0F1422;
    border: 1px solid #23283B;
    border-radius: 12px;
}

/* Share Button Base */
.db2-btn-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
}

/* WhatsApp */
.db2-btn-whatsapp {
    background: #25D366;
    color: #FFFFFF;
}
.db2-btn-whatsapp:hover {
    background: #1FB854;
    transform: translateY(-2px);
}

/* Gmail */
.db2-btn-gmail {
    background: #EA4335;
    color: #FFFFFF;
}
.db2-btn-gmail:hover {
    background: #D93025;
    transform: translateY(-2px);
}

/* Messenger */
.db2-btn-messenger {
    background: #0084FF;
    color: #FFFFFF;
}
.db2-btn-messenger:hover {
    background: #0073E6;
    transform: translateY(-2px);
}

/* Telegram */
.db2-btn-telegram {
    background: #0088CC;
    color: #FFFFFF;
}
.db2-btn-telegram:hover {
    background: #0077B5;
    transform: translateY(-2px);
}

/* Email Generic */
.db2-btn-email {
    background: #5A6C7D;
    color: #FFFFFF;
}
.db2-btn-email:hover {
    background: #4A5C6D;
    transform: translateY(-2px);
}

/* SMS */
.db2-btn-sms {
    background: #34B7F1;
    color: #FFFFFF;
}
.db2-btn-sms:hover {
    background: #2AA2D7;
    transform: translateY(-2px);
}

/* ==========================================
   REFERRAL CODE & STATS SECTIONS
   ========================================== */

/* Referral Code Section */
.db2-referral-code-section {
    margin: 20px 0;
    padding: 20px;
    background: #0F1422;
    border: 1px solid #23283B;
    border-radius: 12px;
}

.db2-referral-code-box {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Referral Stats */
.db2-referral-stats {
    margin-top: 24px;
    padding: 20px;
    background: #0F1422;
    border: 1px solid #23283B;
    border-radius: 12px;
}

.db2-referral-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.db2-referral-friend {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #1A1F2E;
    border: 1px solid #23283B;
    border-radius: 8px;
}

.db2-referral-friend.db2-ref-completed {
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.05);
}

.db2-friend-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #D6B46C, #D4A017);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    font-weight: 700;
    font-size: 18px;
}

.db2-friend-info h6 {
    color: #E9ECF4;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.db2-friend-date {
    color: #A8B0C2;
    font-size: 12px;
    margin: 0 0 4px 0;
}

.db2-friend-status {
    color: #D6B46C;
    font-size: 12px;
    font-weight: 600;
    margin: 0;
}

.db2-ref-completed .db2-friend-status {
    color: #4CAF50;
}

/* Info Box */
.db2-referral-info-box {
    padding: 16px;
    background: #0F1422;
    border: 1px solid #23283B;
    border-left: 4px solid #D6B46C;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* ==========================================
   ANIMATIONS
   ========================================== */

@keyframes db2-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes db2-slideUp {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 640px) {
    .db2-modal-popup {
        width: 95%;
        max-height: 90vh;
    }

    .db2-eligibility-item {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .db2-eligibility-info {
        flex-direction: row;
        align-items: center;
    }

    .db2-eligibility-item .db2-btn-primary {
        width: 100%;
        min-width: auto;
    }

    .db2-share-buttons > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .db2-btn-share {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .db2-eligibility-item h5 {
        font-size: 14px;
    }

    .db2-eligibility-desc {
        font-size: 12px;
    }

    .db2-eligibility-item .db2-btn-primary {
        font-size: 13px !important;
        padding: 10px 18px !important;
    }
}
/* 🔧 Fix distanță subtitlu "Prenume și nume*" față de câmpuri */
#db2-mission-personal .db2-personal-warning + .db2-section-subtitle {
    margin-top: 0 !important;
}
/* === FIX definitiv distanță "Prenume și nume*" === */
#db2-mission-personal .db2-section-subtitle {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}
#db2-mission-personal .db2-personal-warning + .db2-section-subtitle {
    margin-top: 0 !important;
}
#db2-mission-personal .db2-row-identity {
    margin-top: 0 !important;
}
/* dacă ceva mai adaugă spațiu între subtitlu și rândul cu câmpurile */
#db2-mission-personal .db2-mission-expand-content > * + .db2-row-identity {
    margin-top: 0 !important;
}
/* ==== FIX gap "Prenume și nume*" (vinovat: .db2-personal-warning) ==== */
#db2-mission-personal .db2-personal-warning {
    margin-top: 0 !important;
    margin-bottom: 8px !important;   /* scade distanța sub boxul de avertisment */
}
#db2-mission-personal .db2-personal-warning p {
    margin: 0 !important;            /* elimină marjele interne care mai lărgesc spațiul */
}
#db2-mission-personal .db2-personal-warning + .db2-section-subtitle {
    margin-top: 0 !important;        /* subtitlul nu mai adaugă gap suplimentar */
}
#db2-mission-personal .db2-section-subtitle {
    margin-bottom: 8px !important;   /* uniform cu restul */
}
#db2-mission-personal .db2-row-identity {
    margin-top: 0 !important;        /* zero spațiu între subtitlu și primul rând de câmpuri */
}
/* === DB2 Personal — Spacing Normalizer (final) === */
/* 1) Box-ul de avertisment: reduce gap-ul */
#db2-mission-personal .db2-personal-warning{
    margin: 12px 0 12px 0 !important;
}

/* 2) Subtitlurile: aceeași distanță peste tot (desktop) */
#db2-mission-personal .db2-mission-expand-content .db2-section-subtitle{
    margin: 12px 0 8px 0 !important;
    text-align: left !important;
}

/* 3) Rândul cu Prenume/Nume/Data: aliniază sus și nu lăsa spațiu suplimentar */
#db2-mission-personal .db2-personal-full-row{
    align-items: start !important;
    margin-top: 0 !important;
}
#db2-mission-personal .db2-section-subtitle + .db2-personal-full-row{
    margin-top: 0 !important;
}

/* 4) “Data nașterii”: caption mai strâns + selecturile nu se împrăștie vizual */
#db2-mission-personal .db2-birth-group .db2-field-caption{
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
}
#db2-mission-personal .db2-birth-inline{
    gap: 10px !important;
}

/* 5) Rândul cu Țară/Județ/Localitate: aliniază sus, nu la baseline */
#db2-mission-personal .db2-address-full-row{
    align-items: start !important;
    margin-top: 0 !important;
}

/* 6) Pe mobil bate și regulile cu !important din media queries */
@media (max-width: 768px){
    #db2-mission-personal .db2-mission-expand-content .db2-section-subtitle{
        margin: 12px 20px 8px 20px !important;
        text-align: left !important;
    }
}
/* === Fix "Data nașterii" (HTML cu o singură coloană) === */
#db2-mission-personal .db2-personal-full-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important; /* 3 coloane reale: Prenume | Nume | Data nasterii */
    gap: 12px !important;
    align-items: end !important; /* aliniere pe baza câmpurilor */
    margin-top: 0 !important;
}

/* coloana "Data nașterii" ocupă doar a treia coloană, intern e pe două rânduri: caption + selecturi inline */
#db2-mission-personal .db2-birth-group{
    grid-column: 3 / span 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: end !important;
}

/* caption compact și la aceeași bază vizuală */
#db2-mission-personal .db2-birth-group .db2-field-caption{
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
}

/* selecturile stau pe un singur rând, spațiere uniformă */
#db2-mission-personal .db2-birth-inline{
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

/* lățimi decente pentru zi/lună/an (fără să rupă layout-ul) */
#db2-mission-personal #db2-birthDay{ width:72px !important; }
#db2-mission-personal #db2-birthMonth{ min-width:120px !important; }
#db2-mission-personal #db2-birthYear{ width:90px !important; }

/* spațiu uniform sub subtitluri și între rânduri */
#db2-mission-personal .db2-mission-expand-content .db2-section-subtitle{
    margin: 12px 0 8px 0 !important;
}
#db2-mission-personal .db2-address-full-row{
    margin-top: 12px !important;
    align-items: end !important;
}
/* === FINAL PATCH — aliniere perfectă fără să mute "Prenume și nume*" === */

/* rândul cu Prenume | Nume | Data nașterii = 3 coloane fixe */
#db2-mission-personal .db2-personal-full-row{
    display:grid !important;
    grid-template-columns: 1fr 1fr 1fr !important; /* nu mai forțează nimic pe stânga */
    gap:12px !important;
    align-items:end !important;   /* câmpurile stau pe aceeași bază */
    margin-top:0 !important;
}

/* coloana "Data nașterii" rămâne a treia; caption + selecturi pe două rânduri */
#db2-mission-personal .db2-birth-group{
    grid-column:3 / span 1 !important;
    display:flex !important;
    flex-direction:column !important;
    align-self:end !important;
}

/* aliniază vizual captionul "Data nașterii" cu h6 "Prenume și nume*" */
#db2-mission-personal .db2-birth-group .db2-field-caption{
    margin:0 0 6px 0 !important;
    line-height:1.2 !important;
    position:relative !important;
    top:-2px !important;               /* mic reglaj ca să pice la aceeași înălțime */
}

/* selecturile: un singur rând, spațiere uniformă */
#db2-mission-personal .db2-birth-inline{
    display:flex !important;
    gap:10px !important;
    align-items:center !important;
}

/* dimensiuni sigure pentru zi/lună/an */
#db2-mission-personal #db2-birthDay{ width:72px !important; }
#db2-mission-personal #db2-birthMonth{ min-width:120px !important; }
#db2-mission-personal #db2-birthYear{ width:90px !important; }

/* subtitlul rămâne pe loc; doar spacing uniform sub el */
#db2-mission-personal .db2-mission-expand-content .db2-section-subtitle{
    margin:12px 0 8px 0 !important;
    text-align:left !important;
}

/* rândul cu Țară/Județ/Localitate — aceeași bază și distanță */
#db2-mission-personal .db2-address-full-row{
    align-items:end !important;
    margin-top:12px !important;
}
/* === DB2 Personal — one-shot fix (stabil + scurt) === */
#db2-mission-personal .db2-personal-warning{
    margin:12px 0 !important;
}
#db2-mission-personal .db2-mission-expand-content .db2-section-subtitle{
    margin:12px 0 8px 0 !important;
    text-align:left !important;
}

/* Rând: Prenume | Nume | Data nașterii (3 coloane reale) */
#db2-mission-personal .db2-personal-full-row{
    display:grid !important;
    grid-template-columns: minmax(220px,1fr) minmax(220px,1fr) minmax(280px,1fr) !important;
    gap:12px !important;
    align-items:start !important;
    margin:0 !important; /* nu împinge subtitlurile */
}

/* Coloana "Data nașterii" = caption + 3 selecturi pe verticală */
#db2-mission-personal .db2-birth-group{
    grid-column:3 / span 1 !important;
    display:flex !important;
    flex-direction:column !important;
}
#db2-mission-personal .db2-birth-group .db2-field-caption{
    margin:0 0 6px 0 !important;
    line-height:1.2 !important;
}
#db2-mission-personal .db2-birth-inline{
    display:flex !important;
    gap:10px !important;
    align-items:center !important;
}
/* lățimi sigure pentru selecturi (nu rupe layout-ul) */
#db2-mission-personal #db2-birthDay{ width:72px !important; }
#db2-mission-personal #db2-birthMonth{ min-width:120px !important; }
#db2-mission-personal #db2-birthYear{ width:90px !important; }

/* Rând 2: Țară/Județ/Localitate — aceeași bază și ritm */
#db2-mission-personal .db2-address-full-row{
    align-items:start !important;
    margin-top:12px !important;
}
/* === DB2 Personal — aliniere definitivă (desktop) === */
@media (min-width: 769px){
    /* rândul rămâne pe 3 coloane, aliniate SUS */
    #db2-mission-personal .db2-personal-full-row{
        display:grid !important;
        grid-template-columns: 1fr 1fr minmax(280px,1fr) !important;
        gap:12px !important;
        align-items:start !important;
        margin-top:0 !important;
    }

    /* coloana "Data nașterii": caption-ul nu mai ocupă înălțime */
    #db2-mission-personal .db2-birth-group{
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-self: start !important;
        padding-top: 0 !important;   /* nu adăugăm spațiu peste selecturi */
    }
    #db2-mission-personal .db2-birth-group .db2-field-caption{
        position: absolute !important;
        top: -18px !important;       /* ridicăm caption-ul deasupra, nu împinge selecturile */
        left: 0 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        pointer-events: none !important;
    }

    /* selecturile pe un singur rând, aliniate cu câmpurile din stânga */
    #db2-mission-personal .db2-birth-inline{
        display:flex !important;
        gap:10px !important;
        align-items:center !important;
    }
    #db2-mission-personal #db2-birthDay{ width:72px !important; }
    #db2-mission-personal #db2-birthMonth{ min-width:120px !important; }
    #db2-mission-personal #db2-birthYear{ width:90px !important; }
}
/* === Micro-fix vizual "Data nașterii" === */
#db2-mission-personal .db2-birth-group .db2-field-caption{
    font-size: 15px !important;      /* egal cu "Prenume și nume*" */
    font-weight: 800 !important;
    top: -20px !important;           /* un mic lift față de rândul de jos */
    letter-spacing: 0.2px;
}
#db2-mission-personal .db2-birth-inline{
    margin-top: 2px !important;      /* spațiu consistent între label și selecturi */
}
/* ===== MOBILE FIX — DB2 Personal (≤768px) ===== */
@media (max-width: 768px){

    /* 1) Boxul de avertisment: centrat și text pe mijloc */
    #db2-mission-personal .db2-personal-warning{
        width: calc(100% - 40px) !important;
        margin: 0 20px 16px 20px !important;
        text-align: center !important;
        align-items: center !important;
    }
    #db2-mission-personal .db2-personal-warning p{
        text-align: center !important;
    }

    /* 2) Subtitluri: la stânga (uniform) */
    #db2-mission-personal .db2-section-subtitle{
        width: calc(100% - 40px) !important;
        margin: 16px 20px 8px 20px !important;
        text-align: left !important; /* schimbă în center dacă vrei toate la mijloc */
    }

    /* 3) Rândul cu Prenume | Nume | Data nașterii: vertical, full-width */
    #db2-mission-personal .db2-personal-full-row{
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: calc(100% - 40px) !important;
        margin: 0 20px 12px 20px !important;
        align-items: stretch !important;
    }

    /* 4) "Data nașterii": revenim în flow normal pe mobil (fără position:absolute) */
    #db2-mission-personal .db2-birth-group{
        position: static !important;
        align-self: stretch !important;
    }
    #db2-mission-personal .db2-birth-group .db2-field-caption{
        position: static !important;
        top: auto !important;
        left: auto !important;
        margin: 0 0 8px 0 !important;
        line-height: 1.2 !important;
        text-align: left !important;
        font-size: 15px !important;
        font-weight: 800 !important;
    }
    #db2-mission-personal .db2-birth-inline{
        display: flex !important;
        gap: 10px !important;
        align-items: center !important;
        margin-top: 2px !important;  /* același spațiu ca la celelalte labeluri */
    }

    /* 5) Inputs full-width pe mobil (siguranță) */
    #db2-mission-personal .db2-form-field,
    #db2-mission-personal .db2-form-input,
    #db2-mission-personal .db2-form-select{
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}
/* ===== MOBILE POLISH DB2 (≤768px) — padding, box info, aliniere, anul complet ===== */
@media (max-width: 768px){

    /* 0) Padding lateral mai mic, aliniament unic */
    #db2-mission-personal .db2-mission-expand-content,
    #db2-mission-personal .db2-personal-warning,
    #db2-mission-personal .db2-section-subtitle,
    #db2-mission-personal .db2-personal-full-row,
    #db2-mission-personal .db2-address-full-row,
    #db2-mission-personal .db2-button-container{
        width: calc(100% - 24px) !important;   /* 12px + 12px */
        margin-left: 12px !important;
        margin-right: 12px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 1) Caseta info: text să „curgă” pe lângă bec (fără spațiu mort) + centrat vertical */
    #db2-mission-personal .db2-personal-warning{
        display: grid !important;
        grid-template-columns: 28px 1fr !important; /* icon + text */
        gap: 10px !important;
        align-items: start !important;
        text-align: left !important;
        padding: 14px !important;
    }
    #db2-mission-personal .db2-warning-icon{
        width: 28px !important; height: 28px !important; font-size: 18px !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        margin-top: 2px !important;
    }
    #db2-mission-personal .db2-personal-warning p{
        margin: 0 !important; line-height: 1.45 !important;
    }

    /* 2) Subtitluri: același start ca inputurile (stânga) */
    #db2-mission-personal .db2-section-subtitle{
        margin: 12px 0 8px 0 !important;
        text-align: left !important;
    }

    /* 3) Rând 1 vertical (Prenume → Nume → Data nașterii) cu aliniere perfectă */
    #db2-mission-personal .db2-personal-full-row{
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
        margin-bottom: 12px !important;
    }

    /* 4) Data nașterii: revenim în flow normal + anul să nu mai fie tăiat */
    #db2-mission-personal .db2-birth-group{ position: static !important; }
    #db2-mission-personal .db2-birth-group .db2-field-caption{
        position: static !important; margin: 0 0 6px 0 !important;
        font-size: 15px !important; font-weight: 800 !important; line-height: 1.2 !important;
        text-align: left !important;
    }
    #db2-mission-personal .db2-birth-inline{
        display: flex !important; gap: 10px !important; align-items: center !important; flex-wrap: nowrap !important;
    }
    /* lățimi sigure pentru 400px viewport: zi + lună + an încape pe un singur rând */
    #db2-mission-personal #db2-birthDay{ width: 64px !important; flex: 0 0 64px !important; }
    #db2-mission-personal #db2-birthMonth{ min-width: 120px !important; flex: 0 0 120px !important; }
    #db2-mission-personal #db2-birthYear{ width: 96px !important; flex: 0 0 96px !important; } /* afișează complet „1979” */
    #db2-mission-personal .db2-birth-inline select{ min-width: 0 !important; }

    /* 5) Inputurile: full-width real, fără „înghesuială” vizuală */
    #db2-mission-personal .db2-form-field,
    #db2-mission-personal .db2-form-input,
    #db2-mission-personal .db2-form-select{
        width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
    }
}
/* ==== MOBILE HARD FIX – Personal (≤768px) ==== */
@media (max-width:768px){

    /* Titlurile pornesc din același punct (stânga) */
    #db2-mission-personal .db2-section-subtitle,
    #db2-mission-personal .db2-birth-group .db2-field-caption{
        text-align: left !important;
        margin-left: 0 !important;
    }

    /* Rândurile și câmpurile = full width real, fără margini “fantomă” */
    #db2-mission-personal .db2-personal-full-row,
    #db2-mission-personal .db2-address-full-row{
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Grupul “Data nașterii” ocupă exact cât un câmp normal */
    #db2-mission-personal .db2-birth-group{
        width: 100% !important;
    }

    /* Zi / Lună / An: 3 coloane egale care UMPLU lățimea grupului */
    #db2-mission-personal .db2-birth-inline{
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 10px !important;
        align-items: center !important;
    }
    #db2-mission-personal .db2-birth-inline .db2-form-select{
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    /* Anulează toate lățimile fixe setate mai sus în foaie */
    #db2-mission-personal #db2-birthDay,
    #db2-mission-personal #db2-birthMonth,
    #db2-mission-personal #db2-birthYear{
        width: auto !important;
        min-width: 0 !important;
    }
}

/* — Dacă vrei toate titlurile la MIJLOC pe mobil, decomentează mai jos —
@media (max-width:768px){
  #db2-mission-personal .db2-section-subtitle,
  #db2-mission-personal .db2-birth-group .db2-field-caption{
    text-align:center !important;
  }
}
*/
/* === POLISH MOBIL — caseta avertizare aliniată + Zi/Lună/An calibrate === */
@media (max-width:768px){
    /* 1) Caseta de avertizare: exact aceeași lățime ca inputurile */
    #db2-mission-personal .db2-personal-warning{
        width: 100% !important;
        margin: 0 0 12px 0 !important;          /* fără asimetrii stânga/dreapta */
        padding: 14px !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 28px 1fr !important; /* bec + text curgător */
        gap: 10px !important;
        text-align: left !important;
    }

    /* 2) Data nașterii: zi = 2 caractere, luna puțin mai largă, anul complet */
    #db2-mission-personal .db2-birth-inline{
        display: grid !important;
        grid-template-columns: 56px minmax(140px,1fr) 92px !important; /* Zi | Lună | An */
        gap: 10px !important;
        align-items: center !important;
    }
    #db2-mission-personal #db2-birthDay{
        width: 56px !important;      /* 2 cifre lejer */
        min-width: 56px !important;
        flex: 0 0 56px !important;
    }
    #db2-mission-personal #db2-birthMonth{
        min-width: 140px !important; /* încape „Noiembrie/Decembrie” fără tăiere */
        flex: 1 1 auto !important;
        width: auto !important;
    }
    #db2-mission-personal #db2-birthYear{
        width: 92px !important;      /* „1979” complet */
        min-width: 92px !important;
        flex: 0 0 92px !important;
    }
}
/* === MOBILE FINISH – aliniere casetă + calibrare Zi/Lună/An === */
@media (max-width:768px){

    /* 1) Caseta cu bec = EXACT cât câmpurile (aceleași margini stânga/dreapta) */
    #db2-mission-personal .db2-personal-warning{
        width: calc(100% - 24px) !important;   /* ca input-urile */
        margin: 0 12px 12px 12px !important;   /* stânga = dreapta */
        padding: 14px !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 28px 1fr !important; /* bec + text */
        gap: 10px !important;
        text-align: left !important;
    }

    /* 2) Zi/Lună/An: zi puțin mai îngustă (2 caractere lejer),
          luna DOAR un pic mai lată, anul complet – fără a depăși grupul */
    #db2-mission-personal .db2-birth-inline{
        display: grid !important;
        grid-template-columns: 48px minmax(128px,1fr) 88px !important; /* Zi | Lună | An */
        gap: 10px !important;
        align-items: center !important;
    }

    /* anulează orice lățimi rigide anterioare care tăiau vizibilitatea */
    #db2-mission-personal #db2-birthDay{
        width: 48px !important; min-width: 48px !important; flex: 0 0 48px !important;
    }
    #db2-mission-personal #db2-birthMonth{
        min-width: 128px !important; width: auto !important; flex: 1 1 auto !important;
    }
    #db2-mission-personal #db2-birthYear{
        width: 88px !important; min-width: 88px !important; flex: 0 0 88px !important;
    }
}
/* === FIX 1: caseta avertizare aliniată EXACT ca inputurile (mobil) === */
@media (max-width:768px){
    #db2-mission-personal .db2-personal-warning{
        width: calc(100% - 40px) !important;   /* la fel ca rândurile cu câmpuri */
        margin: 0 20px 12px 20px !important;   /* stânga = dreapta */
        padding: 14px !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 28px 1fr !important;
        gap: 10px !important;
        text-align: left !important;
    }
}

/* === FIX 2: „Zi” nu mai e tăiată; Lună puțin mai lată; An complet === */
@media (max-width:768px){
    /* grila pentru Zi | Lună | An – nu schimbăm restul layout-ului */
    #db2-mission-personal .db2-birth-inline{
        display: grid !important;
        grid-template-columns: 56px minmax(128px,1fr) 92px !important;
        gap: 10px !important;
        align-items: center !important;
    }

    /* anulează padding-right 40px care mânca textul sub săgeată */
    #db2-mission-personal .db2-birth-inline .db2-form-select{
        padding-right: 22px !important;
        background-position: right 8px center !important;
        text-align: center !important;      /* “1”, “19” rămân vizibile integral */
    }

    /* lățimi clare, dar fără tăieri */
    #db2-mission-personal #db2-birthDay{
        width: 56px !important; min-width: 56px !important; flex: 0 0 56px !important;
    }
    #db2-mission-personal #db2-birthMonth{
        min-width: 128px !important; width: auto !important; flex: 1 1 auto !important;
        text-align: left !important; /* luna se citește natural */
    }
    #db2-mission-personal #db2-birthYear{
        width: 92px !important; min-width: 92px !important; flex: 0 0 92px !important;
    }
}
/* === FIX SELECT CLICK (mobil) — elimin overlay-ul invizibil === */
@media (max-width:768px){
    /* Captionul nu mai ia tap-ul */
    #db2-mission-personal .db2-birth-group .db2-field-caption{
        position: static !important;
        pointer-events: none !important;
    }

    /* Caseta cu bec nu mai “planează” deasupra */
    #db2-mission-personal .db2-personal-warning{
        position: relative !important;
        z-index: 0 !important;
        margin-bottom: 12px !important; /* asigură despărțirea de rândul următor */
    }

    /* Grupul Zi/Lună/An e deasupra, complet clicabil */
    #db2-mission-personal .db2-birth-group,
    #db2-mission-personal .db2-birth-inline{
        position: relative !important;
        z-index: 2 !important;
    }
    /* === Mobile UX fine-tune: dimensiune text selecturi === */
    @media (max-width:768px){
        #db2-mission-personal .db2-form-select{
            font-size: 13.5px !important;   /* mai subtil, mai apropiat de sistem */
            padding-top: 8px !important;
            padding-bottom: 8px !important;
        }
    }