:root{
    --gold:#c9a86a;
    --gold-dark:#b48d42;
    --bg:#f8f8f8;
    --text:#222;
    --dark:#111;
}

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

body{
    font-family:Arial,Helvetica,sans-serif;
    background:var(--bg);
    color:var(--text);
}

a{
    text-decoration:none;
    color:inherit;
}

header{
    background:white;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    position:sticky;
    top:0;
    z-index:100;
}

.header-inner{
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px;
}

.logo{
    font-size:2rem;
    font-weight:bold;
    color:var(--gold-dark);
    letter-spacing:2px;
}

.menu{
    display:flex;
    align-items:center;
    gap:28px;
}

.language-switcher{
    display:flex;
    align-items:center;
    gap:4px;
    margin-left:12px;
    padding-left:18px;
    border-left:1px solid rgba(255,255,255,.15);
}

.language-switcher a{
    display:flex;
    align-items:center;
    justify-content:center;

    width:34px;
    height:34px;

    border-radius:50%;

    text-decoration:none;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;

    color:inherit;
    opacity:.65;

    transition:.2s;
}

.language-switcher a:hover{
    opacity:1;
    background:rgba(255,255,255,.08);
}

.language-switcher a.active{
    opacity:1;
    background:var(--gold);
    color:#fff;
}

.btn{
    background:var(--gold);
    color:white;
    padding:10px 18px;
    border-radius:8px;
    font-weight:bold;
    transition:.2s;
    display:inline-block;
    border:none;
    cursor:pointer;
}

.btn:hover{
    background:var(--gold-dark);
}

.btn-outline{
    border:2px solid var(--gold);
    color:var(--gold-dark);
    background:white;
}

.hero{
    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;
    color:white;
    padding:20px;
}

.hero-content{
    max-width:800px;
}

.hero h1{
    font-size:3.5rem;
    margin-bottom:20px;
}

.hero p{
    font-size:1.3rem;
    line-height:1.6;
    margin-bottom:30px;
}

.hero-buttons{
    display:flex;
    gap:15px;
    justify-content:center;
    flex-wrap:wrap;
}

.section{
    max-width:1200px;
    margin:auto;
    padding:70px 20px;
}

.section h2{
    text-align:center;
    margin-bottom:30px;
    font-size:2rem;
}

.features{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.card{
    background:white;
    border-radius:12px;
    padding:30px;
    box-shadow:0 5px 20px rgba(0,0,0,.06);
}

.card h3{
    margin-bottom:10px;
    color:var(--gold-dark);
}

.searchbox{
    background:white;
    border-radius:12px;
    padding:30px;
    box-shadow:0 5px 20px rgba(0,0,0,.06);
}

.searchbox form{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.searchbox input{
    flex:1;
    min-width:250px;
    padding:14px;
    border:1px solid #ccc;
    border-radius:8px;
}

.searchbox button{
    border:none;
    cursor:pointer;
}

.latest{
    display:grid;
    gap:15px;
}

.latest a{
    background:white;
    padding:20px;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,.05);
    display:block;
    transition:.2s;
}

.latest a:hover{
    border-left:5px solid var(--gold);
}

footer{
    background:#111;
    color:white;
    text-align:center;
    padding:40px 20px;
}

footer p{
    margin:5px 0;
}

input,
textarea,
select{
    padding:12px;
    border:1px solid #ccc;
    border-radius:8px;
    font-size:1rem;
}

table{
    width:100%;
    border-collapse:collapse;
}

th,
td{
    padding:12px;
    border-bottom:1px solid #ddd;
    text-align:left;
}

.alert{
    padding:15px;
    border-radius:8px;
    margin-bottom:15px;
}

.alert-success{
    background:#e8f5e9;
    color:#2e7d32;
}

.alert-danger{
    background:#ffebee;
    color:#c62828;
}

.alert-info{
    background:#e3f2fd;
    color:#1565c0;
}

@media(max-width:768px){

    .hero h1{
        font-size:2.3rem;
    }

    .hero p{
        font-size:1.1rem;
    }

    .menu{
        flex-wrap:wrap;
        justify-content:flex-end;
    }

}

.exhibition-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}

