:root {
    --primary-color: #6c63ff; /* Lila pasztell */
    --primary-color-hover: #594eff; /* Sötétebb lila */
    --secondary-color: #7a7a7a; /* Szürke */
    --background-color: #f7f8fa; /* Világos pasztell háttér */
    --card-background-color: #ffffff; /* Fehér kártya */
    --focus-shadow: rgba(108, 99, 255, 0.25); /* Árnyék fókusznál */
    --border-radius: 4px; /* Kerekítés mértéke */
    --text-color: #2a3647;
}

body {
    background-color: var(--background-color);
    font-family: 'Arial', sans-serif;
    font-size: 14px;
}

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

a:hover{
    color: var(--primary-color-hover);
}

.span-link{
    color: var(--primary-color);
    cursor: pointer;
}

.span-link:hover{
    color: var(--primary-color-hover);
}

.txt-right{
    text-align: right;
}

.card {
    background-color: var(--card-background-color);
    border: 1px solid #e6e8f0;
    border-radius: var(--border-radius);
    width: 100%;
}

.card-title{
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.btn-xs{
    font-size: 0.8rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--primary-color-hover);
}

.btn-light{
    background-color: #ffffff;
    border-color: #cdcbcb;
    color: var(--secondary-color);
    border-radius: 4px;
    font-size: 0.8rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    box-shadow: #2a36470f 0 1px 2px;
}

.btn-light:hover{
    background-color: #f8f9fa;
    border-color: #cdcbcb;
    color: var(--text-color);
    box-shadow: #2a36470f 0 1px 2px;
}

.btn-light:focus{
    background-color: #e6e8f0;
    border-color: #e6e8f0;
    box-shadow: 0 0 0 0.2rem var(--focus-shadow);
}

