/* ==========================================================================
   Collet Massage Therapy — custom.css
   Único ficheiro de CSS próprio do projeto. Os ficheiros CSS do template
   (assets/css/*.css) NÃO são alterados; correções e componentes novos ficam aqui.
   Carregado depois de todos os CSS do template.

   Cores: as do próprio template (variante "two").
   ========================================================================== */

:root {
    --custom-primary: #ad4747;   /* cor principal do template */
    --custom-accent: #FE7171;    /* cor de destaque do template */
    --custom-light: #FFF2F4;     /* fundo claro do template */
    --custom-text: #484848;      /* texto do template */
    --custom-muted: #828282;     /* texto secundário do template */
}

/* Esconde o seletor claro/escuro de demonstração do template */
.switch-box { display: none !important; }

/* Rodapé */
.custom-footer-note {
    margin-top: 12px;
    font-size: 14px;
    opacity: .85;
}

/* --------------------------------------------------------------------------
   Início — cartões de serviços (5 serviços: 3 + 2 centrados)
   -------------------------------------------------------------------------- */
.services-area .services-item .inner img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}
.services-area .services-item .inner p {
    min-height: 72px;
}

/* --------------------------------------------------------------------------
   Páginas de serviço
   -------------------------------------------------------------------------- */
.details-img img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}
.details-spa h3 small {
    font-size: 22px;
    margin-top: 8px;
}

/* Factos rápidos (duração, indicado para, frequência, preço) */
.custom-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
}
.custom-facts .fact {
    flex: 1 1 200px;
    background: var(--custom-light);
    border-left: 3px solid var(--custom-primary);
    border-radius: 6px;
    padding: 18px 20px;
}
.custom-facts .fact i {
    font-size: 26px;
    color: var(--custom-primary);
    margin-bottom: 6px;
    display: block;
}
.custom-facts .fact span {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--custom-muted);
}
.custom-facts .fact strong {
    font-size: 17px;
    color: var(--custom-text);
}

/* Lista de benefícios com "check" (como nos flyers) */
.custom-benefits {
    margin: 0 0 25px;
    padding: 0;
}
.details-items .left ul.custom-benefits li {
    list-style: none;
    position: relative;
    padding: 4px 0 4px 44px;
    margin-bottom: 14px;
    font-size: 17px;
    line-height: 1.45;
}
.details-items .left ul.custom-benefits li:before {
    content: "\ea41"; /* boxicons: bx-check */
    font-family: "boxicons";
    position: absolute;
    left: 0;
    top: 2px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--custom-primary);
    color: #fff;
    font-size: 22px;
}

.custom-subtitle {
    font-size: 24px;
    color: var(--custom-primary);
    margin: 10px 0 15px;
}

.custom-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    margin-top: 10px;
}

/* Flyer do serviço */
.custom-flyer {
    position: relative;
    margin-bottom: 30px;
    text-align: center;
}
.custom-flyer img {
    width: 100%;
    max-width: 460px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .12);
    cursor: zoom-in;
    transition: transform .4s ease;
}
.custom-flyer img:hover { transform: translateY(-4px); }
.custom-flyer small {
    display: block;
    margin-top: 10px;
    color: var(--custom-muted);
}

/* Lightbox simples para o flyer */
.custom-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    cursor: zoom-out;
}
.custom-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
}

/* Nota/aviso */
.custom-note {
    background: var(--custom-light);
    border-radius: 8px;
    padding: 18px 22px;
    font-size: 15px;
    margin-top: 10px;
}
.custom-note i {
    color: var(--custom-primary);
    margin-right: 6px;
}

/* Secção "outros serviços" */
.custom-other-services {
    background: var(--custom-light);
}

/* --------------------------------------------------------------------------
   Contactos — select do serviço (nice-select) com o aspeto dos inputs
   -------------------------------------------------------------------------- */
.contact-form-area .form-item #contactForm .nice-select {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border: 0;
    border-radius: 5px;
    margin-bottom: 0;
}
.contact-form-area .form-item #contactForm .nice-select .list {
    width: 100%;
}


/* --------------------------------------------------------------------------
   Imagens de fundo Collet (substituem as do template via classes próprias;
   as classes originais banner-img-two / title-img-* deixam de ser usadas)
   -------------------------------------------------------------------------- */
.custom-banner-img        { background-image: url("../images/collet/fotos/banner.jpg"); }

.custom-title-sobre       { background-image: url("../images/collet/fotos/titulo-sobre.jpg"); }
.custom-title-contactos   { background-image: url("../images/collet/fotos/titulo-contactos.jpg"); }
.custom-title-massagem-terapeutica { background-image: url("../images/collet/fotos/hero-massagem-terapeutica.jpg"); }
.custom-title-massagem-desportiva  { background-image: url("../images/collet/fotos/hero-massagem-desportiva.jpg"); }
.custom-title-dreno-modeladora     { background-image: url("../images/collet/fotos/hero-dreno-modeladora.jpg"); }
.custom-title-drenagem-linfatica   { background-image: url("../images/collet/fotos/hero-drenagem-linfatica.jpg"); }
.custom-title-massagem-relaxante   { background-image: url("../images/collet/fotos/hero-massagem-relaxante.jpg"); }

.get-area.custom-cta-bg   { background-image: url("../images/collet/fotos/cta.jpg"); }

/* Fotos dos blocos "Conheça" e "Destaque" com a mesma proporção das originais */
.know-img img:first-child,
.skin-img img:first-child {
    aspect-ratio: 900 / 730;
    object-fit: cover;
}
/* Carrossel "O que oferecemos": fotos quadradas */
.offer-item img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}