/* 
Theme Name: OtorrinoPed
Theme URI: https://otorrinoped.com.br
Description: Tema personalizado para a clínica OtorrinoPed
Author: Fred Peres
Author URI: https://fredperes.net/
Template: hello-elementor
Version: 1.0.0
Text Domain: otorrinoped
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/



/* header */
header .cta a{
    background-color: #0427C1;
    border-radius: 16px;
    color: #fff!important;
    padding: 0 60px!important;
}

header .cta a:hover {background-color:#002FFD!important}

header .cta a:hover::after{
   display: none!important;
}

@media screen and (max-width: 1024px) {
    
    header .elementor-nav-menu--dropdown{
        min-height: 100vh;
        padding: 0 32px;
    }
}

/* MEGA MENU */

.menu-title a {
    color: #77A1FF!important;
    font-size: 12px!important;
}

.menu-cursos .menu-title a {
    color: #FF767B!important;
}

.menu-title .elementor-item::after {display: none!important;}

.elementor-item{
    position: relative;
}

.elementor-nav-menu a{
    display: inline-block;
}

.elementor-item:after {
    content: url(img/arrow-right.svg) !important;
    background-color: transparent!important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform 0.3s ease, right 0.3s ease !important;
}

.elementor-item:hover:after {
    transform: translateY(-50%) translateX(5px) !important;
    /* Alternativa: right: -5px !important; */
}

.menu-cursos .elementor-item:after {
    content: url(img/arrow-right-red.svg) !important;
}

.e-n-menu-item .e-n-menu-dropdown-icon {display: none!important;}

/* HOME */

.light-link a {color:#fff!important}

@media screen and (max-width: 767px) {
    .home #hero h1 {
        color: #0322AC;
    }

    #hero p {
        color: #333;
    }

    #hero .elementor-button {
        background-color: #0427C1;
        color: #fff!important;
    }

    #blog h2 {
        color: #fff;
    }
    
    #blog h3 {
        color: #002FFD;
    }

    /* INTERNAS */

    .page-id-125 #hero, .parent-pageid-125 #hero{
        background-color: #fff;
    }

    .page-id-125 #hero h1, .parent-pageid-125 #hero h1 {
        color:#0322AC;
    }

    .page-id-125 #hero p, .parent-pageid-125 #hero p {
        color:#333;
    }

    /* SERVIÇOS */

    #sobre-doenca {
        background-color: #002FFD;
    }

    #sobre-doenca .elementor-button {
        background-color: #fff;
        color: #002FFD;
    }

    #sobre-doenca h2, #sobre-doenca p {
        color: #fff;
    }

    #blog-content {
        background-color: #002FFD;
    }

    #blog-content h1, .page-id-128 h1 {
        color: #fff;
    }

    #blog-content .blog-post-container {
        background-color: #fff;
        border-radius: 24px;
    }

 
	.light-text p, .light-text * {
    color: #fff!important;
	}

}

.grade-sintoma .elementor-widget-container{
        background-color: #002FFD!important;
    }
.grade-sintoma .elementor-widget-container p{
        color: #fff!important;
    }

/* blog */

.arrow-link img, .featured-image img {
    transition: all 0.3s ease-in-out;
}

.arrow-link img:hover, .featured-image img:hover{
   transform: scale(1.1);
   transition: all 0.3s ease-in-out;
}

.post-title a:hover {
    color: #002FFD!important;
}

.topo-post::before {
    transform: translateY(1px)
}

/* depoimentos */
/* Container principal com overflow visível */
.depoimentos-wrapper {
    position: relative;
    overflow: visible;
    width: 100%;
    margin: 30px 0;
    max-width: 100%;
}

/* Slider com largura maior que o container para permitir sangramento */
.depoimentos-slider {
    width: 100%;
    overflow: visible !important; /* Força o overflow visível */
    margin-right: -30% !important; /* Força o sangramento à direita */
    width: 130% !important; /* Aumenta a largura para mostrar o terceiro item */
}

/* Estilo dos itens do slider */
.depoimento-item {
    width: 40% !important; /* Largura fixa para mostrar 2 itens completos e um parcial */
    padding-right: 20px;
    margin-right: 0;
}

