/*****************
 * Yi Villa Style Override for Flatsome Theme
 * Warm beige minimalist luxury aesthetic
 * Matching: yivilla.com design language
 *****************/

/* ===========================
   1. GLOBAL / BODY
   =========================== */

html, body {
    background-color: #E5E3DB !important;
    color: #1A202C !important;
    font-family: 'Outfit', 'Inter', sans-serif !important;
    overflow-x: hidden;
}

body .page-wrapper {
    background-color: #E5E3DB !important;
}

/* Remove default Flatsome shadows and heavy styling */
.box-shadow,
.box-shadow-1,
.box-shadow-2,
.box-shadow-3,
.box-shadow-4,
.box-shadow-5 {
    box-shadow: none !important;
}

/* ===========================
   2. TYPOGRAPHY
   =========================== */

h1, h2, h3, h4, h5, h6,
.page-title h1,
.entry-title,
.product-title,
.post-title,
.widget-title,
.section-title {
    font-family: 'Cormorant Garamond', 'Outfit', serif !important;
    color: #1A202C !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
}

h1, .page-title h1 {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
}

h2 {
    font-size: 2rem !important;
}

h3 {
    font-size: 1.5rem !important;
}

p, li, td, th, span, div, label, input, textarea, select {
    font-family: 'Outfit', 'Inter', sans-serif !important;
}

p {
    color: #2D3748;
    font-size: 0.95rem;
    line-height: 1.7;
    font-weight: 300;
}

/* Small uppercase labels (yivilla signature style) */
.label-style,
.widget-title,
.section-title small,
.breadcrumb,
.breadcrumbs {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    color: #718096 !important;
    font-weight: 500 !important;
    font-family: 'Outfit', sans-serif !important;
}


/* ===========================
   3. HEADER / NAVIGATION
   =========================== */

.header,
.header-wrapper,
.header-main,
.header-top,
.header-bottom,
.top-bar,
#header {
    background-color: #E5E3DB !important;
    border-bottom: 1px solid #C5C3BB !important;
    box-shadow: none !important;
}

/* Sticky header */
.header.stuck,
.header-wrapper.stuck {
    background-color: #E5E3DB !important;
    box-shadow: none !important;
    border-bottom: 1px solid #C5C3BB !important;
}

/* Navigation links - yivilla style */
.header .nav > li > a,
.header .nav > li > a > span,
.primary-menu > li > a,
.menu > li > a,
.header-nav .nav > li > a {
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    color: #2D3748 !important;
    position: relative;
    padding-bottom: 4px !important;
    transition: color 0.3s ease !important;
}

/* Nav link underline animation */
.header .nav > li > a::after,
.primary-menu > li > a::after {
    content: '' !important;
    position: absolute !important;
    width: 100% !important;
    height: 1px !important;
    background: #1A202C !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: scaleX(0) !important;
    transform-origin: bottom right !important;
    transition: transform 0.3s ease-out !important;
}

.header .nav > li > a:hover::after,
.primary-menu > li > a:hover::after {
    transform: scaleX(1) !important;
    transform-origin: bottom left !important;
}

.header .nav > li > a:hover,
.primary-menu > li > a:hover {
    color: #1A202C !important;
}

/* Remove default Flatsome nav hover backgrounds */
.header .nav > li > a:hover,
.header .nav > li.active > a,
.header .nav > li.current-menu-item > a {
    background: transparent !important;
}

/* Dropdown menus */
.nav-dropdown {
    background-color: #F4F1EA !important;
    border: 1px solid #C5C3BB !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.nav-dropdown li a {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
    color: #2D3748 !important;
    text-transform: uppercase !important;
}

.nav-dropdown li a:hover {
    background-color: #E5E3DB !important;
    color: #1A202C !important;
}

/* Mobile menu */
.mfp-bg {
    background-color: #E5E3DB !important;
}

.mobile-sidebar,
.off-canvas {
    background-color: #E5E3DB !important;
}

.mobile-sidebar .nav > li > a,
.off-canvas .nav > li > a {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #2D3748 !important;
    border-bottom: 1px solid #C5C3BB !important;
}

/* ===========================
   4. BUTTONS
   =========================== */

.button,
button,
input[type="submit"],
input[type="button"],
.btn,
.button.primary,
.button.secondary,
.checkout-button,
a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button {
    background: transparent !important;
    border: 1px solid #1A202C !important;
    color: #1A202C !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    padding: 0.75rem 2rem !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover,
.button.primary:hover,
.button.secondary:hover,
a.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover {
    background: #1A202C !important;
    color: #FFFFFF !important;
    border-color: #1A202C !important;
    box-shadow: none !important;
}

/* Alt/outline button (keep same in this theme) */
.button.alt,
.woocommerce .button.alt,
.button-border {
    background: transparent !important;
    border: 1px solid #1A202C !important;
    color: #1A202C !important;
}

.button.alt:hover,
.woocommerce .button.alt:hover,
.button-border:hover {
    background: #1A202C !important;
    color: #FFFFFF !important;
}


/* ===========================
   5. SECTIONS & ROWS (UX Builder)
   =========================== */

.section,
.row,
.col,
.col-inner {
    /* Let backgrounds be transparent by default */
}

/* Section separators - yivilla uses top borders */
.section {
    border-top: 1px solid #C5C3BB;
}

.section:first-child {
    border-top: none;
}

/* Page title / banner area */
.page-title,
.page-header,
.featured-title {
    background-color: #E5E3DB !important;
    border-bottom: 1px solid #C5C3BB !important;
    padding: 3rem 0 !important;
}

.page-title h1,
.featured-title h1 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 2.5rem !important;
    font-weight: 300 !important;
    color: #1A202C !important;
    letter-spacing: 0.02em !important;
}


