/* =========================================================================
   Petali d'Arte su Joomla: integrazione con template Flex, SP Page Builder
   e BA Gallery. Il resto dell'aspetto viene dai CSS originali del sito
   (design-system, components, layout, pages).
   ========================================================================= */

/* --- Flex: il layout del tema diventa un contenitore neutro --------------- */
.petali-site .body-innerwrapper,
.petali-site #sp-main-body,
.petali-site #sp-component,
.petali-site .layout-column,
.petali-site #sp-petali-header,
.petali-site #sp-petali-footer {
    padding: 0;
    margin: 0;
    background: transparent;
}

.petali-site #sp-main-body > .container,
.petali-site #sp-main-body > .container-fluid,
.petali-site #sp-petali-header > .container-fluid,
.petali-site #sp-petali-footer > .container-fluid,
.petali-site #sp-main-body .row,
.petali-site #sp-petali-header .row,
.petali-site #sp-petali-footer .row {
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.petali-site .sp-column,
.petali-site .sp-module,
.petali-site .sp-module-content {
    padding: 0;
    margin: 0;
}

.petali-site .body-wrapper,
.petali-site .body-innerwrapper {
    overflow: visible;
}

/* Elementi di Flex non usati (il sito ha il proprio menu mobile) */
.petali-site .offcanvas-menu,
.petali-site .offcanvas-overlay,
.petali-site .sp-scroll-up,
.petali-site .sp-pre-loader {
    display: none !important;
}

/* L'header originale e' "sticky" rispetto alla pagina: i contenitori di Flex attorno non devono fare da limite */
.petali-site #sp-petali-header,
.petali-site #sp-petali-header > .container-fluid,
.petali-site #sp-petali-header > .container,
.petali-site #sp-petali-header .row,
.petali-site #sp-petali-header .layout-column,
.petali-site #sp-petali-header [class*="col-"],
.petali-site #sp-petali-header .sp-column,
.petali-site #sp-petali-header .sp-module,
.petali-site #sp-petali-header .sp-module-content {
    display: contents;
}

.petali-site .body-innerwrapper,
.petali-site .body_innerwrapper_overflow,
.petali-site .body-wrapper {
    overflow: visible !important;
}

/* Messaggi di sistema Joomla con l'aspetto degli avvisi del sito (solo se presenti) */
.petali-site #system-message-container:has(joomla-alert, .alert) {
    width: min(1200px, calc(100% - 32px));
    margin: 24px auto;
}

.petali-site #system-message-container joomla-alert {
    border-radius: var(--radius-lg, 16px);
}

/* --- SP Page Builder: righe a tutta larghezza senza spaziature proprie ------- */
.petali-site #sp-page-builder .page-content > .sppb-section,
.petali-site #sp-page-builder .sppb-section.pet-row {
    padding: 0;
    margin: 0;
    background: transparent;
}

.petali-site #sp-page-builder .pet-row > .sppb-row-container,
.petali-site #sp-page-builder .pet-row .sppb-container-inner,
.petali-site #sp-page-builder .pet-row .sppb-row,
.petali-site #sp-page-builder .pet-row .sppb-column,
.petali-site #sp-page-builder .pet-row .sppb-column-addons,
.petali-site #sp-page-builder .pet-row .sppb-addon-wrapper,
.petali-site #sp-page-builder .pet-row .sppb-col-md-12 {
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.petali-site #sp-page-builder .pet-row .sppb-row {
    display: block;
}

.petali-site #sp-page-builder .pet-row .sppb-addon-wrapper,
.petali-site #sp-page-builder .pet-row .sppb-addon {
    margin: 0;
}

/* Testo libero (addon Testo) dentro le sezioni del sito: eredita la tipografia originale */
.petali-site .sppb-addon-text-block .sppb-addon-content > :last-child {
    margin-bottom: 0;
}

/* --- Dettagli evento / galleria (viste del componente) ------------------------ */
.petali-site .pet-page--evento .event-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md, 12px);
}

/* --- BA Gallery nella pagina galleria: griglia e foto come nel sito originale --- */
.pet-ba-gallery {
    margin-top: var(--space-xl, 2rem);
    margin-bottom: var(--space-3xl, 4rem);
}

.pet-ba-gallery .ba-gallery-items .ba-image,
.pet-ba-gallery .ba-gallery-items .ba-caption {
    border-radius: var(--radius-md, 12px);
}

.pet-ba-gallery .ba-gallery-items .ba-image {
    overflow: hidden;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    transition: transform var(--transition-base, 250ms ease), box-shadow var(--transition-base, 250ms ease);
}

.pet-ba-gallery .ba-gallery-items .ba-image:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-md, 0 10px 25px rgba(0, 0, 0, 0.1));
}

/* --- Area riservata ------------------------------------------------------------ */
.pet-page--area .welcome-card .btn-outline:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* --- Login / pagine Joomla standard con l'aspetto del sito --------------------- */
.petali-site .com-users-login,
.petali-site .com-users-logout,
.petali-site .com-users-remind,
.petali-site .com-users-reset,
.petali-site.view-login #sp-component .container.login,
.petali-site.view-login #sp-component .container.logout,
.petali-site.view-remind #sp-component .container,
.petali-site.view-reset #sp-component .container {
    width: min(480px, calc(100% - 32px));
    margin: clamp(2rem, 1rem + 5vw, 5rem) auto clamp(3rem, 2rem + 4vw, 6rem);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: rgba(255, 255, 255, 0.86);
    border-radius: 26px;
    box-shadow: 0 22px 58px rgba(67, 42, 28, 0.10);
}