.section-header{
    text-align:center;
    margin-bottom:45px;
}

.section-header h2{
    font-size:38px;
    margin-bottom:10px;
}

.section-header p{
    color:#666;
    font-size:18px;
}

.exhibition-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 45px rgba(0,0,0,.15);
}

.exhibition-image{
    aspect-ratio:4/3;
    overflow:hidden;
}

.exhibition-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
}

.exhibition-info{
    padding:20px;
}

.exhibition-info h3{
    margin-bottom:8px;
    font-size:22px;
}

.exhibition-info p{
    color:#666;
}


/* --------------------------------------------------
   General card typography
-------------------------------------------------- */

.card h2{
    margin-top:50px;
    margin-bottom:20px;
    color:var(--gold-dark);
    line-height:1.3;
}

.card h2:first-child{
    margin-top:0;
}

.card p,
.card ul{
    margin-bottom:16px;
    line-height:1.6;
}

.card ul{
    padding-left:22px;
}

.card li{
    margin-bottom:8px;
}


/* --------------------------------------------------
   Card separators
-------------------------------------------------- */



/* --------------------------------------------------
   Extra spacing for document/rules pages
-------------------------------------------------- */

/*
   Gives substantial separation between consecutive
   topics inside a card. The first heading remains
   aligned with the top of the card.
*/

section.section > .card h2{
    margin-top:35px;
    margin-bottom:14px;
}


section.section > .card h2:first-child{
    margin-top:0;
}

section.section > .card hr{
    margin:50px 0 0;
    border:0;
    border-top:1px solid #ddd;
}


/* --------------------------------------------------
   Participations
-------------------------------------------------- */

.participation-row{
    display:flex;
    gap:24px;
    align-items:flex-start;
    background:#fff;
    border:1px solid #e8e8e8;
    border-radius:12px;
    padding:20px;
    margin-bottom:20px;
    transition:.2s;
}

.participation-row:hover{
    box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.participation-image{
    height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:10px;
}

.participation-image img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    display:block;
    border-radius:0;
}

.participation-main{
    flex:1;
}

.participation-main h3{
    margin:0 0 8px;
    font-size:1.25rem;
}

.participation-main h3 a{
    color:var(--text);
    text-decoration:none;
}

.participation-main h3 a:hover{
    color:var(--gold-dark);
}

.participation-main p{
    margin:8px 0;
    color:#555;
}

.participation-main strong{
    color:#111;
}

.participation-main .btn{
    margin-top:12px;
}

@media (max-width:700px){

    .participation-row{
        flex-direction:column;
    }

    .participation-image{
        width:100%;
    }

}


/* --------------------------------------------------
   Dashboard
-------------------------------------------------- */

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:20px;
}

.card-image-container{
    height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:10px;
}

.card-image{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    display:block;
}


/* --------------------------------------------------
   Exhibition slider
-------------------------------------------------- */

.exhibitionSwiper{
    padding:10px 5px 55px;
}

.exhibition-card{
    display:block;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
    transition:.25s;
}

.exhibition-card:hover{
    transform:translateY(-6px);
}

.swiper-button-next,
.swiper-button-prev{
    color:var(--gold-dark);
}

.swiper-pagination-bullet-active{
    background:var(--gold-dark);
}


/* --------------------------------------------------
   Exhibition status
-------------------------------------------------- */