/* ===========================
   6. FORMS & INPUTS
   =========================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select,
.form-control {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #1A202C !important;
    border-radius: 0 !important;
    padding: 0.5rem 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.9rem !important;
    color: #1A202C !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.3s ease !important;
}

input:focus,
textarea:focus,
select:focus {
    border-bottom-color: #000 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Autofill fix for beige background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #E5E3DB inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Select dropdown arrow */
select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231A202C' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0 center !important;
    padding-right: 1.5rem !important;
}

/* Contact Form 7 styling */
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #1A202C !important;
    border-radius: 0 !important;
    padding: 0.5rem 0 !important;
    margin-bottom: 1rem !important;
    font-family: 'Outfit', sans-serif !important;
}

.wpcf7 .wpcf7-submit {
    width: auto !important;
    border: 1px solid #1A202C !important;
    padding: 0.75rem 2rem !important;
    margin-top: 1rem !important;
}

/* Placeholder text */
::placeholder {
    color: #718096 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.05em !important;
}


/* ===========================
   7. FOOTER
   =========================== */

.footer,
.footer-wrapper,
#footer,
footer {
    background-color: #E5E3DB !important;
    border-top: 1px solid #C5C3BB !important;
    color: #2D3748 !important;
}

.footer .widget-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: #718096 !important;
    font-weight: 500 !important;
}

.footer a {
    color: #2D3748 !important;
    transition: color 0.3s ease !important;
}

.footer a:hover {
    color: #1A202C !important;
}

.footer p {
    color: #718096 !important;
    font-size: 0.85rem !important;
}

.copyright-footer,
.absolute-footer {
    background-color: #E5E3DB !important;
    border-top: 1px solid #C5C3BB !important;
    color: #718096 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.1em !important;
}


/* ===========================
   8. ROOM CARDS (GemBooking)
   =========================== */

.room-item {
    background: transparent !important;
    transition: all 0.3s ease !important;
}

.room-item .post-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.3rem !important;
    font-weight: 400 !important;
    color: #1A202C !important;
    margin-bottom: 10px;
}

.room-item .room__price {
    color: #1A202C !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
}

/* Replace gold border hover with subtle scale */
.room-item .gembooking-room .box-image:before,
.room-item .gembooking-room .box-image:after {
    display: none !important;
}

.room-item .gembooking-room .box-image {
    overflow: hidden !important;
}

.room-item .gembooking-room .box-image img {
    transition: transform 0.7s ease !important;
}

.room-item:hover .gembooking-room .box-image img {
    transform: scale(1.05) !important;
}


/* ===========================
   9. TESTIMONIALS
   =========================== */

.ng-testimonials .testimonial-item {
    box-shadow: none !important;
    background-color: transparent !important;
    border: 1px solid #C5C3BB !important;
    padding: 24px !important;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s ease !important;
}

.ng-testimonials .testimonial-item:hover {
    border-color: #1A202C !important;
}

.ng-testimonials .testimonial-item .box-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    color: #1A202C !important;
}

.ng-testimonials .testimonial-item .box-text,
.ng-testimonials .testimonial-item .box-text p {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 300 !important;
    color: #2D3748 !important;
    line-height: 1.7 !important;
}

.ng-testimonials .testimonial-item .box-image img {
    border-radius: 0 !important;
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
}

/* Scrollbar styling */
.ng-testimonials .testimonial-item .box-text::-webkit-scrollbar-track {
    background-color: #E5E3DB !important;
    box-shadow: none !important;
}

.ng-testimonials .testimonial-item .box-text::-webkit-scrollbar {
    width: 3px !important;
    background-color: #E5E3DB !important;
}

.ng-testimonials .testimonial-item .box-text::-webkit-scrollbar-thumb {
    background-color: #C5C3BB !important;
    border: none !important;
}


/* ===========================
   10. SEARCH FORM (Homepage)
   =========================== */

.form-searh-home {
    background-color: rgba(26, 32, 44, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid #C5C3BB !important;
}

.form-searh-home h2 {
    font-family: 'Cormorant Garamond', serif !important;
    color: #F4F1EA !important;
    font-weight: 300 !important;
}


/* ===========================
   11. WOOCOMMERCE PRODUCT CARDS
   =========================== */

.products .product,
.product-small {
    background: transparent !important;
}

.products .product .box-image {
    overflow: hidden !important;
}

.products .product .box-image img {
    transition: transform 0.7s ease !important;
}

.products .product:hover .box-image img {
    transform: scale(1.05) !important;
}

.products .product .box-text {
    padding: 1rem 0 !important;
}

.products .product .box-text .product-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 400 !important;
    color: #1A202C !important;
}