.depoimento-conteudo {
    border: solid 1px #fff;
    border-radius: 24px;
    padding: 25px;
    position: relative;
    color: white; /* Texto branco conforme a imagem */
}

.depoimento-texto {
    font-style: italic;
    margin-bottom: 15px;
    position: relative;
}

.depoimento-texto:before {
    content: '\201C';
    font-size: 60px;
    color: rgba(255,255,255,0.3); /* Aspas em branco transparente */
    position: absolute;
    left: -15px;
    top: -20px;
}

.depoimento-autor {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}

.depoimento-autor h4 {
    margin: 0;
    font-weight: 600;
    color: white;
}

.depoimento-cargo {
    color: rgba(255,255,255,0.8);
    font-size: 0.9em;
}

/* Estilos responsivos */
@media (max-width: 767px) {
    .depoimentos-slider {
        width: 150% !important;
        margin-right: -50% !important;
    }
    .depoimento-item {
        width: 80% !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .depoimentos-slider {
        width: 140% !important;
        margin-right: -40% !important;
    }
    .depoimento-item {
        width: 45% !important;
    }
}

@media (min-width: 992px) {
    .depoimentos-slider {
        width: 130% !important;
        margin-right: -30% !important;
        margin-left: 30%;
    }
    .depoimento-item {
        width: 40% !important;
    }
}

/* footer */

.light-blue-links a {
    color: #77A1FF;
    transition: all 0.3s ease-in-out;
}

.light-blue-links a:hover {
    color: #fff;
}

/* Ajustes para o container do Elementor */
.elementor-section.elementor-section-boxed > .elementor-container .depoimentos-wrapper {
    overflow: visible;
}

.elementor-section.elementor-section-boxed > .elementor-container {
    overflow: visible;
}

/* Ajustes para garantir que o efeito de sangramento funcione */
.elementor-section {
    overflow: visible;
}

.elementor-column {
    overflow: visible;
}

.elementor-widget-wrap {
    overflow: visible;
}

.elementor-widget-container {
    overflow: visible;
}

/* Ajuste para os botões do Flickity (caso decida usá-los no futuro) */
.flickity-button {
    background: white;
}

.flickity-button:hover {
    background: #f0f0f0;
}

/* Garante que o slider seja visível desde o início */
.depoimentos-slider {
    opacity: 0; /* Começa invisível e será mostrado via JavaScript */
    transition: opacity 0.3s ease;
}

/* Corrige problemas com o Flickity */
.flickity-enabled {
    position: relative;
    opacity: 1 !important;
    visibility: visible !important;
}

.flickity-viewport {
    overflow: visible !important;
    position: relative;
}

.flickity-slider {
    position: relative !important;
    left: 0 !important;
}





/* geral */

.page-header {
    display: none;
}

.page-content ul {
	padding-inline-start:0!important;
}

.red{ color: #BF0209!important;}

/* woocommerce */

.woocommerce-error, .woocommerce-info, .woocommerce-message {
    background-color: #e5f0fe;
    color: #333;
}

.woocommerce-error {
    background-color: #FFCDD2;
    border-top-color: #BF0209;
}

.woocommerce-info {
    background-color: #e5f0fe;
    border-top-color: #002FFD;
}

.woocommerce-message {
    border-top-color: #002FFD;
}

.woocommerce-message::before {color: #002FFD}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button {
    border-radius: 16px;
    background-color: #0427C1;
    color: #fff!important;
    padding: 10px 30px!important;
}

.place_order {width: 100%;}

.elementor-menu-cart__toggle a{
    background-color: transparent!important;
    border: none!important;
    
    padding: 20px 0!important;
}

/* SENSEI */
.sensei * {
    font-family: "Plus Jakarta Sans"!important;
}

.sensei #content button {
    background-color: #BF0209;
    border-radius: 16px;
    padding: 10px 30px!important;
    color: #fff!important;  
}

.sensei #content button:hover {
    background-color: #0427C1!important;
}

.page.col-full {
    max-width: 1240px;
    margin: 0 auto;
    width: 100%;
}

.single-course h1 {
    color: #BF0209;
}

.sensei-progress-bar__progress, .sensei-course-theme-course-progress-bar-inner {
    background-color: #BF0209;
}

