:root {

    --yellow-light: #f3f1c9;

    --red: #c02a28;

    --gold: #e7ac5d;

    --brown-light: #dfd4b8;

    --gray-light: #faf8f6;

    --border-color: #444;

}

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

body {

    background: #f2f2f2;

    font-family: 'Questrial', sans-serif;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    padding: 20px;

}

.container {

    max-width: 800px;

    width: 100%;

    transform-origin: center top;

}

.ticket {

    display: grid;

    grid-template-columns: auto 143px;

    background: var(--yellow-light);

    border-radius: 10px;

    border: 2px solid #222;

    cursor: default;

    margin-bottom: 30px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

    transform-origin: center top;

    transition: transform 0.3s ease;

}

.ticket__main {

    display: grid;

    grid-template-columns: repeat(6, 1fr) 120px;

    grid-template-rows: repeat(4, min-content) auto;

    padding: 10px;

}

.header {

    grid-column: span 7;

    grid-row: 1;

    font: 900 38px 'Montserrat', sans-serif;

    padding: 5px 0 5px 20px;

    letter-spacing: 6px;

    background: #111;

    color: var(--yellow-light);

    margin-bottom: 10px;

    border-radius: 5px;

}

.info {

    border: 3px solid;

    border-width: 0 3px 3px 0;

    padding: 8px;

    background: rgba(255, 255, 255, 0.5);

}

.info__item {

    font: 400 13px 'Questrial', sans-serif;

    letter-spacing: 0.5px;

    color: #555;

}

.info__detail {

    font: 700 20px/1 'Jura';

    letter-spacing: 1px;

    margin: 4px 0;

    color: #000;

}

.passenger {

    grid-column: 1 / span 6;

}

.platform {

    grid-column: 7 / span 1;

    grid-row: 2 / span 3;

    background: var(--red);

    color: #fff;

    border-color: #000;

    text-align: center;

    padding: 10px 0;

}

.platform span {

    display: block;

}

.platform span:nth-child(1) {

    font: 900 22px/1 'Montserrat';

    letter-spacing: 1.5px;

}

.platform span:nth-child(2) {

    font: 900 29px/1 'Montserrat';

    letter-spacing: 3px;

}

.platform span:nth-child(3) {

    font: 900 16px/1.2 'Montserrat';

    letter-spacing: 0.5px;

}

.platform .number {

    display: flex;

    margin-top: 12px;

    position: relative;

    justify-content: center;

    align-items: center;

    height: 100px;

}

.platform .number div:nth-child(1) {

    font: 900 90px/1 'Old Standard TT', serif;

    position: absolute;

    left: 16px;

}

.platform .number span {

    font: 900 36px/1 'Old Standard TT', serif;

    position: absolute;

    right: 18px;

}

.platform .number span:nth-child(1) {

    top: -2px;

    border-bottom: 2px solid;

    padding: 0 2px;

}

.platform .number span:nth-child(2) {

    top: 44px;

}

.departure, .arrival {

    grid-column-start: span 3;

}

.passenger, .departure, .date {

    border-left: 3px solid;

}

.date, .time {

    grid-column-start: span 2;

}

.fineprint {

    grid-column-start: span 5;

    font-size: 14px;

    font-family: 'Inconsolata';

    line-height: 1;

    margin-top: 10px;

    padding-right: 5px;

}

.fineprint p:nth-child(2) {

    margin: 4px 4px 0 0;

    padding-top: 4px;

    border-top: 1.5px dotted;

    font: 11px/1 'Inconsolata';

}

.snack {

    grid-column: 6 / span 1;

    width: 65px;

    margin: 10px 10px 0 0;

    position: relative;

    background: #000;

    padding: 6px 0 2px;

    text-align: center;

    border-radius: 5px;

}

.snack svg {

    fill: var(--yellow-light);

    width: 36px;

}

.barcode {

    grid-column-start: span 1;

    display: grid;

    margin: 10px 0 0;

    grid-template-rows: 1fr min-content;

}