.products .product .price {
    color: #2D3748 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.1em !important;
}

.products .product .price del {
    color: #718096 !important;
}

/* Remove product hover overlays */
.products .product .image-tools,
.products .product .quick-view {
    opacity: 0 !important;
}


/* ===========================
   12. ICONS & BADGES
   =========================== */

.badge-style,
.onsale,
.badge {
    background-color: #1A202C !important;
    color: #F4F1EA !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 9px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
}


/* ===========================
   13. SIDEBAR & WIDGETS
   =========================== */

.sidebar .widget {
    background: transparent !important;
    border-bottom: 1px solid #C5C3BB !important;
    padding-bottom: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.sidebar .widget-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: #718096 !important;
    margin-bottom: 1rem !important;
}


/* ===========================
   14. BLOG POSTS
   =========================== */

.post-item,
article.post {
    border-bottom: 1px solid #C5C3BB !important;
    padding-bottom: 2rem !important;
    margin-bottom: 2rem !important;
}

article .entry-title,
.post-item .post-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 400 !important;
    color: #1A202C !important;
}

article .entry-title a,
.post-item .post-title a {
    color: #1A202C !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

article .entry-title a:hover,
.post-item .post-title a:hover {
    color: #2D3748 !important;
}

.post-date,
.post-meta,
.entry-meta {
    font-family: 'Outfit', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #718096 !important;
}

/* Blog post images */
.post-item .box-image {
    overflow: hidden !important;
}

.post-item .box-image img {
    transition: transform 0.7s ease !important;
}

.post-item:hover .box-image img {
    transform: scale(1.03) !important;
}


/* ===========================
   15. LINKS
   =========================== */

a {
    color: #1A202C;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #2D3748;
    text-decoration: none;
}


/* ===========================
   16. VIDEO POPUP OVERRIDE
   =========================== */

.image-play .icon-wrap {
    background: rgba(26, 32, 44, 0.7) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}

.image-play .icon-wrap > i {
    color: #fff !important;
}

.image-play:hover .icon-wrap > i {
    color: #E5E3DB !important;
}


/* ===========================
   17. PHONE RING BUTTON
   =========================== */

.phone-ring-wrap .phone-ring-circle {
    background-color: #1A202C !important;
}

.phone-ring-wrap .phone-ring-fill {
    background-color: rgba(26, 32, 44, 0.5) !important;
}

.phone-ring-wrap .phone-ring-img-circle {
    background-color: #1A202C !important;
}


/* ===========================
   18. GTRANSLATE WIDGET
   =========================== */

.gtranslate_wrapper {
    font-family: 'Outfit', sans-serif !important;
}


/* ===========================
   19. SCROLLBAR
   =========================== */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #E5E3DB;
}

::-webkit-scrollbar-thumb {
    background: #C5C3BB;
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: #1A202C;
}


/* ===========================
   20. MISC OVERRIDES
   =========================== */

/* Lightbox modal backgrounds */
.mfp-bg {
    background-color: rgba(0,0,0,0.7) !important;
}

.mfp-content {
    background-color: #F4F1EA !important;
}

/* Breadcrumbs */
.breadcrumbs,
.breadcrumb {
    font-family: 'Outfit', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #718096 !important;
}

.breadcrumbs a,
.breadcrumb a {
    color: #718096 !important;
}

.breadcrumbs a:hover,
.breadcrumb a:hover {
    color: #1A202C !important;
}

/* Pagination */
.page-numbers,
.pagination {
    font-family: 'Outfit', sans-serif !important;
}

.page-numbers li a,
.page-numbers li span {
    border: 1px solid #C5C3BB !important;
    background: transparent !important;
    color: #2D3748 !important;
    border-radius: 0 !important;
}

.page-numbers li span.current,
.page-numbers li a:hover {
    background: #1A202C !important;
    color: #F4F1EA !important;
    border-color: #1A202C !important;
}

/* Tables */
table {
    border-color: #C5C3BB !important;
}

table th {
    background-color: #F4F1EA !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #1A202C !important;
}

table td {
    border-color: #C5C3BB !important;
    color: #2D3748 !important;
}

/* Loading / Preloader */
.loading-spin {
    border-color: #C5C3BB !important;
    border-top-color: #1A202C !important;
}

/* Selection highlight */
::selection {
    background-color: #1A202C;
    color: #F4F1EA;
}

::-moz-selection {
    background-color: #1A202C;
    color: #F4F1EA;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Image radius removal (luxury = sharp corners) */
img {
    border-radius: 0 !important;
}

/* Back to top button */
.back-to-top {
    background-color: #1A202C !important;
    color: #F4F1EA !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.back-to-top:hover {
    background-color: #2D3748 !important;
}