/* ----------------------------------------------------
   [ID:BODY]
---------------------------------------------------- */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(120deg,#dbeafe 0,#f5f5f7 100%);
}

main {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
}

/* ----------------------------------------------------
   [ID:HEADER]
---------------------------------------------------- */
.main-header {
    color: #0057b8;
    font-weight: 800;
    text-align: center;
    letter-spacing: 1px;
    margin: 2rem 0 1.2rem 0;
    font-size: clamp(2.1rem,6vw,3.7rem);
}
.sub-header {
    color: #333c;
    text-align: center;
    font-size: clamp(1.08rem,2.6vw,1.65rem);
    margin-bottom: 1.2rem;
    font-weight: 500;
}

/* ----------------------------------------------------
   [ID:SHOWCASE]
---------------------------------------------------- */
.concert-showcase {
    background: linear-gradient(90deg,#fff 60%,#eaf1fc 100%);
    border-radius: 1.6rem;
    box-shadow: 0 4px 24px #0057b80c;
    margin-bottom: 2.2rem;
    padding: 2.2rem 1.3rem 1.3rem 1.3rem;
    text-align: center;
    display: block;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}
.concert-showcase .show-title {
    font-size: 2.1rem;
    font-weight: 700;
    color: #003e74;
    margin-bottom: 0.5rem;
    display: block;
}
.concert-showcase .show-meta {
    font-size: 1.19rem;
    color: #555a;
    white-space: nowrap;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5em;
    justify-content: center;
}
.concert-showcase.hover-shadow:hover { box-shadow:0 6px 40px #0057b823; transform:translateY(-2px) scale(1.05);}
a.text-decoration-none:hover { text-decoration: none !important;}
@media (max-width:576px){
    .concert-showcase .show-meta {
        flex-direction: column;
        gap: 0.3em;
        white-space: normal;
    }
    .concert-showcase { padding:1.0rem 0.2rem 0.7rem 0.2rem;}
}

/* ----------------------------------------------------
   [ID:AVAILABILITY]
---------------------------------------------------- */
.avail-box {
    background: linear-gradient(92deg, #eaf2fb 60%, #fff 100%);
    border-radius: 1.5em;
    padding: 1.1em 1.5em 1.2em 1.5em;
    box-shadow: 0 2px 10px #0057b810;
    margin-bottom: 1.7em;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.avail-head {
    display: flex;
    align-items: center;
    gap: 0.65em;
    margin-bottom: 0.4em;
}
.avail-title {
    font-size: 1.25em;
    font-weight: 700;
    color: #0057b8;
    letter-spacing: 0.01em;
}
.avail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.13em;
}
.avail-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #c4d7ee;
    padding: 0.35em 0 0.35em 0;
}
.avail-list li:last-child { border-bottom: none; }
.fst-label { font-weight: 500; color: #234; }
.fst-places {
    font-family: monospace, Arial, sans-serif;
    font-size: 1.1em;
    background: #e5efff;
    color: #0057b8;
    border-radius: 1em;
    padding: 0.17em 0.9em;
    margin-left: 0.4em;
    min-width: 4.2em;
    text-align: right;
}
@media (max-width: 576px) {
    .avail-box {
        padding: 0.8em 0.5em 0.9em 0.9em;
        font-size: 1em;
    }
    .avail-title { font-size: 1.09em; }
    .fst-label { font-size: 1em; }
    .fst-places { font-size: 1em; padding:0.12em 0.7em; margin-left:0;}
    .avail-list li { flex-direction: column; align-items: flex-start; gap:0.1em;}
}

/* ----------------------------------------------------
   [ID:BOOKING-FORM]
---------------------------------------------------- */
.booking-form-area {
    max-width: 1100px;
    margin: 0 auto;
}
form.booking-form {
    background: #fff;
    border-radius: 1.6rem;
    box-shadow: 0 2px 12px #b2bec38a;
    padding: 2.6rem 2.2rem 1.2rem 2.2rem;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width:576px) {
    form.booking-form { padding: 1.1rem 0.4rem 0.7rem 0.4rem; }
}
.form-label, legend { font-size: 1.19rem; }
input, select, button {
    font-size: 1.32rem !important;
    min-height: 2.5em;
    padding: 0.7em 1.1em;
    border-radius: 1em !important;
}
button[type="submit"] {
    font-size: 1.5rem !important;
    font-weight: 700;
    padding: 0.9em 1.2em;
    border-radius: 2em !important;
    margin-top: 0.7em;
}
input:focus, select:focus, button:focus, textarea:focus {
    outline: 3px solid #0057b8 !important;
    outline-offset: 2px;
}

/* ----------------------------------------------------
   [ID:BILJETTKATEGORIER-FIELDSET]
   (fieldset.row + dess element: legend, col-*, .form-label, .form-select, .form-text)
---------------------------------------------------- */
fieldset.row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* Alltid 2 per rad! */
    gap: 0.38em 1.2em;                       /* Lodrätt/vågrätt avstånd */
    margin-bottom: 0.7em !important;
    padding: 0 2.2em 0.2em 2.2em;            /* Inre padding även på mobil */
    background: none;
    border: none;
    width: 100%;
    box-sizing: border-box;
}
fieldset legend {
    grid-column: 1 / -1;
    margin-bottom: 0.20em !important;
    font-size: 1.18rem;
    font-weight: 700;
    color: #0057b8;
    letter-spacing: 0.01em;
    padding-left: 0;
}
fieldset > div[class^="col-"] {
    min-width: 0;
    max-width: 100%;
    margin-bottom: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}
fieldset .form-label {
    width: 100%;
    margin-bottom: 0.05em !important;
    font-weight: 600;
}
fieldset select.form-select,
fieldset .form-text {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
fieldset select.form-select {
    margin-bottom: 0.12em !important;
    padding-top: 0.20em !important;
    padding-bottom: 0.20em !important;
    border-radius: 0.8em !important;
    text-align: left;
    font-size: 1.13em;
}
fieldset .form-text {
    margin-top: 0em !important;
    margin-bottom: 0.03em !important;
    font-size: 0.96em;
    white-space: normal;
}
@media (max-width: 900px) {
    fieldset.row {
        grid-template-columns: 1fr;
        gap: 0.11em 0.05em;
        padding-left: 1em;
        padding-right: 1em;
    }
}


/* ----------------------------------------------------
   [ID:PAY-CARD]
---------------------------------------------------- */
.pay-card {
    background: #fff;
    border-radius: 2.3em;
    box-shadow: 0 6px 36px #0057b86b;
    padding: 2.5em 3em 2em 3em;
    max-width: 600px;
    width: 98vw;
    margin: 2vw auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
}
.pay-title, .pay-info, .swish-section, .biljett-section {
    width: 100%;
    box-sizing: border-box;
}
.pay-title {
    color: #0057b8;
    font-size: 2.3em;
    font-weight: 800;
    margin-bottom: 0.6em;
    letter-spacing: .5px;
    text-align: center;
}
.pay-info {
    font-size: 1.23em;
    color: #233;
    text-align: center;
    margin-bottom: 1.1em;
    line-height: 1.5;
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.2em;
    padding-right: 1.2em;
}
.swish-section, .biljett-section {
    width: 100%;
    margin-bottom: 2.2em;
    text-align: center;
    box-sizing: border-box;
    padding-left: 1.2em;
    padding-right: 1.2em;
}
.swish-section .qr-wrap,
#swishQR,
.biljett-section .qr-wrap,
#ticketQR {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.1em;
    margin-top: 0.6em;
    width: 100%;
}
.swish-section img,
#swishQR img,
.biljett-section img,
#ticketQR img {
    background: #fff;
    padding: 0.4em;
    border-radius: 1em;
    box-shadow: 0 2px 6px #0057b80c;
    max-width: 220px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.biljett-section .ticket-info {
    text-align: left;
    font-size: 1.15em;
    margin: 0 auto;
    //max-width: 400px;
    width: 100%;
    word-break: break-word;
    padding-left: 0.2em;
    padding-right: 0.2em;
}

.pdf-btn, .swish-btn {
    background: #33a856;
    color: #fff;
    font-size: 1.17em;
    font-weight: 700;
    border: none;
    padding: 0.8em 1em;
    border-radius: 1.3em;
    margin: 1.1em auto 0.3em auto;
    display: block;
    width: 100%;
    max-width: 325px;
    box-shadow: 0 2px 5px #0c6e2e20;
    text-align: center;
    text-decoration: none;
    transition: background .2s;
    cursor: pointer;
}
.swish-btn {
    background: #0057b8;
    margin-top: 0.5em;
}
.pdf-btn:hover { background: #237d3f; }
.swish-btn:hover { background: #004080; color: #fff; }

/*
@media (max-width:800px) {
    .pay-card { padding: 1.5em 0.7em 1.1em 0.7em; max-width: 99vw; }
    .pay-title { font-size: 1.17em; }
    .pay-info { font-size: 1.01em; }
    .biljett-section .ticket-info { font-size: 0.98em; }
}
*/
@media (max-width:576px) {
    .pay-card { padding: 0.9em 0.1em 0.8em 0.1em; border-radius:1.1em;}
    .pay-title { font-size: 1.19em; }
    .pay-info { padding-left: 0.5em; padding-right: 0.5em; }
    .swish-section, .biljett-section { padding-left: 0.5em; padding-right: 0.5em; }
    .swish-section img,
    #swishQR img,
    .biljett-section img,
    #ticketQR img { max-width: 200px; min-width: 90px; padding: 0.12em; }
    .biljett-section .ticket-info { padding-left: 0.1em; padding-right: 0.1em; }
    .pdf-btn, .swish-btn { font-size: 0.99em; }
}


/* ----------------------------------------------------
   [ID:TICKET-VIEW-CARD]
---------------------------------------------------- */
.ticket-card {
    max-width: 410px;
    margin: 3.7em auto 2.3em auto;
    background: #fff;
    border-radius: 1.8em;
    box-shadow: 0 4px 22px #0057b83f;
    padding: 2.1em 1.4em 1.7em 1.4em;
}
.ticket-qr {margin:0.2em auto 1.2em auto;display:flex;justify-content:center;}
.ticket-info {font-size:1.12em;}
@media (max-width:576px){
    .ticket-card{padding:0.9em 0.5em 0.7em 0.5em; margin:.5em;}
    .ticket-info{font-size:1em;}
}

/* ----------------------------------------------------
   [ID:FOOTER]
---------------------------------------------------- */
.footer {
    background: #f3f5f7;
    color: #888;
    text-align: center;
    font-size: 1.1rem;
    padding: 2.2rem 0 1.5rem 0;
    margin-top: 5rem;
    border-top: 2px solid #e4e6e9;
}
footer.footer a { color: #0057b8; text-decoration: none; }
footer.footer a:hover { text-decoration: underline; }
@media (max-width:576px){
    .footer { font-size: 0.99rem; padding:1.4rem 0 0.7rem 0; margin-top:2.7rem;}
}