@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* =========================================================
   ROOT
========================================================= */

:root{
    --primary: #3b82f6;
    --primary-hover: #2563eb;

    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;

    --transition: .25s ease;

    --shadow-sm: 0 4px 10px rgba(0,0,0,.08);
    --shadow: 0 10px 30px rgba(0,0,0,.12);
    --shadow-lg: 0 20px 60px rgba(0,0,0,.18);

    --navbar-height: 72px;
}

/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    min-height:100vh;
    overflow-x:hidden;
    overflow-y:auto;
    opacity:1;

    transition:
        background-color .3s ease,
        color .3s ease;
}

/* SCROLLBAR */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.12);
    border-radius:20px;
}

::-webkit-scrollbar-track{
    background:transparent;
}

/* =========================================================
   TEMA ESCURO
========================================================= */

[data-bs-theme="dark"]{
    --bs-body-bg: #0b1120;
    --bs-body-color: #e5e7eb;
    --bs-border-color: rgba(255,255,255,.08);
    --bs-tertiary-bg: #111827;
    --bs-emphasis-color: #ffffff;

    --card-bg: rgba(17,24,39,.75);
    --input-bg: rgba(255,255,255,.03);
    --dropdown-bg: rgba(17,24,39,.96);
    --hover-bg: rgba(255,255,255,.05);
}

/* =========================================================
   TEMA CLARO
========================================================= */

[data-bs-theme="light"]{
    --bs-body-bg: #f8fafc;
    --bs-body-color: #0f172a;
    --bs-border-color: rgba(15,23,42,.08);
    --bs-tertiary-bg: #ffffff;
    --bs-emphasis-color: #020617;

    --card-bg: rgba(255,255,255,.88);
    --input-bg: rgba(255,255,255,.75);
    --dropdown-bg: rgba(255,255,255,.96);
    --hover-bg: rgba(15,23,42,.04);
}

/* =========================================================
   BODY
========================================================= */

body{
    background:
        radial-gradient(circle at top left, rgba(59,130,246,.12), transparent 25%),
        radial-gradient(circle at bottom right, rgba(99,102,241,.08), transparent 25%),
        var(--bs-body-bg);

    color:var(--bs-body-color);
}

/* =========================================================
   NAVBAR
========================================================= */

.navbar{
    min-height:var(--navbar-height);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    background: rgba(15,23,42,.70) !important;

    border-bottom:1px solid var(--bs-border-color);

    transition:var(--transition);

    z-index:1050;
}

[data-bs-theme="light"] .navbar{
    background: rgba(255,255,255,.72) !important;
}

.navbar-brand img{
    max-height:200px;

    transition:
        transform .25s ease,
        opacity .25s ease;
}

.navbar-brand:hover img{
    transform:scale(1.04);
    opacity:.95;
}

/* NAVBAR TOGGLER */

.navbar-toggler{
    border:none !important;
    box-shadow:none !important;
    padding:.5rem;
    border-radius:12px;
}

.navbar-toggler:hover{
    background:var(--hover-bg);
}

/* =========================================================
   AVATAR
========================================================= */

.avatar-img{
    width:42px;
    height:42px;

    object-fit:cover;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.10);

    transition:var(--transition);
}

.avatar-img:hover{
    transform:scale(1.05);
}

.avatar-wrapper{
    position:relative;
}

.online-indicator{
    position:absolute;

    width:12px;
    height:12px;

    background:var(--success);

    border-radius:50%;

    bottom:1px;
    right:1px;

    border:2px solid var(--bs-body-bg);
}

/* =========================================================
   DROPDOWN
========================================================= */

.dropdown-menu{
    border:none;

    border-radius:var(--radius);

    background:var(--dropdown-bg);

    backdrop-filter:blur(18px);

    padding:.7rem;

    min-width:260px;

    box-shadow:var(--shadow-lg);

    animation:fadeUp .22s ease;
}

.dropdown-divider{
    opacity:.08;
}

.dropdown-item{
    border-radius:12px;

    padding:.85rem .95rem;

    font-weight:500;

    display:flex;
    align-items:center;

    transition:var(--transition);
}

.dropdown-item:hover{
    background:var(--hover-bg);
    transform:translateX(2px);
}

.dropdown-item i{
    width:20px;
}

/* =========================================================
   ANIMAÇÕES
========================================================= */

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

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

    50%{
        transform:scale(1.03);
    }

    100%{
        transform:scale(1);
    }
}

/* =========================================================
   BOTÕES
========================================================= */

.btn{

    border-radius:14px;

  

    font-size:.95rem;
    font-weight:600;

    letter-spacing:.01em;

    transition:var(--transition);

    border:none;
}

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

.btn:active{
    transform:translateY(0);
}

/* PRIMARY */

.btn-primary{
    background:
        linear-gradient(
            135deg,
            var(--primary),
            #2563eb
        );

    box-shadow:
        0 10px 25px rgba(59,130,246,.25);
}

