/* Custom Apple-esque styling for burger menu and buttons */

/* Font settings */
:root {
    --font-header: 'Lora', serif;
    --font-subheader: 'Lora', serif;
    --font-body: 'Poppins', sans-serif;
}

/* Font overrides for the entire site */
body, p, div, span, a, button, input, textarea, select, li {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6, .title__slider {
    font-family: var(--font-header) !important;
}

/* Specific button overrides */
.silder .slider__content .button__slider {
    font-family: var(--font-body) !important;
}

.varatic .varat__content .varat__button {
    font-family: var(--font-body) !important;
}

.ticket .ticket__item .ticket__button {
    font-family: var(--font-body) !important;
}

/* Burger menu style update */
.burger__lay .menu__top .burger__menu {
    background: #86BBD8;
    border-radius: 12px; /* Changed from 100% (circle) to 12px for rounded rectangle */
    width: 65px;
    height: 65px;
    text-align: center;
    position: relative;
    opacity: 1; /* Changed from 0 to make it visible immediately */
    transition: all 0.3s ease-in;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Apple-like subtle shadow */
}

.menu__top.active .burger__menu {
    background: #fff;
    border-radius: 12px; /* Changed from circle to rounded rectangle */
    opacity: 1;
    transition: all 0.3s ease-in;
    -webkit-animation: bounce 1s;
    animation: bounce 1s;
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Burger menu lines */
.burger__lay .menu__top .burger__menu span {
    width: 35px;
    height: 3px;
    background: #fff;
    position: absolute;
    top: 20px;
    left: 15px;
    border-radius: 3px; /* Rounded edges for lines */
    transition: 0.7s;
}

/* Left menu buttons */
.left__menu ul li {
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
}

.left__menu ul li a img {
    background: #86BBD8;
    border-radius: 12px; /* Changed from circle to rounded rectangle */
    padding: 8px;
    width: 45px !important;
    height: 45px !important;
    display: block;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Apple-like subtle shadow */
}

.left__menu ul li a:hover img {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Search icon style update */
.search-top a img {
    background: #86BBD8;
    border-radius: 12px; /* Changed from circle to rounded rectangle */
    padding: 8px;
    width: 35px !important;
    height: 35px !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Apple-like subtle shadow */
}

.search-top a:hover img {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Slider button style update */
.silder .slider__content .button__slider {
    font-size: 14px;
    background-color: #86BBD8;
    font-family: 'Poppins', sans-serif;
    border-radius: 12px; /* Changed from 20px to match other buttons */
    padding: 12px 70px 12px 50px;
    color: #000;
    text-transform: uppercase;
    position: relative;
    font-weight: bold;
    transition: 0.3s ease;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Apple-like subtle shadow */
}

.silder .slider__content .button__slider:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.silder .slider__content .button__slider .button__img {
    width: 32px;
    height: 32px;
    border-radius: 10px; /* Changed from circle to rounded rectangle */
    background: #234a6b;
    padding: 10px;
    position: absolute;
    right: 8px;
    top: 5px;
    transition: 0.3s ease;
}

/* Next row button style update */
.silder .next__row {
    position: absolute;
    left: 0;
    right: 0;
    width: 58px;
    height: 58px; /* Made more square */
    border-radius: 16px; /* Changed from circle to rounded rectangle */
    background: #C42C29;
    bottom: 7%;
    text-align: center;
    margin: auto;
    z-index: 99;
    transition: 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.silder .next__row:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.silder .next__row img {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: 22px; /* Adjusted for new height */
}

/* Varatic section button styles */
.varatic .varat__content .varat__button {
    font-family: 'Poppins', sans-serif;
    color: #C42C29;
    font-size: 14px;
    font-weight: bold;
    line-height: normal;
    padding: 15px 30px;
    text-decoration: none;
    text-align: center;
    position: relative;
    padding-left: 45px;
    border-radius: 12px; /* Changed from 25px to match other buttons */
    transition: 0.3s ease;
    background-color: rgba(255, 120, 90, 0.1); /* Very subtle background */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Apple-like subtle shadow */
}

.varatic .varat__content .varat__button:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.varatic .varat__content .varat__button .button__img,
.varatic .varat__button .button__img {
    width: 32px;
    height: 32px;
    border-radius: 10px; /* Changed from circle to rounded rectangle */
    background: #C42C29;
    padding: 10px;
    position: absolute;
    left: 4px;
    top: 7px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Navigation icons */
.varatic .next__arrow,
.varatic .prev__arrow {
    position: absolute;
    right: -9%;
    width: 50px;
    height: 50px; /* Made square */
    background: #86BBD8;
    border-radius: 12px; /* Changed from circle to rounded rectangle */
    transition: 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Apple-like subtle shadow */
    display: flex;
    align-items: center;
    justify-content: center;
}

.varatic .next__arrow:hover,
.varatic .prev__arrow:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Social media buttons */
.nav__active .nav__bottom .nav__youtube img,
.nav__active .nav__bottom .nav__facebook img,
.nav__active .nav__bottom .nav__instagram img {
    background: #86BBD8;
    border-radius: 12px; /* Changed from circle to rounded rectangle */
    padding: 8px;
    transition: 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Apple-like subtle shadow */
}

.nav__active .nav__bottom a:hover img {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Slider play button */
.silder .slider__img .slider__content-1 .slider__play {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 70px;
    height: 70px;
    margin: auto;
    border-radius: 16px; /* Changed from circle to rounded rectangle */
    transition: 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.silder .slider__img .slider__content-1 .slider__play:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Info icon in ticket section */
.ticket .ticket__item .ticket__info {
    position: absolute;
    height: 40px;
    width: 40px;
    background: #f3eee9;
    padding: 8px;
    right: 10px;
    bottom: -15px;
    border-radius: 12px; /* Changed from circle to rounded rectangle */
    transition: 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ticket .ticket__item .ticket__info:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Ticket buttons */
.ticket .ticket__item .ticket__button {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18px;
    background-color: #86BBD8;
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    border-radius: 12px; /* Changed from 20px to match other buttons */
    display: inline-block;
    text-align: center;
    padding: 10px 40px;
    max-width: 210px;
    margin: auto;
    text-decoration: none;
    transition: 0.3s ease;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.ticket .ticket__item .ticket__button:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Mobile styles */
@media (max-width: 1150px) {
    .burger__lay .menu__top .burger__menu {
        height: 63px;
        width: 63px;
        opacity: 1;
        z-index: 9;
        left: 20px;
        top: 20px;
        border-radius: 12px; /* Changed from circle to rounded rectangle */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
    
    .left__menu .menu__top .burger__menu {
        width: 40px;
        height: 40px;
        border-radius: 12px; /* Changed from circle to rounded rectangle */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
    
    .left__menu ul li a img {
        width: 35px !important;
        height: 35px !important;
    }
}

/* Text Contrast Fixes */
/* Fix for varat__item-desc - use charcoal color for better contrast */
.varat__item-desc {
    color: #2F4858 !important; /* Charcoal from brand palette */
}

/* Fix for varat__item-title - use lapis lazuli color for better contrast */
.varat__item-title {
    color: #33658A !important; /* Lapis Lazuli from brand palette */
}

/* For sections with dark backgrounds, keep white text */
.dark-bg .varat__item-desc,
.dark-bg .varat__item-title,
.news__single .varat__item-desc,
.news__single .varat__item-title {
    color: #ffffff !important;
}

/* Ensure proper text hierarchy */
.varat__date {
    color: #86BBD8 !important; /* Carolina Blue for subtle accent */
    font-weight: 600;
}

/* Fix contrast for varatic sections - each card color needs appropriate text */
/* varatic__1 - Light yellow/orange background (#ffaa5a on hover) */
.varatic .varat__item.varatic__1 .varat__item-desc,
.varatic .varat__item.varatic__1 .varat__item-desc p,
.varatic .varat__item.varatic__1 p {
    color: #2F4858 !important; /* Charcoal for strong contrast */
}

.varatic .varat__item.varatic__1 .varat__item-title,
.varatic .varat__item.varatic__1 h4 {
    color: #33658A !important; /* Lapis Lazuli for titles */
}

.varatic .varat__item.varatic__1 .varat__date {
    color: #C42C29 !important; /* Primary red for dates as accent */
    font-weight: 600;
}

/* varatic__2 - Pink background (#ec98a7) */
.varatic .varat__item.varatic__2 .varat__item-desc,
.varatic .varat__item.varatic__2 .varat__item-desc p,
.varatic .varat__item.varatic__2 p {
    color: #2F4858 !important; /* Charcoal works well on pink */
}

.varatic .varat__item.varatic__2 .varat__item-title,
.varatic .varat__item.varatic__2 h4 {
    color: #2F4858 !important; /* Charcoal for titles */
}

.varatic .varat__item.varatic__2 .varat__date {
    color: #C42C29 !important; /* Primary red accent */
    font-weight: 600;
}

/* varatic__3 - Light yellow background (#fffbd9) */
.varatic .varat__item.varatic__3 .varat__item-desc,
.varatic .varat__item.varatic__3 .varat__item-desc p,
.varatic .varat__item.varatic__3 p {
    color: #2F4858 !important; /* Charcoal for contrast */
}

.varatic .varat__item.varatic__3 .varat__item-title,
.varatic .varat__item.varatic__3 h4 {
    color: #33658A !important; /* Lapis Lazuli */
}

.varatic .varat__item.varatic__3 .varat__date {
    color: #C42C29 !important; /* Primary red accent */
    font-weight: 600;
}

/* varatic__4 - Orange background (#ffaa5a) */
.varatic .varat__item.varatic__4 .varat__item-desc,
.varatic .varat__item.varatic__4 .varat__item-desc p,
.varatic .varat__item.varatic__4 p {
    color: #2F4858 !important; /* Charcoal for contrast */
}

.varatic .varat__item.varatic__4 .varat__item-title,
.varatic .varat__item.varatic__4 h4 {
    color: #2F4858 !important; /* Charcoal for titles */
}

.varatic .varat__item.varatic__4 .varat__date {
    color: #FFFFFF !important; /* White for dates on orange */
    font-weight: 600;
}

/* Specific fix for single__rep section */
.single__rep.varatic__1 .varat__item-title {
    color: #2F4858 !important; /* Charcoal for strong contrast on light yellow */
}

.single__rep.varatic__1 .varat__button {
    color: #C42C29 !important; /* Primary red stays the same for brand consistency */
}
