/* =========================================================
   Il Regno – Calendario Stagionalità  |  v2.2.0
   Design: mint bg · DM Serif title · pill tabs · dot indicators
   ========================================================= */

/* ----------------------------------------------------------
   Reset isolato
   ---------------------------------------------------------- */
.ilregno-cal *,
.ilregno-cal *::before,
.ilregno-cal *::after {
    box-sizing: border-box;
}

.ilregno-cal img,
.ilregno-cal svg {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: none;
}

/* ----------------------------------------------------------
   Variabili
   ---------------------------------------------------------- */
.ilregno-cal {
    --ir-mint:          #ddeee8;
    --ir-mint-dark:     #c8e2d8;
    --ir-olive:         #89A831;
    --ir-olive-bright:  #7ab030;
    --ir-olive-hover:   #6a9628;
    --ir-tab-active:    #32373c;
    --ir-dark:          #1e2d26;
    --ir-text:          #2c3b34;
    --ir-muted:         #6b7e76;
    --ir-dot-empty:     #bdd4cb;
    --ir-current-col:   rgba(255, 252, 210, .65);
    --ir-white:         #ffffff;
    --ir-border:        #ccddd6;
    --ir-font:          "Inter", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ir-gap:           32px;
    --ir-radius-card:   12px;
    --ir-radius-tab:    100px;

    font-family:   var(--ir-font);
    font-size:     14px;
    line-height:   1.5;
    color:         var(--ir-text);
    background:    var(--ir-mint);
    border-radius: var(--ir-radius-card);
    overflow:      hidden;
    max-width:     100%;
}

/* ----------------------------------------------------------
   HEADER — titolo + descrizione a sinistra, tab a destra
   ---------------------------------------------------------- */
.ilregno-cal__header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             24px;
    padding:         36px var(--ir-gap) 28px;
}

.ilregno-cal__header-text {
    flex: 1;
    min-width: 0;
}

.ilregno-cal__title {
    margin:         0 0 10px;
    font-family:    "DM Serif Display", Georgia, "Times New Roman", serif;
    font-size:      2rem;
    font-weight:    400;
    line-height:    1.15;
    letter-spacing: -.5px;
    color:          var(--ir-dark) !important;
}

.ilregno-cal__desc {
    margin:      0;
    font-size:   .83rem;
    line-height: 1.65;
    color:       var(--ir-muted) !important;
    max-width:   420px;
}

/* ----------------------------------------------------------
   TAB — pill style, parte dell'header
   ---------------------------------------------------------- */
.ilregno-cal__tabs {
    display:    flex;
    gap:        8px;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 6px; /* allinea visivamente con prima riga testo */
}

/* Reset button + pill style — alta specificità per battere il tema */
.ilregno-cal .ilregno-cal__tabs .ilregno-cal__tab {
    -webkit-appearance: none !important;
    appearance:         none !important;
    display:            inline-flex !important;
    align-items:        center !important;
    justify-content:    center !important;
    cursor:             pointer !important;

    padding:            9px 22px !important;
    margin:             0 !important;

    font-family:        var(--ir-font) !important;
    font-size:          .80rem !important;
    font-weight:        600 !important;
    letter-spacing:     .2px !important;
    text-transform:     none !important;
    white-space:        nowrap !important;
    text-decoration:    none !important;
    line-height:        1 !important;

    color:              var(--ir-text) !important;
    background:         var(--ir-white) !important;
    border:             1.5px solid var(--ir-border) !important;
    border-radius:      var(--ir-radius-tab) !important;
    box-shadow:         none !important;
    outline:            none !important;

    transition:         background .18s, color .18s, border-color .18s, box-shadow .18s !important;
}

.ilregno-cal .ilregno-cal__tabs .ilregno-cal__tab:hover {
    border-color: var(--ir-muted) !important;
    background:   var(--ir-white) !important;
}

.ilregno-cal .ilregno-cal__tabs .ilregno-cal__tab--active {
    color:        var(--ir-white) !important;
    background:   var(--ir-tab-active) !important;
    border-color: var(--ir-tab-active) !important;
    box-shadow:   0 2px 6px rgba(0,0,0,.20) !important;
}

.ilregno-cal .ilregno-cal__tabs .ilregno-cal__tab:focus-visible {
    outline:        2px solid var(--ir-olive) !important;
    outline-offset: 2px !important;
}