.sensei-progress-bar__bar, .wp-block-sensei-lms-course-theme-course-progress-bar {
    background-color: #FFD4D5;
    border-radius: 125px;
    max-width: 350px;
}

.wp-block-sensei-lms-course-title {font-size:24px!important; margin-left: auto; margin-right: auto; text-align: center;}

.wp-block-sensei-button a{
    background-color: #0322AC;
    
    color: #fff!important;
    text-decoration: none!important;
    padding: 20px 60px!important;
}

.wp-block-sensei-button a:hover{
    background-color: #0427C1!important;
}

.wp-block-post-template-is-layout-flow a{
    color: #0427C1!important;
    text-decoration: none!important;
}

.wp-block-post-template-is-layout-flow .wp-block-group {
    border:none;
    border-radius: 24px;
    background-color: #EBF1FF;
    padding:32px!important;
}

.wp-block-post-template-is-layout-flow h2 {
    font-size: 24px!important;
    
}

/*.wp-block-post-template-is-layout-flow h2 a {
    color: #0427C1!important;
    text-decoration: none!important;
}*/

.wp-block-post-template-is-layout-flow h2 a:hover {
    color: #0322AC!important;
}

.wp-block-post-template-is-layout-flow [type=submit]{
 border:none!important;
 padding: 10px 60px!important;
}

.wp-block-sensei-lms-button-learner-messages a{
    background-color: #BF0209;
    border-radius: 16px;
    padding: 12px 30px!important;
}


.wp-block-sensei-lms-course-list{
    margin-top:24px;   
}

.wp-block-sensei-lms-course-overview{
 display: none;   
}

/* 3-column grid layout for course list - mobile first approach */
.wp-block-post-template.is-layout-flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    width: 100%;
}

/* Course card styling to match desired layout */
.wp-block-post-template.is-layout-flow .wp-block-post {
    position: relative;
}