.btn-primary:hover{
    background:
        linear-gradient(
            135deg,
            #4f8dfd,
            #1d4ed8
        );

    box-shadow:
        0 16px 30px rgba(59,130,246,.35);
}

/* PRIMARY */

.btn-link{
    text-decoration: none;
}

.btn-link:hover{
    box-shadow:
        0 16px 30px rgba(59,130,246,.35);
}

/* OUTLINE */

.btn-outline-light{
    border:1px solid rgba(255,255,255,.10);
    background:transparent;
}

.btn-outline-light:hover{
    background:rgba(255,255,255,.05);
}

/* =========================================================
   MODAIS
========================================================= */

.modal.fade .modal-dialog{
    transform:scale(.96) translateY(10px);
}

.modal.show .modal-dialog{
    transform:scale(1) translateY(0);
}

.modal-dialog{
    transition:all .2s ease;
}

.modal-content{
    border:none;

    border-radius:var(--radius-lg);

    overflow:hidden;

    background:var(--card-bg);

    backdrop-filter:blur(20px);

    box-shadow:var(--shadow-lg);
}

.modal-header,
.modal-footer{
    border:none;
}

.modal-header{
    padding:1.5rem 1.5rem .5rem;
}

.modal-body{
    padding:1.5rem;
}

.modal-footer{
    padding:0 1.5rem 1.5rem;
}

/* =========================================================
   FORMULÁRIOS
========================================================= */

.form-control,
.form-select{
    min-height:56px;

    border-radius:14px;

    background:var(--input-bg);

    border:1px solid var(--bs-border-color);

    color:var(--bs-body-color);

    font-size:.96rem;

    transition:var(--transition);
}

.form-control:focus,
.form-select:focus{
    background:var(--input-bg);

    border-color:rgba(59,130,246,.65);

    box-shadow:
        0 0 0 4px rgba(59,130,246,.12);

    color:var(--bs-body-color);
}

.form-floating label{
    font-weight:500;
    color:#94a3b8;
}

.form-control::placeholder{
    color:#94a3b8;
}

/* INVALID */

.invalid-feedback{
    font-size:.82rem;
    margin-top:.35rem;
}

/* =========================================================
   CARDS
========================================================= */

.card{
    border:none;

    border-radius:var(--radius);

    background:var(--card-bg);

    backdrop-filter:blur(14px);

    box-shadow:var(--shadow);

    overflow:hidden;
}

/* =========================================================
   TABLES
========================================================= */

.table{
    vertical-align:middle;
}

.table thead th{
    border-bottom:1px solid var(--bs-border-color);
}

/* =========================================================
   LOADING
========================================================= */

.spinner-border{
    width:1rem;
    height:1rem;

    border-width:.15rem;
}

/* =========================================================
   LINKS
========================================================= */

a{
    text-decoration:none;
    transition:var(--transition);
}

a:hover{
    opacity:.92;
}

/* =========================================================
   UTILITÁRIOS
========================================================= */

.cursor-pointer{
    cursor:pointer;
}

.glass{
    background:var(--card-bg);
    backdrop-filter:blur(18px);
}

.shadow-soft{
    box-shadow:var(--shadow);
}

.radius{
    border-radius:var(--radius);
}

/* =========================================================
   MOBILE FIRST
========================================================= */

@media(max-width: 576px){

    .navbar{
        padding:.8rem 0;
    }

    .navbar-collapse{
        margin-top:1rem;

        padding:1rem;

        border-radius:18px;

        background:var(--card-bg);

        backdrop-filter:blur(18px);
    }

    .dropdown-menu{
        min-width:100%;
    }

    .modal-dialog{
        margin:0;
        min-height:100vh;

        display:flex;
        align-items:end;
    }

    .modal-content{
        border-radius:
            24px 24px 0 0;
    }
}

.material-symbols-rounded{
    font-variation-settings:
    'FILL' 1,
    'wght' 500,
    'GRAD' 0,
    'opsz' 24;

    vertical-align: middle;
    font-size: 22px;
}

.material-symbols-rounded{
    transition:.2s ease;
}

.btn:hover .material-symbols-rounded{
    transform:scale(1.08);
}

@media(max-width:576px){

    body{
        font-size:.94rem;
    }

    .navbar-brand img{
        max-height:44px;
    }

    .modal-body,
    .modal-header,
    .modal-footer{
        padding:1.2rem;
    }

    .dropdown-menu{
        padding:.55rem;
    }

    .form-control,
    .form-select{
        min-height:54px;
    }
}

.event-card {
    transition: transform .2s ease, box-shadow .2s ease;
    border-radius: 1rem;
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .12) !important;
}

.event-card .card-title {
    color: var(--bs-body-color);
    line-height: 1.3;
}