/* ----------------------------------------------------------
   CARD — area bianca con search + tabelle
   ---------------------------------------------------------- */
.ilregno-cal__card {
    background:    var(--ir-white);
    border-radius: var(--ir-radius-card) var(--ir-radius-card) 0 0;
    margin:        0 var(--ir-gap) 0;
    border:        1px solid var(--ir-border);
    border-bottom: none;
    overflow:      hidden;
}

/* ----------------------------------------------------------
   TOOLBAR — barra ricerca dentro la card
   ---------------------------------------------------------- */
.ilregno-cal__toolbar {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       14px 20px;
    border-bottom: 1px solid #eef3f1;
    background:    #f8fbf9;
}

.ilregno-cal__search {
    flex:          1;
    max-width:     340px;
    padding:       8px 18px;
    font-family:   var(--ir-font);
    font-size:     .85rem;
    color:         var(--ir-text);
    background:    var(--ir-white);
    border:        1.5px solid var(--ir-border);
    border-radius: 24px;
    outline:       none;
    -webkit-appearance: none;
    appearance:    none;
    display:       block;
    margin:        0;
    box-shadow:    none;
    transition:    border-color .18s, box-shadow .18s;
}

.ilregno-cal__search:focus {
    border-color: var(--ir-olive);
    box-shadow:   0 0 0 3px rgba(137, 168, 49, .14);
}

.ilregno-cal__search::placeholder { color: var(--ir-muted); }

.ilregno-cal__count {
    font-size:     .78rem;
    font-weight:   600;
    color:         var(--ir-muted);
    white-space:   nowrap;
    display:       none;
    padding:       3px 0;
}

.ilregno-cal__count:not(:empty) { display: inline-block; }

/* ----------------------------------------------------------
   PANNELLI
   ---------------------------------------------------------- */
.ilregno-cal__panel         { display: none; }
.ilregno-cal__panel--active { display: block; }

/* ----------------------------------------------------------
   TABELLA
   ---------------------------------------------------------- */
.ilregno-cal__table-wrap {
    overflow-x:               auto;
    overflow-y:               auto;
    max-height:               75vh;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:          thin;
    scrollbar-color:          var(--ir-border) transparent;
}

.ilregno-cal__table {
    width:           100%;
    border-collapse: collapse;
    border-spacing:  0;
    min-width:       560px;
    table-layout:    auto;
}

/* Reset esplicito su tutte le celle — batte il tema Hello Elementor */
.ilregno-cal__table th,
.ilregno-cal__table td {
    border:     none !important;
    box-shadow: none !important;
    outline:    none !important;
}

.ilregno-cal__table caption {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0,0,0,0);
    white-space: nowrap;
    border:     0;
}

/* ----------------------------------------------------------
   INTESTAZIONI TABELLA
   ---------------------------------------------------------- */
.ilregno-cal__table thead tr {
    background: transparent;
    box-shadow: inset 0 -1.5px 0 #daeae1;
}

.ilregno-cal__th-product {
    text-align:   left;
    padding:      12px 18px 10px;
    font-size:    .68rem;
    font-weight:  700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color:        var(--ir-muted) !important;
    min-width:    200px;
    white-space:  nowrap;
    box-shadow:   inset -1px 0 0 #e8efec;

    position:   sticky;
    left:       0;
    top:        0;
    z-index:    11;
    background: var(--ir-white);
}

.ilregno-cal__th-month {
    text-align:   center;
    padding:      12px 4px 10px;
    font-size:    .65rem;
    font-weight:  600;
    letter-spacing: .6px;
    color:        var(--ir-muted) !important;
    min-width:    44px;
    max-width:    60px;
    white-space:  nowrap;

    position:   sticky;
    top:        0;
    z-index:    10;
    background: var(--ir-white);
}

.ilregno-cal__th-month--current {
    color:          var(--ir-dark) !important;
    font-weight:    700 !important;
    font-size:      .68rem !important;
    background:     var(--ir-current-col) !important;
    border-radius:  6px 6px 0 0;
}


/* ----------------------------------------------------------
   RIGHE PRODOTTO
   ---------------------------------------------------------- */
.ilregno-cal__row {
    box-shadow: inset 0 -1px 0 #eef4f0;
    transition: background .12s;
}

.ilregno-cal__row:last-child { box-shadow: none; }