.wp-block-post-template.is-layout-flow .wp-block-group {
    background: url(img/bg-lista-cursos.svg);
    background-size: contain;
    background-position: left top;
    -webkit-border-bottom-right-radius: 42px;
    -webkit-border-bottom-left-radius: 42px;
    -moz-border-radius-bottomright: 42px;
    -moz-border-radius-bottomleft: 42px;
    border-bottom-right-radius: 42px;
    border-bottom-left-radius: 42px;
    border: none !important;
    padding: 20px !important;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Course title styling */
.wp-block-post-template.is-layout-flow .wp-block-post-title {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

.wp-block-post-template.is-layout-flow .wp-block-post-title a {
    color: #BF0209!important;
    font-weight: bold;
    text-decoration: none;
    font-size: 48px;
    line-height: 64px!important;
}



/* Add arrow button with link */
.wp-block-post-template.is-layout-flow .wp-block-post .wp-block-group:after {
    content: "";
    width: 60px;
    height: 60px;
   /* background-color: #FFC8C8;*/
    background-image: url('img/arrow-red-big.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1;
    cursor: pointer;
}

/* Make the entire card clickable */
.wp-block-post-template.is-layout-flow .wp-block-post {
    cursor: pointer;
}

/* Hide the continue button */
.wp-block-post-template.is-layout-flow .wp-block-sensei-lms-button-continue-course {
    display: none;
}

/* Adjust layout for course content */
.wp-block-post-template.is-layout-flow .wp-block-columns {
    display: block;
    padding-left: 0;
    margin: 0;
}

.wp-block-post-template.is-layout-flow .wp-block-column {
    flex-basis: 100% !important;
    padding: 0 !important;
}

/* Style the progress bar */
.wp-block-post-template.is-layout-flow .sensei-progress-bar__bar {
    background-color: #FFD6D6;
    height: 8px;
    border-radius: 4px;
    margin-top: 10px;
}

.wp-block-post-template.is-layout-flow .sensei-progress-bar__progress {
    background-color: #BF0209 !important;
    border-radius: 4px;
}

.wp-block-post-template.is-layout-flow .sensei-progress-bar__label {
    font-size: 0.8rem;
    color: #666;
}

.woocommerce-form.woocommerce-form-login {max-width: 80%!important; margin: auto 0!important;} 

/* Tablet view - 2 columns */
@media screen and (min-width: 768px) {
    .wp-block-post-template.is-layout-flow {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media screen and (min-width: 1024px) {
    .wp-block-sensei-lms-button-learner-messages{
        max-width: 250px;
        margin-left: auto;
    }

    .wp-block-sensei-lms-course-list{
        margin-top:-48px;   
    }

    .wp-block-sensei-lms-course-list-filter {
        padding-bottom: 30px
    }
    
    /* Desktop view - 3 columns */
    .wp-block-post-template.is-layout-flow {
        grid-template-columns: repeat(3, 1fr);
    }

    .woocommerce-form.woocommerce-form-login {max-width: 50%;}
}

.wp-block-sensei-lms-course-list .wp-block-post-featured-image, .wp-block-sensei-lms-course-list .wp-block-post-featured-image a, .wp-block-sensei-lms-course-list .wp-block-post-featured-image a img{
    width:80px!important;
    height:80px!important;
}

.wp-block-sensei-lms-course-list .wp-block-post-featured-image {
    margin: 0!important;
}

/* CURSO */


.wp-block-sensei-lms-course-outline h3.wp-block-sensei-lms-course-outline-module__lessons-title, .wp-block-sensei-lms-button-reset-lesson {
    display: none!important;
}

.wp-block-sensei-lms-course-outline-lesson {
    text-decoration: none!important;
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #F0F0F0;
    position: relative;
    margin-bottom: 0;
}

/* Style for lesson status icon (empty circle or checked) */
.wp-block-sensei-lms-course-outline-lesson__status {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: 2px solid #CCCCCC;
    border-radius: 50%;
    margin-right: 15px;
}

/* Style for completed lesson status */
.wp-block-sensei-lms-course-outline-lesson.completed .wp-block-sensei-lms-course-outline-lesson__status {
    border: none;
    background-color: #0322AC;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style for lesson title */
.wp-block-sensei-lms-course-outline-lesson span {
    flex-grow: 1;
    font-size: 16px;
    color: #333333;
    font-weight: 500;
}

/* Style for chevron icon */
.wp-block-sensei-lms-course-outline-lesson__chevron {
    width: 16px;
    height: 16px;
    min-width: 16px;
    color: #FF767B;
    margin-left: 10px;
}

/* Status icon color for completed lessons */
.wp-block-sensei-lms-course-outline-lesson.completed .wp-block-sensei-lms-course-outline-lesson__status use {
    fill: white;
}

/* Style for lesson status buttons at the top */
.nome-da-aula {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 10px;
    text-decoration: none;
    position: relative;
}

.nome-da-aula:after {
    content: "";
    position: absolute;
    right: 15px;
    width: 16px;
    height: 16px;
    background-image: url('img/arrow-right.svg');
    background-repeat: no-repeat;
    background-position: center;
}

/* Assistir agora button */
.nome-da-aula:has(#assistir-agora) {
    background-color: #E5EAFF;
    color: #0322AC;
}

/* Aula concluída button */
.nome-da-aula:has(.aula-concluida) {
    background-color: #E6FFE9;
    color: #00A32A;
}

/* Continuar assistindo button */
.nome-da-aula:has(.continuar-assistindo) {
    background-color: #FFF7E5;
    color: #996300;
}

/* Button styles */
#assistir-agora, .aula-concluida, .continuar-assistindo {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    margin-left: auto;
    margin-right: 20px;
}

#assistir-agora {
    background-color: #0322AC;
    color: white;
}

.aula-concluida {
    background-color: #00A32A;
    color: white;
}

.continuar-assistindo {
    background-color: #F0B400;
    color: white;
}

.wp-block-sensei-lms-course-outline-lesson {
    position: relative;
    /*display: inline-block;*/
}


.wp-block-sensei-lms-course-outline-lesson__status {
    position: absolute;
    right:-20%;
}

/* módulos */

.modules-title, .module-description, .module-lessons header, .module .module-lessons ul li.completed a:before, .module .module-lessons ul li a:before, .module-status {
    display: none!important;
}

article.module {
    background: #FFF7F7;
    padding: 80px 64px;
    border-radius: 48px;
}

article.module header {
    background: transparent!important;
    margin-bottom: 32px!important;
    padding: 0!important;
}

article.module h2 {
    color: #BF0209!important;
    font-size: 48px!important;
    line-height: 64px!important;
}

.module .module-lessons ul li {
    list-style: none !important;
    margin: 0 !important;
    position: relative;
}

.module .module-lessons ul li a {
    background-color: transparent;
    border:none!important;
    padding: .618em .618em .618em 3.618em;
   
    position: relative;
    text-decoration: none;
}

@media screen and (min-width: 1024px) {
    .module .module-lessons ul li a {
        width: 50%;
    }

    .single-lesson .module .module-lessons ul li a{
        width: 80%;
    }
}

 .module .module-lessons ul li {
    margin-bottom: 24px!important;
}

.module .module-lessons ul li::after {
    content: "";
    width: 30px;
    height: 30px;
    background-image: url('img/arrow-red-course-access.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1;
    cursor: pointer;
}

 .module .module-lessons ul li a.completed:after,  .module .module-lessons ul li a:after  {
    position: absolute;
    right: -15%;
    top: 50%;
    transform: translateY(-50%);
    padding: 16px;
    border-radius: 32px;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
}

.single-lesson .module .module-lessons ul li a:after {
    position:unset;
    transform: none;
    display: block;
    width: 100%;
    margin-top:24px;
    text-align: center;
    
}

.module .module-lessons ul li a.completed:after {
    content: "Aula concluida";
    color: #0C8620;
    background-color: #D3FFD0;
    
}

.module .module-lessons ul li a:after {
    content: "Assistir agora";
    color: #002FFD;
    background-color: #B7CDFF;
}

.lessons-list a {
    display: inline-block!important;
    padding-left: 0!important;
}

.module .module-lessons ul li a:hover {
    background: transparent;
    border:none;
}

.module .module-lessons ul li a, .module .module-lessons ul li.completed a{
    color: #333;
}



.single-lesson .wp-block-site-logo {display: none!important;}

.single-lesson #modules h2, .question-title {
    font-size: 24px!important;
    line-height: 32px!important;
}

.single-lesson #modules .module {
    margin-bottom:12px;
    padding: 32px;
}

.wp-block-embed__wrapper iframe {
    border-radius: 42px;
}

.lessons-list {
    list-style: none;
    padding-left: 0;
}

.lessons-list a {
    color: #333;
    margin-bottom: 24px;
}

/*.single-lesson .sensei-course-theme__header {
    max-width: 1240px;
    margin: 0 auto;
}*/

/* Grid container setup for all screen sizes */
.grid-container {
    display: grid;
    gap: 24px;
    margin-top: 32px;
}

/* For mobile: video above modules */
#modules {
    order: 2; /* Modules below */
}

.lesson-content {
    order: 1; /* Lesson content (with video) above */
}

@media screen and (min-width: 1000px) {
    .grid-container {
        grid-template-columns: 1fr 2fr;
        gap: 32px;
        margin-top: 64px;
    }
    
    /* For desktop: restore normal order */
    #modules {
        order: 1; /* Modules on the left */
    }
    
    .lesson-content {
        order: 2; /* Lesson content on the right */
    }
}
.wp-block-sensei-lms-lesson-actions {
    text-align: center;
}

.single-lesson .lesson_button_form {
    display:inline-block;
}

/* mensagens */

.sensei-message.info {
    background-color: #FFF7F7;
    max-width: 1240px;
    margin: 0 auto;
}

@media screen and (max-width: 767px) {

    .page.col-full {
        padding: 0 24px;
    }

    .single-course h1 {
        font-size:30px;
    }

    article.module {
        padding: 24px
    }

    article.module h2, .lesson-content h2 {
        font-size:24px!important;
        line-height: 32px!important;
    }

    .lesson-content h3 {
        font-size: 16px!important;
        line-height: 28px!important;
    }

    .lessons-list a {
        display: block!important;
        width: 80%;
    }

    .course .module .module-lessons ul li a.completed:after, .course .module .module-lessons ul li a:after {
        position: unset;
        transform: none;
        display: block;
        width: 60%;
        margin-top:24px;
        text-align: center;
    }
}