.future-badge{
    display:inline-block;
    margin-bottom:6px;
    padding:3px 8px;
    border-radius:999px;
    background:#eef4ff;
    color:#496a9f;
    font-size:12px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.exhibition-future{
    color:#496a9f;
}

/* =========================================================
   Trovaval — unified responsive page layout
   Image sizing/layout rules above are intentionally preserved.
   ========================================================= */

html{
    -webkit-text-size-adjust:100%;
}

body{
    min-width:0;
    line-height:1.5;
}

.container{
    width:min(1200px, calc(100% - 40px));
    margin-left:auto;
    margin-right:auto;
}

.section{
    width:min(1200px, calc(100% - 40px));
    max-width:none;
    padding:56px 0;
}

.section > h1{
    line-height:1.2;
    margin-bottom:24px;
}

.section > p{
    line-height:1.6;
}

.btn{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.card{
    min-width:0;
}

.card + .card{
    /* Keep cards visually consistent when pages use adjacent cards. */
}

form{
    min-width:0;
}

input,
textarea,
select,
button{
    max-width:100%;
    font:inherit;
}

textarea{
    min-height:120px;
}

.table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.table th,
.table td{
    white-space:nowrap;
}

hr{
    border:0;
    border-top:1px solid #ddd;
}


/* Uniform form styling */
.card label{
    display:block;
    margin:18px 0 7px;
    font-weight:600;
    line-height:1.35;
}

.card label:first-child{
    margin-top:0;
}

.card input[type="text"],
.card input[type="number"],
.card input[type="email"],
.card input[type="file"],
.card input[type="datetime-local"],
.card textarea,
.card select{
    width:100%;
    min-height:44px;
    padding:11px 13px;
    border:1px solid #d5d5d5;
    border-radius:9px;
    background:#fff;
    color:var(--text);
    transition:border-color .15s ease, box-shadow .15s ease;
}

.card textarea{
    min-height:120px;
    resize:vertical;
}

.card input:focus,
.card textarea:focus,
.card select:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(201,168,106,.14);
}

.card input[type="checkbox"]{
    width:auto;
    min-height:auto;
    margin:0;
    accent-color:var(--gold-dark);
}

.card input[type="file"]{
    padding:8px 10px;
}

.card .form-help,
.card p.form-help{
    margin:7px 0 0;
    color:#777;
    font-size:.9rem;
    line-height:1.45;
}

.form-section-title{
    margin:0 0 20px;
    padding-bottom:12px;
    border-bottom:1px solid #eee;
}

.date-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:18px;
}

.date-field label{
    margin-top:0;
}

@media (max-width: 600px){
    .date-fields{
        grid-template-columns:1fr;
        gap:0;
    }
}

/* Prevent long email addresses, codes and other unbroken strings
   from forcing a page wider than the viewport. */
.card,
.section,
.container,
p,
h1,h2,h3,h4,
td,th{
    overflow-wrap:anywhere;
}

/* Consistent page spacing for common content blocks. */
.section-header{
    margin-bottom:38px;
}

.section-header h2{
    line-height:1.2;
}

.dashboard-grid{
    min-width:0;
}

@media (max-width: 768px){

    .container,
    .section{
        width:calc(100% - 28px);
    }

    .section{
        padding:38px 0;
    }

    .section-header{
        margin-bottom:28px;
    }

    .section-header h2{
        font-size:30px;
    }

    .section-header p{
        font-size:16px;
    }

    .card{
        padding:20px;
        border-radius:10px;
    }

    .card h2{
        margin-top:36px;
        font-size:1.35rem;
    }

    section.section > .card h2{
        margin-top:28px;
    }

    section.section > .card hr{
        margin:35px 0 0;
    }

    .features,
    .exhibition-grid,
    .dashboard-grid{
        grid-template-columns:1fr;
    }

    .hero{
        padding:24px 14px;
    }

    .hero h1{
        font-size:2.15rem;
        line-height:1.15;
    }

    .hero p{
        font-size:1rem;
    }

    .hero-buttons{
        gap:10px;
    }

    .hero-buttons .btn{
        width:100%;
        max-width:320px;
    }

    .searchbox{
        padding:20px;
    }

    .searchbox form{
        display:grid;
        grid-template-columns:1fr;
    }

    .searchbox input{
        min-width:0;
        width:100%;
    }

    .searchbox .btn,
    .searchbox button{
        width:100%;
    }

    .latest a{
        padding:16px;
    }

    .participation-row{
        padding:16px;
        gap:16px;
    }

    /* Data tables remain tables; they simply scroll horizontally. */
    .table th,
    .table td{
        padding:10px;
    }

    /* Make action groups usable with thumbs instead of squeezing
       several buttons onto one line. */
    .btn{
        padding:10px 14px;
    }

    footer{
        padding:30px 14px;
    }

}