.ilregno-cal__row:hover { background: #f4faf7 !important; }

/* Colonna prodotto — sticky */
.ilregno-cal__td-product {
    padding:        0;
    min-width:      200px;
    vertical-align: middle;

    position:   sticky;
    left:       0;
    z-index:    2;
    background: var(--ir-white);
    transition: background .1s;
}

/* Linea separatrice destra via box-shadow (non sovrascrivibile dal tema) */
.ilregno-cal__product-inner {
    box-shadow: inset -1px 0 0 #e8efec;
}

.ilregno-cal__row:hover .ilregno-cal__td-product {
    background: #f4faf7;
}

.ilregno-cal__row:hover .ilregno-cal__product-inner {
    box-shadow: inset -1px 0 0 #d5e4dc;
}

/* Wrapper flex DENTRO il td (non su td direttamente) */
.ilregno-cal__product-inner {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     10px 18px;
}

/* Immagine prodotto */
.ilregno-cal__product-img {
    width:         44px;
    height:        44px;
    border-radius: 7px;
    object-fit:    cover;
    flex-shrink:   0;
    display:       block;
    margin:        0;
}

/* Emoji fallback (nessuna immagine) */
.ilregno-cal__product-emoji {
    width:          44px;
    height:         44px;
    border-radius:  7px;
    background:     var(--ir-mint);
    flex-shrink:    0;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      24px;
    line-height:    1;
    user-select:    none;
}

/* Testo prodotto */
.ilregno-cal__product-info {
    display:        flex;
    flex-direction: column;
    gap:            3px;
    min-width:      0;
}

.ilregno-cal__product-name {
    display:        block;
    color:          var(--ir-dark) !important;
    font-size:      .90rem;
    font-weight:    600;
    line-height:    1.3;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.ilregno-cal__product-latin {
    display:        block;
    color:          var(--ir-muted) !important;
    font-size:      .70rem;
    font-style:     italic;
    line-height:    1.2;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    letter-spacing: .2px;
}

/* ----------------------------------------------------------
   CELLE MESI
   ---------------------------------------------------------- */
.ilregno-cal__td-month {
    text-align:     center;
    padding:        14px 4px;
    vertical-align: middle;
}

.ilregno-cal__td-month--current {
    background: var(--ir-current-col) !important;
}

/* ----------------------------------------------------------
   DOT INDICATOR
   ---------------------------------------------------------- */
.ilregno-cal__dot {
    display:       block;
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--ir-dot-empty);
    margin:        0 auto;
    transition:    transform .12s, background .12s;
}

.ilregno-cal__dot--on {
    width:      11px;
    height:     11px;
    background: var(--ir-olive-bright);
}

/* Dot nella colonna corrente — leggermente più grande + colore pieno */
.ilregno-cal__td-month--current .ilregno-cal__dot {
    background: rgba(142, 165, 165, .35);
}

.ilregno-cal__td-month--current .ilregno-cal__dot--on {
    width:      13px;
    height:     13px;
    background: var(--ir-olive-hover);
    box-shadow: 0 0 0 3px rgba(106, 150, 40, .20);
}

.ilregno-cal__row:hover .ilregno-cal__dot--on {
    transform: scale(1.15);
}

/* ----------------------------------------------------------
   NESSUN RISULTATO
   ---------------------------------------------------------- */
.ilregno-cal__no-results {
    padding:    var(--ir-gap) var(--ir-gap);
    text-align: center;
    color:      var(--ir-muted);
    font-size:  .85rem;
    margin:     0;
}

/* ----------------------------------------------------------
   CHIUSURA CARD (arrotonda il basso del contenitore)
   ---------------------------------------------------------- */
.ilregno-cal__card::after {
    content:  '';
    display:  block;
    height:   1px;
    background: var(--ir-border);
}

/* Padding inferiore del container mint */
.ilregno-cal::after {
    content:  '';
    display:  block;
    height:   var(--ir-gap);
    background: var(--ir-mint);
}

/* ----------------------------------------------------------
   LINGUA — toggle IT / EN
   ---------------------------------------------------------- */

/* Default IT: mostra IT, nasconde EN */
.ilregno-cal--lang-it .ilregno-cal__name-en { display: none; }
.ilregno-cal--lang-en .ilregno-cal__name-it { display: none; }

/* Bottoni toggle */
.ilregno-cal__lang-toggle {
    display:        flex;
    gap:            2px;
    margin-left:    auto;
    flex-shrink:    0;
}

.ilregno-cal__lang-btn {
    all:            unset;
    cursor:         pointer;
    padding:        4px 10px;
    border-radius:  20px;
    font-size:      .72rem;
    font-weight:    700;
    letter-spacing: .5px;
    color:          var(--ir-muted);
    border:         1px solid transparent;
    transition:     background .15s, color .15s;
    line-height:    1.4;
}

.ilregno-cal__lang-btn:hover {
    background: var(--ir-mint);
    color:      var(--ir-olive);
}

.ilregno-cal__lang-btn--active {
    background: var(--ir-tab-active) !important;
    color:      #fff !important;
}

/* ----------------------------------------------------------
   MOBILE CARDS — nascoste su desktop
   ---------------------------------------------------------- */
.ilregno-cal__mcard-list { display: none; }

/* ----------------------------------------------------------
   FALLBACK sticky
   ---------------------------------------------------------- */
.ilregno-cal--no-sticky .ilregno-cal__th-product,
.ilregno-cal--no-sticky .ilregno-cal__th-month,
.ilregno-cal--no-sticky .ilregno-cal__td-product {
    position: static;
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 900px) {
    .ilregno-cal { --ir-gap: 20px; }

    .ilregno-cal__header {
        flex-direction: column;
        gap:            20px;
    }

    .ilregno-cal__tabs {
        align-self: flex-start;
        margin-top: 0;
    }

    .ilregno-cal__title { font-size: 1.65rem; }

    /* Scroll indicator — gradiente bianco sul bordo destro */
    .ilregno-cal__table-wrap {
        position: relative;
    }
    .ilregno-cal__table-wrap::after {
        content:    '';
        position:   absolute;
        top:        0;
        right:      0;
        bottom:     0;
        width:      28px;
        background: linear-gradient(to right, transparent, rgba(255,255,255,.95));
        pointer-events: none;
        z-index:    20;
    }
}

@media (max-width: 600px) {
    .ilregno-cal { --ir-gap: 16px; }
    .ilregno-cal__title { font-size: 1.4rem; }
    .ilregno-cal__desc  { display: none; }

    .ilregno-cal .ilregno-cal__tabs .ilregno-cal__tab {
        padding: 8px 16px !important;
        font-size: .75rem !important;
    }

    /* Tabs: scroll orizzontale */
    .ilregno-cal__tabs {
        overflow-x:  auto;
        flex-wrap:   nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ilregno-cal__tabs::-webkit-scrollbar { display: none; }

    /* Search full-width */
    .ilregno-cal__search { max-width: none; }

    /* Nascondi tabella, mostra card */
    .ilregno-cal__table-wrap { display: none !important; }
    .ilregno-cal__table-wrap::after { display: none; }

    .ilregno-cal__mcard-list {
        display: block;
        padding: 8px 12px 4px;
    }

    .ilregno-cal__mcard {
        display:        flex;
        flex-direction: column;
        border-radius:  10px;
        border:         1px solid var(--ir-border);
        padding:        12px;
        margin-bottom:  10px;
        background:     var(--ir-white);
    }

    .ilregno-cal__mcard[hidden] { display: none !important; }

    .ilregno-cal__mcard-header {
        display:       flex;
        align-items:   center;
        gap:           10px;
        margin-bottom: 10px;
    }

    /* Riusa le classi prodotto esistenti — solo override white-space */
    .ilregno-cal__mcard .ilregno-cal__product-name {
        white-space: normal;
    }

    /* Griglia mesi 6×2 */
    .ilregno-cal__mcard-grid {
        display:               grid;
        grid-template-columns: repeat(6, 1fr);
        gap:                   4px 2px;
    }

    .ilregno-cal__mcard-cell {
        display:        flex;
        flex-direction: column;
        align-items:    center;
        gap:            4px;
        padding:        6px 2px;
        border-radius:  6px;
    }

    .ilregno-cal__mcard-cell--current {
        background: var(--ir-current-col);
    }

    .ilregno-cal__mcard-label {
        font-size:      .60rem;
        font-weight:    600;
        color:          var(--ir-muted);
        text-transform: uppercase;
        letter-spacing: .3px;
        line-height:    1;
    }
}