.event-card img {
    transition: transform .3s ease;
}

.event-card:hover img {
    transform: scale(1.04);
}

.object-fit-cover {
    object-fit: cover;
}

.event-hero {
    background: var(--bs-body-bg);
}

.event-hero-img {
    max-height: 520px;
    object-fit: cover;
    object-position: center;
}

.event-sidebar {
    top: 1rem;
}

.event-description {
    color: var(--bs-body-color);
    line-height: 1.75;
    font-size: 1rem;
}

.event-description img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
}

.event-description p:last-child {
    margin-bottom: 0;
}

.event-filter .btn {
    transition: transform .2s ease, box-shadow .2s ease;
}

.event-filter .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .08);
}

.card {
    transition: box-shadow .2s ease, transform .2s ease;
}

.card:hover {
    box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .08) !important;
}

.material-symbols-outlined {
    vertical-align: middle;
    font-size: 1.25rem;
    line-height: 1;
}

@media (max-width: 767.98px) {
    .event-hero-img {
        max-height: 280px;
    }

    .event-sidebar {
        position: static !important;
    }

    .event-description {
        font-size: .95rem;
    }
}

.payment-page,
.ticket-page,
.ticket-list-page {
    --ticket-border: rgba(15, 23, 42, .08);
    --ticket-shadow: 0 14px 35px rgba(15, 23, 42, .08);
    --ticket-shadow-hover: 0 20px 45px rgba(15, 23, 42, .14);
    --ticket-soft: rgba(var(--bs-primary-rgb), .08);
}

[data-bs-theme="dark"] .payment-page,
[data-bs-theme="dark"] .ticket-page,
[data-bs-theme="dark"] .ticket-list-page {
    --ticket-border: rgba(255, 255, 255, .08);
    --ticket-shadow: 0 14px 35px rgba(0, 0, 0, .35);
    --ticket-shadow-hover: 0 20px 45px rgba(0, 0, 0, .5);
    --ticket-soft: rgba(var(--bs-primary-rgb), .18);
}

.payment-card,
.ticket-card,
.ticket-member-card,
.ticket-event-card {
    border: 1px solid var(--ticket-border) !important;
    box-shadow: var(--ticket-shadow) !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.ticket-event-card:hover,
.ticket-member-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ticket-shadow-hover) !important;
    border-color: rgba(var(--bs-primary-rgb), .3) !important;
}

.ticket-event-card img {
    transition: transform .35s ease, filter .35s ease;
}

.ticket-event-card:hover img {
    transform: scale(1.045);
    filter: saturate(1.08);
}

.payment-qrcode-box {
    min-height: 280px;
    border: 1px dashed rgba(var(--bs-primary-rgb), .35);
    border-radius: 1.5rem;
    background: var(--ticket-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.payment-steps {
    display: grid;
    gap: .85rem;
}

.payment-step {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem;
    border-radius: 1rem;
    background: var(--bs-tertiary-bg);
}

.payment-step p {
    margin: 0;
    color: var(--bs-secondary-color);
    line-height: 1.5;
}

.payment-step .material-symbols-outlined {
    color: var(--bs-primary);
    font-size: 1.5rem;
    flex: 0 0 auto;
}

.ticket-avatar {
    object-fit: cover;
    border: 2px solid rgba(var(--bs-primary-rgb), .18);
}

.ticket-qrcode {
    border-radius: 1rem;
    padding: .5rem;
    background: #fff;
    box-shadow: 0 .5rem 1.2rem rgba(0, 0, 0, .08);
}

.ticket-event-card .card-title {
    color: var(--bs-body-color);
    line-height: 1.25;
    letter-spacing: -.02em;
}

.ticket-event-card .ratio {
    background: var(--bs-tertiary-bg);
}

.payment-page .btn,
.ticket-page .btn,
.ticket-list-page .btn {
    border-radius: .9rem;
    font-weight: 700;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.payment-page .btn-primary,
.ticket-page .btn-primary {
    box-shadow: 0 10px 24px rgba(var(--bs-primary-rgb), .25);
}

.payment-page .btn-primary:hover,
.ticket-page .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(var(--bs-primary-rgb), .35);
}

.material-symbols-outlined {
    vertical-align: middle;
    font-size: 1.25rem;
    line-height: 1;
    font-variation-settings:
        "FILL" 0,
        "wght" 500,
        "GRAD" 0,
        "opsz" 24;
}

@media (max-width: 767.98px) {
    .payment-qrcode-box {
        min-height: 230px;
    }

    .ticket-card .card-body,
    .payment-card .card-body {
        padding: 1.25rem !important;
    }

    .payment-page .btn,
    .ticket-page .btn,
    .ticket-list-page .btn {
        width: 100%;
    }

    .payment-page .btn-link,
    .ticket-page .btn-link,
    .ticket-list-page .btn-link {
        width: auto;
    }
}