/*
 * UpTalent Brand Theme
 * ─────────────────────────────────────────
 * Primary   #0c42c2  — Royal Blue
 * Secondary #ffaa00  — Amber Gold
 * ─────────────────────────────────────────
 */

/* ════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
════════════════════════════════════════ */
:root {
    --ut-primary:         #0c42c2;
    --ut-primary-rgb:     12, 66, 194;
    --ut-primary-dark:    #0935a0;
    --ut-primary-darker:  #061660;
    --ut-primary-light:   rgba(12, 66, 194, 0.12);
    --ut-secondary:       #ffaa00;
    --ut-secondary-rgb:   255, 170, 0;
    --ut-secondary-dark:  #e09500;
    --ut-secondary-light: rgba(255, 170, 0, 0.15);
}

/* ════════════════════════════════════════
   2. HERO SECTION  (index.php)
   Blue background — amber accent light
════════════════════════════════════════ */
.ut-hero {
    background-color:    var(--ut-primary) !important;
    background-image:    none !important;
    background-repeat:   repeat !important;
    background-position: center top !important;
    position:            relative;
}

/* Subtle radial glow for visual depth */
.ut-hero::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     radial-gradient(
                        ellipse 75% 90% at 62% 55%,
                        rgba(255,170,0,0.07) 0%,
                        rgba(12,66,194,0.0) 70%
                    );
    pointer-events: none;
}


/* ════════════════════════════════════════
   3. PAGE-TITLE INNER BANNERS
   All inner page hero strips
════════════════════════════════════════ */
.page-title-big-typography {
    background-color: var(--ut-primary) !important;
}

/* Blog-single has a cover image — keep it,
   just add a blue tint overlay */
.one-fifth-screen .opacity-light {
    background-color: rgba(var(--ut-primary-rgb), 0.72) !important;
}

/* ════════════════════════════════════════
   3b. BLUE PRIMARY BUTTON  (btn-ut-primary)
════════════════════════════════════════ */
.btn-ut-primary {
    background-color: var(--ut-primary)      !important;
    border-color:     var(--ut-primary)      !important;
    color:            #ffffff                !important;
}
.btn-ut-primary:hover,
.btn-ut-primary:focus {
    background-color: var(--ut-primary-dark) !important;
    border-color:     var(--ut-primary-dark) !important;
    color:            #ffffff                !important;
}

/* ════════════════════════════════════════
   4. BASE-COLOR → AMBER (CTA / Accent)
   Crafto's "base-color" maps to #d5d52b.
   We remap it to our amber for all
   interactive / call-to-action elements.
════════════════════════════════════════ */
.bg-base-color            { background-color: var(--ut-secondary)      !important; }
.text-base-color          { color:            var(--ut-secondary)      !important; }
.border-base-color        { border-color:     var(--ut-secondary)      !important; }
.text-outline-color-base-color { -webkit-text-stroke-color: var(--ut-secondary) !important; }

/* ════════════════════════════════════════
   5. PRIMARY BUTTON → AMBER ON BLUE HERO
   btn-base-color = amber, dark text
════════════════════════════════════════ */
.btn-base-color {
    background-color: var(--ut-secondary)   !important;
    border-color:     var(--ut-secondary)   !important;
    color:            #1a1a1a               !important;
}
.btn-base-color:hover,
.btn-base-color:focus {
    background-color: var(--ut-secondary-dark) !important;
    border-color:     var(--ut-secondary-dark) !important;
    color:            #1a1a1a                  !important;
}

/* ════════════════════════════════════════
   6. YELLOW ACCENT → AMBER
   Feature icon circles, accent bars, dots
════════════════════════════════════════ */
.bg-yellow          { background-color: var(--ut-secondary) !important; }
.text-yellow        { color:            var(--ut-secondary) !important; }
.border-yellow      { border-color:     var(--ut-secondary) !important; }

/* Thin accent bars (span.bg-yellow, div.bg-yellow) */
span.bg-yellow,
div.bg-yellow       { background-color: var(--ut-secondary) !important; }

/* ════════════════════════════════════════
   7. STAR RATINGS / GOLDEN-YELLOW
════════════════════════════════════════ */
.review-star-icon .bi-star-fill,
.review-star-icon .bi-star-half,
.text-golden-yellow                  { color: var(--ut-secondary) !important; }
.bg-orange                           { background-color: var(--ut-secondary) !important; }

/* ════════════════════════════════════════
   8. LARGE SECTION: testimonials
   bg-gradient-aztec-green → primary blue
════════════════════════════════════════ */
.bg-gradient-aztec-green {
    background: linear-gradient(
                    135deg,
                    var(--ut-primary-darker) 0%,
                    var(--ut-primary)        50%,
                    #1a56d0                  100%
                ) !important;
}