.barcode__scan {

    background: linear-gradient(to right, 

        #333 2%, #333 4%, transparent 4%, transparent 5%, 

        #333 5%, #333 6%, transparent 6%, #333 6%, 

        #333 8%, transparent 8%, transparent 9%, #333 9%, 

        #333 10.5%, transparent 10.5%, transparent 11%, 

        #333 11%, #333 12%, transparent 12%, transparent 13.5%, 

        #333 13.5%, #333 15%, #333 17%, transparent 17%, 

        transparent 19%, #333 19%, #333 20%, transparent 20%, 

        transparent 21%, #333 21%, #333 22%, transparent 22%, 

        transparent 23.5%, #333 23.5%, #333 25%, transparent 25%, 

        transparent 26.5%, #333 26.5%, #333 27.5%, transparent 27.5%, 

        transparent 28.5%, #333 28.5%, #333 30%, transparent 30%, 

        transparent 32%, #333 32%, #333 34%, #333 36%, transparent 36%, 

        transparent 37.5%, #333 37.5%, #333 40%, transparent 40%, 

        transparent 41.5%, #333 41.5%, #333 43%, transparent 43%, 

        transparent 46%, #333 46%, #333 48%, transparent 48%, 

        transparent 49%, #333 49%, transparent 49%, transparent 50%, 

        #333 50%, #333 51%, transparent 51%, transparent 53%, 

        #333 53%, #333 54.5%, transparent 54.5%, transparent 56%, 

        #333 56%, #333 58%, transparent 58%, transparent 59%, 

        #333 59%, #333 60%, #333 62.5%, transparent 62.5%, 

        transparent 64%, #333 64%, #333 64%, #333 67%, transparent 67%, 

        transparent 69%, #333 69%, #333 70%, transparent 70%, 

        transparent 71%, #333 71%, #333 72%, transparent 72%, 

        transparent 73.5%, #333 73.5%, #333 76%, transparent 76%, 

        transparent 79%, #333 79%, #333 80%, transparent 80%, 

        transparent 82%, #333 82%, #333 82.5%, transparent 82.5%, 

        transparent 84%, #333 84%, #333 87%, transparent 87%, 

        transparent 89%, #333 89%, #333 91%, transparent 91%, 

        transparent 92%, #333 92%, #333 95%, transparent 95%);

    height: 80px;

}

.barcode__id {

    letter-spacing: 4px;

    padding: 2px 0 0;

    color: var(--red);

    font: 700 16px/1 'Jura';

    text-align: center;

}

.ticket__side {

    background: rgba(192, 42, 40, 0.2);

    box-sizing: border-box;

    border-left: 1.5px dashed #111;

    display: grid;

    grid-template-rows: repeat(2, 124px) 60px;

    grid-template-columns: 40px repeat(2, 45px);

    border-radius: 0 10px 10px 0;

}

.ticket__side .logo {

    text-align: center;

    background: var(--red);

    padding: 10px 5px 10px 0px;

    margin: 10px 0 0 10px;

    font: 900 16px/1 'Montserrat';

    letter-spacing: 1.5px;

    grid-column: 1 / span 1;

    grid-row: 1 / span 2;

    position: relative;

    color: #fff;

    writing-mode: vertical-rl;

}

.ticket__side .logo p {

    transform: rotate(180deg);

}

.ticket__side .info {

    border: 3px solid var(--red);

    border-width: 3px 3px 0;

    grid-column-start: 2;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    background: rgba(255, 255, 255, 0.7);

}

.ticket__side .side-arrive {

    margin-top: 10px;

    border-width: 3px;

}

.ticket__side .side-date {

    grid-column-start: 3;

    border-right: none;

}

.ticket__side .side-time {

    grid-column: 3 / span 1;

    grid-row: 1;

    margin-top: 10px;

    border-width: 3px 0 3px 3px;

}

.ticket__side .info__item {

    font-size: 11px;

    color: var(--red);

}

.ticket__side .info__detail {

    font-size: 12px;

    margin: 0 2px 0 0;

    letter-spacing: 0px;

}

.ticket__side .barcode {

    grid-template-rows: 30px min-content;

    grid-row-start: 3;

    grid-column: 1 / span 3;

    margin: 9px 0 0 10px;

    text-align: center;

}

.ticket__side .barcode__scan {

    height: 30px;

}

.controls {

    background: white;

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

}

.controls h3 {

    margin-bottom: 15px;

    color: var(--red);

    font-family: 'Montserrat', sans-serif;

}

.input-group {

    margin-bottom: 15px;

}

.input-group label {

    display: block;

    margin-bottom: 5px;

    font-weight: bold;

}

.input-group input {

    width: 100%;

    padding: 10px;

    border: 2px solid var(--brown-light);

    border-radius: 5px;

    font-family: 'Questrial', sans-serif;

}

#update-btn {

    background: var(--red);

    color: white;

    border: none;

    padding: 12px 20px;

    border-radius: 5px;

    cursor: pointer;

    font-family: 'Montserrat', sans-serif;

    font-weight: bold;

    width: 100%;

    transition: background 0.3s;

}

#update-btn:hover {

    background: #a52220;

}

.editable {

    cursor: pointer;

    transition: all 0.3s;

    padding: 2px 5px;

    border-radius: 3px;

}

.editable:hover {

    background: rgba(231, 172, 93, 0.2);

}

/* Responsive design */

@media (max-width: 768px) {

    .container {

        transform: scale(0.9);

    }

}

@media (max-width: 600px) {

    .container {

        transform: scale(0.8);

    }

    

    .ticket {

        grid-template-columns: 1fr;

    }

    

    .ticket__side {

        display: none;

    }

    

    .ticket__main {

        grid-template-columns: 1fr;

    }

    

    .header, .passenger, .platform, .departure, 

    .arrival, .date, .time, .carriage, .seat, 

    .fineprint, .snack, .barcode {

        grid-column: 1;

    }

    

    .platform {

        grid-row: auto;

    }

}

@media (max-width: 480px) {

    .container {

        transform: scale(0.7);

    }

}

/* Print styles */

@media print {

    .controls {

        display: none;

    }

    

    body {

        padding: 0;

    }

    

    .container {

        max-width: 100%;

        transform: scale(1);

    }

}