.btn-red {
    background-color: #c94a57;
    border: 1px solid #b83d4a;
    color: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-red:hover {
    background-color: #b83d4a;
    border-color: #a63542;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.btn-red:focus {
    box-shadow: 0 0 0 0.2rem rgba(201, 74, 87, 0.25);
}

.btn-green {
    background-color: #3d9f5c;
    border: 1px solid #358f52;
    color: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-green:hover {
    background-color: #358f52;
    border-color: #2d7d45;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.btn-green:focus {
    box-shadow: 0 0 0 0.2rem rgba(61, 159, 92, 0.25);
}

.text-primary {
    color: var(--primary-color);
}

.text-secondary {
    color: var(--secondary-color);
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem var(--focus-shadow);
}

.navbar {
    background-color: var(--primary-color); /* Lila pasztell háttér */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Finom árnyék */
    border-bottom: 3px solid var(--primary-color-hover); /* Alul vonal */
}

.navbar-brand {
    font-size: 1.5rem;
    color: var(--card-background-color); /* Fehér szöveg */
}

.navbar-toggler {
    border: none; /* Gomb körvonala eltávolítva */
}

.navbar-toggler-icon i {
    font-size: 1.2rem;
}

.nav-link {
    color: var(--card-background-color); /* Fehér linkek */
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--primary-color-hover); /* Sötétebb lila hover */
}

.nav-signup {
    color: var(--card-background-color); /* Fehér kijelentkezés gomb */
    font-weight: bold;
    border: 2px solid var(--card-background-color); /* Körvonal */
    padding: 5px 15px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.nav-signup:hover {
    background-color: var(--card-background-color); /* Fehér háttér */
    color: var(--primary-color); /* Lila szöveg */
}

.dropdown-item{
    font-size: 14px;
}

.form-select, .form-control{
    font-size: 1em;
}

main{
    padding-top: 85px;
    padding-bottom: 50px;
}

h1{
    font-size: 1.7rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--primary-color);
}

h2{
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

h3{
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.list-group .list-group-item i.fa,
.list-group .list-group-item i.fas,
.list-group .list-group-item i.far{
    width: 20px;
    margin-right: 10px;
    color: var(--primary-color);
    opacity: 0.8;
}

.btn .fa,
.btn .fas,
.btn .far{
    margin-right: 5px;
}

.subscription-card .card-text span{
    display: inline-block;
    margin-right: 15px;
}

.red-color{
    color: red;
}

tr.bg-light td{
    background-color: #f8f9fa !important;
}

/* Livewire Modal Styles */
.modal.show {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050;
}

.modal-backdrop.show {
    z-index: 1040;
}

.modal-dialog {
    z-index: 1060;
}

/* Reusable filter/search toolbar styles */
.filter-toolbar{
    --bs-gutter-x: .75rem;
    --bs-gutter-y: .5rem;
    background-color: var(--card-background-color);
    border: 1px solid #edf0f7;
    border-radius: var(--border-radius);
    padding: 10px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 10px;
}

/* Prevent overflow when filter-toolbar is used on a .row */
.filter-toolbar.row{
    margin-left: 0;
    margin-right: 0;
}

.filter-toolbar .form-control,
.filter-toolbar .form-select{
    border-radius: 8px;
    border-color: #e6e8f0;
    min-width: 180px;
}

.filter-toolbar .form-control:focus,
.filter-toolbar .form-select:focus{
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.15rem var(--focus-shadow);
}

.filter-toolbar .input-group-text{
    background: #f4f5fb;
    border: 1px solid #e6e8f0;
    border-right: 0;
    color: var(--secondary-color);
}

.filter-chip{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .6rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(108, 99, 255, 0.1);
    border: 1px solid rgba(108, 99, 255, 0.2);
    border-radius: 9999px;
    white-space: nowrap;
}

.filter-chip i{
    opacity: .9;
}

.result-count{
    display: inline-block;
    padding: .35rem .6rem;
    border-radius: 9999px;
    background: #f4f5fb;
    color: var(--secondary-color);
    font-weight: 600;
}

@media (max-width: 576px){
    .filter-toolbar{
        padding: 8px 10px;
    }
    .filter-toolbar .form-select,
    .filter-toolbar .form-control{
        min-width: 160px;
    }
}

@media (min-width: 1600px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1520px;
    }
}

/* ============================
   Subscription cards - modern, strukturált megjelenítés
   Csak a .subscription-card elemekre hat, ütközésmentes
   ============================ */
.subscription-card{
    position: relative;
    border: 1px solid #e6e8f0;
    border-radius: var(--border-radius);
    padding: 16px 16px 12px;
    background: var(--card-background-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.subscription-card::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    background: rgba(108, 99, 255, 0.55);
}

/* Állapot szerinti finom háttér és él */
.subscription-card.alert-success{
    background: #f5fcf7;
    border-color: #d8f3e1;
}
.subscription-card.alert-success::before{
    background: #38a169; /* zöld él */
}

.subscription-card.alert-danger{
    background: #fff7f7;
    border-color: #ffdcdc;
}
.subscription-card.alert-danger::before{
    background: #e53e3e; /* piros él */
}

.subscription-card h3{
    margin: 0 0 8px 0;
}

/* Leírás (package description) */
.subscription-card .card-text em{
    display: block;
    color: var(--secondary-color);
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 10px;
}

/* Adatrács – a <p class="card-text"> belsejében lévő <span> elemekből "kártyácskák" lesznek */
.subscription-card p.card-text{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 16px;
    margin-bottom: 8px;
}
.subscription-card p.card-text span{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
}
.subscription-card p.card-text span strong{
    font-size: .75rem;
    color: var(--secondary-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Kedvezmény kiemelés (ha .red-color van a span-en) */
.subscription-card p.card-text span.red-color{
    background: #fff5f5;
    border-color: #fed7d7;
    color: #c53030;
}

/* Művelet linkek – csak a subscription kártyákon "chip" szerű gombok */
.subscription-card .span-link{
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    border-radius: 9999px;
    border: 1px solid rgba(108, 99, 255, 0.4);
    background: rgba(108, 99, 255, 0.06);
    color: var(--primary-color);
    font-weight: 600;
    transition: all .2s ease;
}
.subscription-card .span-link:hover{
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}
.subscription-card .span-link + .span-link{
    margin-left: .5rem;
}

/* Fizetési státusz üzenetek kártyán belül (siker/hiba/folyamatban) */
.subscription-card .alert-success,
.subscription-card .alert-danger,
.subscription-card .alert-warning{
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 600;
    border: 1px solid transparent;
}
.subscription-card .alert-success{
    background: #f0fff4;
    border-color: #c6f6d5;
    color: #2f855a;
}
.subscription-card .alert-danger{
    background: #fff5f5;
    border-color: #fed7d7;
    color: #c53030;
}
.subscription-card .alert-warning{
    background: #fffaf0;
    border-color: #fbd38d;
    color: #b7791f;
}

/* Mobil finomítások kizárólag a subscription rácsra */
@media (max-width: 576px){
    .subscription-card{
        padding: 14px 14px 10px;
    }
    .subscription-card p.card-text{
        grid-template-columns: 1fr;
        gap: 8px;
    }
}