@media (max-width: 480px){

    .container,
    .section{
        width:calc(100% - 24px);
    }

    .section{
        padding:30px 0;
    }

    .card{
        padding:16px;
    }

    .hero h1{
        font-size:1.9rem;
    }

    .section > h1{
        font-size:1.75rem;
    }

    .btn{
        width:100%;
    }

    .language-switcher a{
        width:32px;
        height:32px;
    }

}


/* ---------------------------------------------------------
   Responsive navigation
--------------------------------------------------------- */

.menu-toggle{
    display:none;
    width:44px;
    height:44px;
    padding:9px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;
    cursor:pointer;
    flex-direction:column;
    justify-content:center;
    gap:5px;
}

.menu-toggle span{
    display:block;
    width:100%;
    height:2px;
    background:var(--dark);
    border-radius:2px;
}

@media (max-width:768px){

    header{
        position:sticky;
    }

    .header-inner{
        min-height:64px;
        padding:10px 14px;
        position:relative;
    }

    .logo{
        font-size:1.65rem;
        letter-spacing:1.5px;
    }

    .menu-toggle{
        display:flex;
    }

    .menu{
        display:none;
        position:absolute;
        left:14px;
        right:14px;
        top:calc(100% + 1px);
        background:#fff;
        border-radius:0 0 12px 12px;
        box-shadow:0 10px 24px rgba(0,0,0,.12);
        padding:12px;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
    }

    .menu.is-open{
        display:flex;
    }

    .menu > a{
        display:flex;
        align-items:center;
        min-height:44px;
        padding:9px 10px;
        border-radius:7px;
    }

    .menu > a:hover{
        background:#f7f7f7;
    }

    .menu > a.btn{
        justify-content:center;
    }

    .language-switcher{
        margin:8px 0 0;
        padding:8px 0 0;
        border-left:0;
        border-top:1px solid #eee;
        justify-content:center;
    }

}


/* Full-screen overlays used by seller actions */
[id$="Modal"]{
    padding:20px;
    overflow-y:auto;
}

[id$="Modal"] > div{
    width:min(550px, 100%);
    max-height:calc(100vh - 40px);
    overflow-y:auto;
}

@media (max-width:768px){
    [id$="Modal"]{
        padding:12px;
    }

    [id$="Modal"] > div{
        margin:20px auto !important;
        padding:20px !important;
    }
}


@media (max-width:800px){
    /* Seller editor layouts */
    .seller-layout,
    .edit-layout{
        grid-template-columns:1fr !important;
    }
}

@media (max-width:800px){
    [style*="grid-template-columns:2fr 1fr"]{
        grid-template-columns:1fr !important;
    }
}

.dashboard-item-thumb {
    width:44px;
    height:44px;
    object-fit:cover;
    border-radius:5px;
    cursor:zoom-in;
    display:block;
    margin:auto;
}

#itemImagePreview {
    display:none;
    position:fixed;
    inset:0;
    z-index:10000;

    background:rgba(0,0,0,.65);

    align-items:center;
    justify-content:center;

    padding:20px;

    cursor:zoom-out;
}

#itemImagePreviewImage {
    max-width:300px;
    max-height:300px;

    width:auto;
    height:auto;

    object-fit:contain;

    background:#fff;
    padding:5px;
    border-radius:6px;

    box-shadow:
        0 10px 40px rgba(0,0,0,.4);
}