/* ===============================================================
   PEARL THEME OVERRIDE — usa palette e font Crisvan
   Caricare DOPO: custom.css e pearl-hotel.css
=============================================================== */

/* ---------------------------------------------------------------
   1. TIPOGRAFIA GENERALE
--------------------------------------------------------------- */

body,
p,
span,
li {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}

h1, h2, h3 {
  font-family: var(--font-title) !important;
  color: var(--color-primary) !important;
  text-transform: none !important;
}

.main-title span,
.main-title-white span {
  font-family: var(--font-title) !important;
}

/* ---------------------------------------------------------------
   2. COLORI GENERALI - RESET PEARL
--------------------------------------------------------------- */

/* Rimuove i grigi vecchi */
* {
  border-color: var(--color-border-light) !important;
}

/* Testi neri/grigi → colori moderni */
.footer-hotel .foot-detail p,
.header .nav ul li a,
.footer-hotel .copyrights p {
  color: var(--color-text-dark) !important;
}


/* ---------------------------------------------------------------
   4. BOTTONI (Pearl → Crisvan)
--------------------------------------------------------------- */

.white-btn {
  background: var(--color-white) !important;
  color: var(--color-text-dark) !important;
  border: 1px solid var(--color-border-input) !important;
}

.white-btn:hover {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

/* Bottoni più vecchi */
.services-two .serv-main-sec .service-sec .detail a,
.special-services .post .detail a,
.latest-posts .find-location a {
  background: var(--color-white) !important;
  border: 1px solid var(--color-border-input) !important;
  color: var(--color-text-dark) !important;
}

.services-two .serv-main-sec .service-sec .detail a:hover,
.special-services .post .detail a:hover,
.latest-posts .find-location a:hover {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

/* ---------------------------------------------------------------
   5. BACKGROUND SECTIONS (Pearl → Crisvan)
--------------------------------------------------------------- */

.back,
.dark-bg,
.hotel-rooms .room-sec .price-detail .room-price,
.room-detail .room-overview .detail,
.booking-steps .price-detail .room-price {
  background: var(--color-bg) !important;
}

.footer-hotel .foot-detail {
  background: var(--color-primary) !important;
}

.footer-hotel-dark .foot-detail {
  background: var(--color-primary-dark) !important;
}

/* ---------------------------------------------------------------
   6. FOOTER & SOCIAL ICONS
--------------------------------------------------------------- */

.footer-hotel .foot-detail .social-icons ul li a {
  border-color: var(--color-white) !important;
  color: var(--color-white) !important;
}

.footer-hotel .foot-detail .social-icons ul li a:hover {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

/* ---------------------------------------------------------------
   7. ROOM CARDS (Pearl originale stile vecchio → moderno)
--------------------------------------------------------------- */

.hotel-rooms .room-sec {
  border: 1px solid var(--color-border-light) !important;
  box-shadow: var(--shadow-soft);
  border-radius: 8px !important;
}

.hotel-rooms .room-sec .price-detail a {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

/* ---------------------------------------------------------------
   8. LINKS & HOVER
--------------------------------------------------------------- */

a:hover,
a:focus {
  color: var(--color-primary) !important;
}

/* Blog – link hover */
.blog .blog-post .post-text h3 a:hover {
  color: var(--color-accent) !important;
}

/* ---------------------------------------------------------------
   9. NEWSLETTER & FORM STYLE
--------------------------------------------------------------- */

.footer-hotel .foot-detail .newsletetr input[type=text],
.contact-page .get-in-touch .get-touch-form input[type=text],
.contact-page .get-in-touch textarea {
  border: 1px solid var(--color-border-input) !important;
  background: var(--color-bg-light) !important;
  color: var(--color-text-dark) !important;
}

/* Newsletter submit */
.footer-hotel .foot-detail .newsletetr a {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

/* ---------------------------------------------------------------
   10. PREZZI E SALE ELEMENTS
--------------------------------------------------------------- */

.room-sec .price-detail .room-price span.current,
.booking-steps .price-detail .room-price span.current {
  color: var(--color-primary) !important;
}

.customer-words .testi-sec .rating i {
  color: var(--color-accent) !important;
}

/* ---------------------------------------------------------------
   11. PAGING / PAGINAZIONE
--------------------------------------------------------------- */

.hotel-rooms .paging a {
  border: 1px solid var(--color-border-light) !important;
  color: var(--color-text-dark) !important;
}

.hotel-rooms .paging a.select,
.hotel-rooms .paging a:hover {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

/* ---------------------------------------------------------------
   12. PARALLAX & HERO BG OVERRIDE
--------------------------------------------------------------- */

.welcome-hotel, .parallax-customer-words, .sub-banner .banner-img {
  background-size: cover !important;
}

/* Overlay testo hero */
.welcome-hotel .welcome-detail .text h1 {
  color: var(--color-white) !important;
}

/* =========================================
   BOTTONI – EFFETTO HOVER STANDARD CRISVAN
   ========================================= */

.btn,
.btn-primary,
.white-btn,
.special-services .post .detail a,
a.scopri-btn {
    transition: all 0.25s ease-in-out !important;
}

/* Hover uniforme su tutti i bottoni principali */
.btn:hover,
.btn-primary:hover,
.white-btn:hover,
.special-services .post .detail a:hover,
a.scopri-btn:hover {
  
    border-color: var(--primary) !important;
    color: #fff !important;
    opacity: 0.92;
    transform: translateY(-2px);
}


/* =========================================
   BOTTONI CRISVAN – stile moderno coerente
========================================= */

/* Stile base per tutti i bottoni del template */
.white-btn,
.btn-primary,
a.btn,
.special-services .post .detail a {
    background: transparent !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    padding: 12px 28px !important;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 4px;
    transition: all 0.25s ease-in-out !important;
}

/* Hover */
.white-btn:hover,
.btn-primary:hover,
a.btn:hover,
.special-services .post .detail a:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 8px rgba(44, 87, 110, 0.25);
    transform: translateY(-2px);
}


/******************************************************
  PEARL OVERRIDE – HOTEL CRISVAN
  Tutto lo stile personalizzato che sovrascrive il tema
******************************************************/


/* =========================================
   2. BOTTONI CRISVAN – stile moderno
========================================= */

/* Stile base bottoni */
.white-btn,
.btn-primary,
a.btn,
.special-services .post .detail a {
    background: transparent !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    padding: 12px 28px !important;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 4px;
    transition: all 0.25s ease-in-out !important;
}

/* Hover elegante */
.white-btn:hover,
.btn-primary:hover,
a.btn:hover,
.special-services .post .detail a:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 8px rgba(44, 87, 110, 0.25);
    transform: translateY(-2px);
}



/* ======================================================
   SISTEMA COLORI MENU – COMPLETAMENTE INDIPENDENTE
   Ogni stato (desktop, sticky, dropdown, mobile)
   è controllabile tramite variabili.
====================================================== */


/* ======================================================
   DESKTOP – MENU NORMALE (NON STICKY)
====================================================== */

.menu-desktop {
    background: var(--menu-desktop-bg) !important;
}

.menu-desktop .main-link {
    color: var(--menu-desktop-color) !important;
}

.menu-desktop .main-link:hover {
    color: var(--menu-desktop-hover) !important;
}


/* ======================================================
   DESKTOP – MENU STICKY
====================================================== */

.menu-desktop.sticky {
    background: var(--menu-sticky-bg) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.menu-desktop.sticky .main-link {
    color: var(--menu-sticky-color) !important;
}

.menu-desktop.sticky .main-link:hover {
    color: var(--menu-sticky-hover) !important;
}
.menu-desktop.sticky .dropdown-menu > li > a:hover {
    color: var(--menu-sticky-dropdown-hover) !important;  /* Bianco */
}

/* ======================================================
   DROPDOWN DESKTOP
====================================================== */

.menu-desktop-dropdown {
    background: var(--menu-dd-bg) !important;
}

.menu-desktop-dropdown > li > a {
    background: var(--menu-dd-bg) !important;
    color: var(--menu-dd-color) !important;
}

.menu-desktop-dropdown > li > a:hover {
    background: var(--menu-dd-hover-bg) !important;
    color: var(--menu-dd-hover-color) !important;
}


/* ======================================================
   MOBILE MENU (mmenu)
====================================================== */

.menu-mobile {
    background: var(--menu-mobile-bg) !important;
}

.menu-mobile .mobile-link {
    color: var(--menu-mobile-color) !important;
    background: var(--menu-mobile-bg) !important;
}

.menu-mobile .mobile-link:hover {
    background: var(--menu-mobile-hover-bg) !important;
    color: var(--menu-mobile-hover-color) !important;
}

/* Dropdown mobile */
.menu-mobile-dropdown li a {
    background: var(--menu-mobile-dd-bg) !important;
    color: var(--menu-mobile-dd-color) !important;
}

.menu-mobile-dropdown li a:hover {
    background: var(--menu-mobile-dd-hover-bg) !important;
    color: var(--menu-mobile-dd-hover-color) !important;
}
/********************************************
 * FOOTER CRISVAN – VERSIONE A VARIABILI
 ********************************************/

/* Sfondo */
.footer-hotel-dark .foot-detail {
    background-color: var(--footer-dark-bg) !important;
}

/* Testo generico */
.footer-hotel-dark,
.footer-hotel-dark .foot-detail,
.footer-hotel-dark * {
    color: var(--footer-dark-text) !important;
}

/* Link */
.footer-hotel-dark a,
.footer-hotel-dark a:link,
.footer-hotel-dark a:visited {
    color: var(--footer-dark-text) !important;
    text-decoration: none;
}

.footer-hotel-dark a:hover,
.footer-hotel-dark a:focus {
    color: var(--footer-dark-text-hover) !important;
}

/* Icone */
.footer-hotel-dark i,
.footer-hotel-dark .fa,
.footer-hotel-dark .fab,
.footer-hotel-dark .fas {
    color: var(--footer-dark-icon) !important;
}

/* Sitemap */
.footer-hotel-dark .useful-links ul li a {
    color: var(--footer-dark-text) !important;
}

.footer-hotel-dark .useful-links ul li a:hover {
    color: var(--footer-dark-text-hover) !important;
}

/* Social icons */
.footer-hotel-dark .social-icons ul li a {
    border-color: var(--footer-dark-icon) !important;
    color: var(--footer-dark-icon) !important;
}

.footer-hotel-dark .social-icons ul li a:hover {
    background: var(--footer-dark-accent) !important;
    border-color: var(--footer-dark-accent) !important;
    color: #ffffff !important;
}

/* Copyright */
.footer-hotel-dark .copyright-text,
.footer-hotel-dark .copyright-text *,
.footer-hotel-dark .copyrights p a {
    color: var(--footer-dark-text) !important;
}

/* =========================================
   CTA PARALLAX – TITOLI E TESTI A VARIABILI
========================================= */

.cta-prenota.parallax-section h2,
.cta-prenota.parallax-section h3,
.cta-prenota.parallax-section h4 {
    color: var(--cta-title-color) !important;
    font-family: var(--font-title);
}

.cta-prenota.parallax-section p,
.cta-prenota.parallax-section span,
.cta-prenota.parallax-section strong {
    color: var(--cta-text-color) !important;
    font-family: var(--font-body);
}
/* CTA BOTTONE – STILE BASE */
.cta-prenota.parallax-section a.btn,
.cta-prenota.parallax-section a.btn-lg,
.cta-prenota.parallax-section .btn {
    background-color: var(--cta-btn-bg) !important;
    color: var(--cta-btn-color) !important;
    border: 2px solid var(--cta-btn-border) !important;
    text-transform: uppercase;
    font-weight: 700;
}

/* CTA BOTTONE – HOVER */
.cta-prenota.parallax-section a.btn:hover,
.cta-prenota.parallax-section a.btn-lg:hover,
.cta-prenota.parallax-section .btn:hover {
    background-color: var(--cta-btn-hover-bg) !important;
    color: var(--cta-btn-hover-color) !important;
    border-color: var(--cta-btn-hover-bg) !important;
    opacity: 0.9;
    transform: translateY(-2px);
}
.panel-title a {
 
  color: var(--color-white) !important;
}

/******************************************************
  FINE FILE
******************************************************/