.petali-site :is(.com-users-login, .container.login) .page-header h1,
.petali-site .com-users-logout .page-header h1,
.petali-site .com-users-remind .page-header h1,
.petali-site .com-users-reset .page-header h1 {
    margin: 0 0 0.35rem;
    font-size: var(--step-5, 2.25rem);
}

.petali-site .com-users-login__description,
.petali-site .login-description,
.petali-site :is(.com-users-login, .container.login) .login-description {
    margin: 0 0 1.5rem;
    color: var(--color-text-light);
    font-size: var(--step--1, 0.95rem);
    line-height: 1.6;
}

.petali-site :is(.com-users-login, .container.login) fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.petali-site :is(.com-users-login, .container.login) .control-group,
.petali-site :is(.com-users-login, .container.login) .mb-3 {
    margin-bottom: var(--space-md, 1rem);
}

.petali-site :is(.com-users-login, .container.login) .control-label label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: var(--step--1, 0.95rem);
    color: var(--color-text-dark);
}

.petali-site :is(.com-users-login, .container.login) .star {
    color: var(--color-primary, #E63946);
}

.petali-site :is(.com-users-login, .container.login) input[type="text"],
.petali-site :is(.com-users-login, .container.login) input[type="password"],
.petali-site :is(.com-users-login, .container.login) input[type="email"] {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(80, 54, 40, 0.18);
    background: #fff;
}

.petali-site :is(.com-users-login, .container.login) input:focus-visible {
    outline: 2px solid var(--color-primary, #E63946);
    outline-offset: 1px;
    border-color: transparent;
}

.petali-site :is(.com-users-login, .container.login) .input-group {
    display: flex;
    align-items: stretch;
}

.petali-site :is(.com-users-login, .container.login) .input-group input {
    border-radius: 12px 0 0 12px;
    flex: 1;
    min-width: 0;
}

.petali-site :is(.com-users-login, .container.login) .input-password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 0 0.9rem;
    border: 1px solid rgba(80, 54, 40, 0.18);
    border-left: 0;
    border-radius: 0 12px 12px 0;
    background: var(--color-bg-main, #f8f9fa);
    color: var(--color-text-dark);
    font-size: 0.85rem;
    cursor: pointer;
}

.petali-site :is(.com-users-login, .container.login) .checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
}

.petali-site :is(.com-users-login, .container.login) .checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary, #E63946);
}

.petali-site :is(.com-users-login, .container.login) .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 0.5rem;
}

.petali-site :is(.com-users-login, .container.login) .btn-primary,
.petali-site :is(.com-users-login, .container.login) button[type="submit"] {
    width: 100%;
    min-height: 50px;
    margin: 0 !important;
    background: var(--color-primary, #E63946);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 0.8rem 1.6rem;
    font-size: 1rem;
    font-weight: 600;
    text-shadow: none;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.petali-site :is(.com-users-login, .container.login) button[type="submit"]:hover {
    background: #c92c38;
    box-shadow: 0 10px 24px rgba(230, 57, 70, 0.28);
}

.petali-site :is(.com-users-login, .container.login) .form-links {
    width: 100%;
    max-width: none;
    padding: 0;
    text-align: center;
    color: var(--color-text-light);
    font-size: var(--step--1, 0.95rem);
}

.petali-site :is(.com-users-login, .container.login) .form-links a {
    color: var(--color-primary, #E63946);
}

/* --- Informativa: tabella dei partner ------------------------------------------ */
.petali-site .privacy-table-wrap {
    overflow-x: auto;
    margin: 1rem 0 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(80, 54, 40, 0.12);
    background: #fff;
}

.petali-site .privacy-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: var(--step--1, 0.95rem);
    line-height: 1.5;
}

.petali-site .privacy-table th,
.petali-site .privacy-table td {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid rgba(80, 54, 40, 0.10);
    text-align: left;
    vertical-align: top;
}

.petali-site .privacy-table th {
    background: #f8f4f1;
    font-weight: 600;
    color: var(--color-text-dark);
}

.petali-site .privacy-table tr:last-child td {
    border-bottom: 0;
}

.petali-site .privacy-table a {
    color: var(--color-primary, #E63946);
    white-space: nowrap;
}

.petali-site .privacy-table th:nth-child(1) { width: 18%; }
.petali-site .privacy-table th:nth-child(2) { width: 19%; }
.petali-site .privacy-table th:nth-child(3) { width: 33%; }
.petali-site .privacy-table th:nth-child(4) { width: 18%; }
.petali-site .privacy-table th:nth-child(5) { width: 12%; }

/* --- Selettore lingua: stato della traduzione ----------------------------------- */
.petali-site .site-language-status:empty {
    display: none;
}

.petali-site .site-language-switcher {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.petali-site .site-language-status {
    display: block;
    flex-basis: 100%;
    max-width: 260px;
    margin: 6px 0 0 auto;
    padding: 6px 10px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--color-text-main, #4a4a4a);
    text-align: left;
}

.petali-site .site-language-switcher.is-translating .site-language-select {
    background-image: linear-gradient(90deg, rgba(230, 57, 70, 0.08), rgba(230, 57, 70, 0.18), rgba(230, 57, 70, 0.08));
    background-size: 200% 100%;
    animation: petali-translating 1.2s linear infinite;
}

@keyframes petali-translating {
    from { background-position: 100% 0; }
    to   { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .petali-site .site-language-switcher.is-translating .site-language-select {
        animation: none;
    }
}