/* ════════════════════════════════════════
   9. FOOTER
   Dark rich blue gradient for authority
════════════════════════════════════════ */
footer.bg-gradient-aztec-green {
    background: linear-gradient(
                    160deg,
                    var(--ut-primary-darker) 0%,
                    var(--ut-primary)        55%,
                    #1553d4                  100%
                ) !important;
}

/* Footer admission CTA row (bg-base-color) → amber stands out on blue */
footer .overlap-section .row.bg-base-color {
    background-color: var(--ut-secondary) !important;
}
footer .overlap-section .row.bg-base-color h6 { color: #1a1a1a !important; }
footer .overlap-section .row.bg-base-color a  { color: #1a1a1a !important; }

/* Footer CTA button on amber band — use dark */
footer .overlap-section .btn-dark-gray {
    background-color: #1a1a1a !important;
    border-color:     #1a1a1a !important;
    color:            #ffffff !important;
}
footer .overlap-section .btn-dark-gray:hover {
    background-color: #000000 !important;
    border-color:     #000000 !important;
}
footer .overlap-section .text-dark-gray a { color: #1a1a1a !important; }

/* ════════════════════════════════════════
   10. COURSE CARD: price badge
   Dark gray circle → primary blue
════════════════════════════════════════ */
.services-box-style-06 .bg-dark-gray.rounded-circle {
    background-color: var(--ut-primary) !important;
}

/* ════════════════════════════════════════
   11. COURSE CARD: "enroll now" sidebar button
════════════════════════════════════════ */
a.btn-base-color.w-100 {
    background-color: var(--ut-primary) !important;
    border-color:     var(--ut-primary) !important;
    color:            #ffffff          !important;
}
a.btn-base-color.w-100:hover {
    background-color: var(--ut-primary-dark) !important;
}

/* ════════════════════════════════════════
   12. NAVBAR — active link indicator
════════════════════════════════════════ */
.navbar-nav .nav-item.active > .nav-link {
    color: var(--ut-secondary) !important;
}

/* ════════════════════════════════════════
   13. PORTFOLIO / COURSE FILTER TABS
════════════════════════════════════════ */
.tab-style-04 .portfolio-filter li.nav.active a,
.tab-style-04 .portfolio-filter li.nav a:hover {
    color:        var(--ut-primary) !important;
    border-color: var(--ut-primary) !important;
}

/* ════════════════════════════════════════
   14. ACCORDION — number & active title
════════════════════════════════════════ */
.accordion-style-05 .number {
    color: var(--ut-secondary) !important;
    -webkit-text-stroke-color: var(--ut-secondary) !important;
}
.accordion-style-05 .accordion-item.active-accordion .accordion-title,
.accordion-style-06 .accordion-item.active-accordion .accordion-title {
    color: var(--ut-primary) !important;
}

/* ════════════════════════════════════════
   15. ICON-WITH-TEXT FEATURE BOX: hover
════════════════════════════════════════ */
.icon-with-text-style-07 .hover-box.dark-hover .feature-box-overlay {
    background-color: var(--ut-primary) !important;
}

/* ════════════════════════════════════════
   16. INSTRUCTOR CARD OVERLAY GRADIENT
════════════════════════════════════════ */
.team-style-05 .bg-gradient-dark-transparent {
    background: linear-gradient(
                    to top,
                    rgba(var(--ut-primary-rgb), 0.80) 0%,
                    transparent                        100%
                ) !important;
}

/* ════════════════════════════════════════
   17. PAGINATION — active page
════════════════════════════════════════ */
.pagination-style-01 .page-item.active .page-link {
    background-color: var(--ut-primary) !important;
    border-color:     var(--ut-primary) !important;
    color:            #ffffff           !important;
}

/* ════════════════════════════════════════
   18. SWIPER PREV / NEXT HOVER
════════════════════════════════════════ */
.swiper-button-next-nav:hover,
.swiper-button-previous-nav:hover {
    background-color: var(--ut-primary) !important;
    color:            #ffffff           !important;
}
.swiper-button-next-nav:hover i,
.swiper-button-previous-nav:hover i { color: #ffffff !important; }

/* ════════════════════════════════════════
   19. CONTACT MAP — info card button
════════════════════════════════════════ */
.contact-form-style-03 .btn-dark-gray {
    background-color: var(--ut-primary) !important;
    border-color:     var(--ut-primary) !important;
}
.contact-form-style-03 .btn-dark-gray:hover {
    background-color: var(--ut-primary-dark) !important;
}

/* ════════════════════════════════════════
   20. BG-GREEN
════════════════════════════════════════ */
.bg-green {
    background-color: #99c23e !important;
}

/* ════════════════════════════════════════
   21. ENROLL BUTTON OVERRIDE (course sidebar)
   This is btn-base-color and should be amber
   on the light-teal sidebar bg
════════════════════════════════════════ */
.services-box-style-06 a.btn-base-color {
    background-color: var(--ut-secondary) !important;
    border-color:     var(--ut-secondary) !important;
    color:            #1a1a1a            !important;
}

/* ════════════════════════════════════════
   22. TESTIMONIAL SECTION BG GRADIENT
════════════════════════════════════════ */
section.bg-gradient-tranquil-white.position-relative {
    /* keep the light section as-is — only large green sections get blue */
}

/* ════════════════════════════════════════
   23. COURSES PAGE: tab-style active
════════════════════════════════════════ */
.tab-style-04 .nav-tabs .nav-link.active,
.tab-style-04 .nav-tabs .nav-link:hover {
    color: var(--ut-primary) !important;
}

/* ════════════════════════════════════════
   24. BLOG: like heart icon
════════════════════════════════════════ */
.like-count a:hover .fa-heart { color: var(--ut-secondary) !important; }

/* ════════════════════════════════════════
   25. FOOTER: brand text color
════════════════════════════════════════ */
footer .navbar-brand .brand-text,
footer .brand-text              { color: #ffffff !important; }
footer .brand-up                { color: #ffffff !important; }
footer .brand-talent            { color: #ffffff !important; }

/* ════════════════════════════════════════
   26. PAGE TITLE — hero with image
════════════════════════════════════════ */
.page-title-big-typography.page-title-has-img {
    min-height: 400px;
}
.page-title-big-typography.page-title-has-img .container {
    min-height: 400px;
}
.page-title-hero-img {
    height: 400px;
    width: 100%;
    object-fit: contain;
    object-position: right bottom;
    display: block;
}

/* ════════════════════════════════════════
   27. SERVICE PAGES — column alignment
════════════════════════════════════════ */
/* Equal-height service columns */
.row.align-items-stretch .col.services-box-style-07 {
    display: flex;
    flex-direction: column;
}
.row.align-items-stretch .col.services-box-style-07 > div:first-child {
    flex: 1;
}

/* ════════════════════════════════════════
   28. CURSOS SECTION — section subtitle
════════════════════════════════════════ */
.ut-section-subtitle {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.7;
    margin-top: 12px;
    margin-bottom: 0;
}

/* ════════════════════════════════════════
   29. COURSE MODALS
   Modal usa componentes nativos do template
   (list-style-02, bg-tranquil, btn-switch-text)
   CSS aqui só para sizing e video click-to-play
════════════════════════════════════════ */

/* Dialog sizing */
.ut-curso-modal .modal-dialog { max-width: 1000px; width: 96vw; }
.ut-curso-modal .modal-content {
    border: none;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.22);
}

/* Close button — dark pill, top-right of modal */
.ut-modal-close {
    position: absolute;
    top: 16px; right: 16px;
    z-index: 30;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #1e293b;
    border: none;
    color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.30);
    transition: background 0.18s, transform 0.18s;
    line-height: 1; padding: 0;
}
.ut-modal-close:hover { background: #0f172a; transform: scale(1.08); color: #fff; }

/* Video click-to-play wrapper */
.ut-video-wrap { position: relative; overflow: hidden; font-size: 0; line-height: 0; }
.ut-video-wrap img { display: block; width: 100%; font-size: 0; }
.ut-video-wrap.ut-playing { padding-bottom: 56.25%; height: 0; }
.ut-video-wrap.ut-playing iframe {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; border: 0;
}

/* Instructor strip under the video in the modal */
.ut-modal-instructor-strip {
    background: linear-gradient(135deg, var(--ut-primary-darker), var(--ut-primary));
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ut-modal-ins-ava-sm {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.28);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff;
    flex-shrink: 0;
}
.ut-modal-ins-strip-name { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.3; }
.ut-modal-ins-strip-role { font-size: 11px; color: rgba(255,255,255,0.62); margin-top: 2px; }

/* Social proof under CTA */
.ut-enroll-note {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0;
}
.ut-enroll-note strong { color: var(--ut-primary); }

/* Scrollable right panel on desktop */
@media (min-width: 992px) {
    .ut-modal-right-scroll {
        max-height: 80vh;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(0,0,0,0.12) transparent;
    }
    .ut-modal-right-scroll::-webkit-scrollbar       { width: 4px; }
    .ut-modal-right-scroll::-webkit-scrollbar-track { background: transparent; }
    .ut-modal-right-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 2px; }
}
@media (max-width: 991.98px) {
    .ut-curso-modal .modal-dialog { width: 100%; max-width: 100%; margin: 0.5rem auto; }
}

/* ════════════════════════════════════════
   30. FOOTER — PREMIUM TEXT & NEWSLETTER
   Overrides elearning.css which sets
   footer-dark text to #828c8a (too dark)
════════════════════════════════════════ */

/* ── Typographic hierarchy ── */

/* Body text / descriptions */
footer.bg-gradient-aztec-green .footer-dark p {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 14px;
    line-height: 1.75;
}

/* Nav list links */
footer.bg-gradient-aztec-green .footer-dark ul li a {
    color: rgba(255, 255, 255, 0.58) !important;
    text-decoration: none;
    font-size: 14.5px;
    line-height: 2.1;
    display: inline-block;
    transition: color 0.16s ease, letter-spacing 0.16s ease;
}

footer.bg-gradient-aztec-green .footer-dark ul li a:hover {
    color: #ffffff !important;
    letter-spacing: 0.2px;
}

/* Override Crafto's yellow-green hover */
footer.bg-gradient-aztec-green .footer-dark a:hover {
    color: #ffffff !important;
}

/* Contact column: help labels ("Ligue directamente?", "Precisa de suporte?") */
footer.bg-gradient-aztec-green .footer-dark .lh-26 {
    color: rgba(255, 255, 255, 0.48) !important;
    font-size: 13px !important;
    letter-spacing: 0.1px;
}

/* Phone & email — slightly brighter */
footer.bg-gradient-aztec-green .footer-dark span.text-white a,
footer.bg-gradient-aztec-green .footer-dark a.text-white,
footer.bg-gradient-aztec-green .footer-dark .text-decoration-line-bottom {
    color: rgba(255, 255, 255, 0.88) !important;
    transition: color 0.16s;
}

footer.bg-gradient-aztec-green .footer-dark .text-decoration-line-bottom:hover {
    color: #ffffff !important;
}

/* Social links (In. / Ig.) */
footer .elements-social .small-icon.light li a {
    color: rgba(255, 255, 255, 0.50) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.16s;
}

footer .elements-social .small-icon.light li a:hover {
    color: var(--ut-secondary) !important;
    opacity: 1 !important;
}

/* Footer bottom bar */
footer.bg-gradient-aztec-green .footer-dark .footer-bottom p {
    color: rgba(255, 255, 255, 0.38) !important;
    font-size: 13px !important;
}

footer.bg-gradient-aztec-green .footer-dark .footer-bottom a {
    color: rgba(255, 255, 255, 0.55) !important;
}

footer.bg-gradient-aztec-green .footer-dark .footer-bottom a:hover {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ── Newsletter: premium glassmorphism input ── */

/* Wrapper */
footer .newsletter-style-02 {
    border-radius: 50px;
}

/* Input field */
footer .newsletter-style-02 .form-control,
footer .newsletter-style-02 input.form-control {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 13px 112px 13px 20px !important;
    font-size: 14px !important;
    height: auto !important;
    line-height: 1.5;
    transition: border-color 0.22s, background 0.22s, box-shadow 0.22s;
    caret-color: var(--ut-secondary);
}

footer .newsletter-style-02 .form-control::placeholder {
    color: rgba(255, 255, 255, 0.36) !important;
    font-size: 13px;
}

footer .newsletter-style-02 .form-control:focus {
    background: rgba(255, 255, 255, 0.11) !important;
    border-color: rgba(255, 170, 0, 0.52) !important;
    box-shadow: 0 0 0 4px rgba(255, 170, 0, 0.09) !important;
    outline: none;
}

/* Submit button — amber pill inside the input */
footer .newsletter-style-02 .btn.submit {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--ut-secondary) !important;
    color: #1a1a1a !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 8px 16px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.5;
    letter-spacing: -0.1px;
    white-space: nowrap;
    transition: background 0.18s, transform 0.14s;
    text-transform: none;
    min-height: auto;
}

footer .newsletter-style-02 .btn.submit:hover {
    background: var(--ut-secondary-dark) !important;
    transform: translateY(-50%) scale(1.04) !important;
    color: #1a1a1a !important;
}

footer .newsletter-style-02 .btn.submit i {
    color: #1a1a1a !important;
    font-size: 11px;
    margin-left: 3px;
}

/* Privacy note */
footer .newsletter-style-02 ~ div,
footer .newsletter-style-02 + div {
    color: rgba(255, 255, 255, 0.36) !important;
    font-size: 12px !important;
}

footer .newsletter-style-02 ~ div i,
footer .newsletter-style-02 + div i {
    color: rgba(255, 255, 255, 0.36) !important;
    font-size: 16px;
}