/* =============================================================================
   ui-modernize.css
   Loaded last — fixes the navy #0d1452 vs teal #009999 identity conflict,
   modernizes pagination, product cards, section headings, and adds
   scroll-reveal animations. Zero layout changes — purely visual overrides.
   ============================================================================= */

/* ── 1. GLOBAL COLOR PATCH ────────────────────────────────────────────────────
   Replace every instance of the legacy navy #0d1452 with the brand teal.
   Targets: general anchors/buttons, headings, sidebar, breadcrumb, blog, cart.
   All rules use equal or higher specificity than main.css originals.
   --------------------------------------------------------------------------- */

/* Any legacy button/anchor that was colored with the old navy */
.btn-default,
.cform input[type="submit"],
.review-form .btn-default,
.product .btn-cart a,
.product .btn-cart1 input[type="submit"],
.blog p.button a,
.widget-search button {
    background: #009999 !important;
    border-color: #009999 !important;
    color: #fff !important;
    border-radius: 6px !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
}
.btn-default:hover,
.cform input[type="submit"]:hover,
.review-form .btn-default:hover,
.product .btn-cart a:hover,
.blog p.button a:hover,
.widget-search button:hover {
    background: #007777 !important;
    border-color: #007777 !important;
    transform: translateY(-1px) !important;
}

/* Headings that were navy */
.product .p-title h2,
.blog h1, .blog h2, .blog h3, .blog h4, .blog h5, .blog h6,
.widget h4,
.review-form h2,
.page h3.special {
    color: #1e293b !important;
}

/* Sidebar widget borders/accents */
.widget h4 {
    border-bottom: 2px solid #009999 !important;
}

/* Breadcrumb links */
.breadcrumb ul li,
.breadcrumb ul li a {
    color: #009999 !important;
}
.breadcrumb ul li:last-child {
    color: #475569 !important;
}

/* Blog category/tag links */
.blog .text ul.status li,
.blog .text ul.status li a,
.blog h3 a:hover {
    color: #009999 !important;
}

/* Cart table trash icon */
.cart table tr td .trash {
    color: #009999 !important;
}

/* Nav tab active underline */
.card .nav-tabs > li.active > a,
.card .nav-tabs > li > a:hover {
    color: #009999 !important;
}
.card .nav-tabs > li > a::after {
    background: #009999 !important;
}


/* ── 2. PAGINATION REDESIGN ───────────────────────────────────────────────────
   Old style: navy bg + magenta border — very jarring.
   New style: clean pill buttons, teal active, slate hover.
   --------------------------------------------------------------------------- */
div.pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 0 !important;
    margin: 20px 0 !important;
    font-size: 14px !important;
}

div.pagination a,
div.pagination span.current,
div.pagination span.disabled {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.18s, color 0.18s, transform 0.15s !important;
    border: none !important;
    line-height: 1 !important;
}

div.pagination a {
    background: #f1f5f9 !important;
    color: #334155 !important;
}
div.pagination a:hover,
div.pagination a:active {
    background: #e6f5f5 !important;
    color: #009999 !important;
    transform: translateY(-1px) !important;
    border: none !important;
}

div.pagination span.current {
    background: #009999 !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(0,153,153,0.35) !important;
}

div.pagination span.disabled {
    background: #f8fafc !important;
    color: #cbd5e1 !important;
    cursor: default !important;
}


/* ── 3. PRODUCT CARD MODERNIZATION ───────────────────────────────────────────
   Old card: grey .text panel, square borders, orange button.
   New card: white, rounded, teal button — consistent with fp-card on home page.
   --------------------------------------------------------------------------- */

/* Card container */
.product .item {
    border: 1px solid rgba(15,23,42,0.08) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #fff !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
.product .item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.10) !important;
}

/* Remove the old grey text panel */
.product .item .text,
.product .text {
    background: #fff !important;
    padding: 12px 12px 14px !important;
    border-top: 1px solid rgba(15,23,42,0.06) !important;
}

/* Product name inside old card */
.product .text h6,
.product .text h6 a {
    color: #1e293b !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}
.product .text h6 a:hover {
    color: #009999 !important;
}

/* Price */
.product .text p {
    color: #009999 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-bottom: 10px !important;
}

/* Old orange add-to-cart button → teal pill */
.product .text p a,
.product .text p a:hover,
#shop_btn,
.shop-now-btn {
    background: #009999 !important;
    color: #fff !important;
    border-radius: 20px !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    text-decoration: none !important;
    border: none !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
    box-shadow: 0 2px 8px rgba(0,153,153,0.25) !important;
}
.product .text p a:hover,
#shop_btn:hover,
.shop-now-btn:hover {
    background: #007777 !important;
    transform: translateY(-1px) !important;
}

/* Out-of-stock badge */
.product .out-of-stock .inner {
    background: #ef4444 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
}

/* Product category title */
.product-cat .item {
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* Image overlay — modernize from dark to subtle teal tint */
.product .item .thumb .overlay {
    background: rgba(0,153,153,0.12) !important;
}


/* ── 4. SECTION HEADINGS MODERNIZATION ───────────────────────────────────────
   Old .page h3.special: manual 4px navy bar under heading.
   Old .headline: dated centered h2 with large margin.
   New: clean left-accent bar in teal, modern weight.
   --------------------------------------------------------------------------- */

/* Inner page section heading */
.page h3.special {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    position: relative !important;
    padding-bottom: 12px !important;
    margin-bottom: 22px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
.page h3.special::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -1px !important;
    width: 44px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #009999, #00e5e5) !important;
    border-radius: 2px !important;
}

/* Home/section headline component */
.headline h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    letter-spacing: -0.02em !important;
    position: relative !important;
    display: inline-block !important;
}
.headline h3 {
    font-size: 14px !important;
    color: #64748b !important;
    font-weight: 400 !important;
    margin-top: 6px !important;
}

/* Page banner heading */
.page-banner h1 {
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* Review form heading */
.review-form h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}


/* ── 5. PRELOADER — replace GIF with CSS spinner ─────────────────────────────
   The old #preloader used background:url(../img/1.gif).
   This overrides it with a clean teal ring spinner.
   --------------------------------------------------------------------------- */
#preloader {
    position: fixed !important;
    inset: 0 !important;
    background: #fff !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#status {
    width: 48px !important;
    height: 48px !important;
    background: none !important;
    position: static !important;
    margin: 0 !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
}

/* CSS ring spinner painted on #status */
#status::before {
    content: '' !important;
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 4px solid #e6f5f5 !important;
    border-top-color: #009999 !important;
    animation: merkato-spin 0.75s linear infinite !important;
}

@keyframes merkato-spin {
    to { transform: rotate(360deg); }
}


/* ── 6. SCROLL-REVEAL ANIMATIONS ─────────────────────────────────────────────
   Elements with [data-reveal] animate in when they enter the viewport.
   Triggered by ui-modernize.js using IntersectionObserver.
   --------------------------------------------------------------------------- */

/* Base hidden state — elements start invisible and shifted down */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1),
                transform 0.55s cubic-bezier(0.22,1,0.36,1);
}

/* When JS adds .revealed, element animates in */
[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for siblings — JS sets --reveal-delay via data attribute */
[data-reveal][data-reveal-delay="1"] { transition-delay: 0.07s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 0.14s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 0.21s; }
[data-reveal][data-reveal-delay="4"] { transition-delay: 0.28s; }
[data-reveal][data-reveal-delay="5"] { transition-delay: 0.35s; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ── 8. MISC POLISH ──────────────────────────────────────────────────────────
   Small targeted fixes for a cleaner, more consistent look.
   --------------------------------------------------------------------------- */

/* Sharper focus ring for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #009999 !important;
    outline-offset: 2px !important;
}

/* Card image — ensure consistent aspect ratio */
.product .item .thumb .photo {
    height: 200px !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #f8fafc !important;
}

/* Remove harsh box shadow from old .card component */
.card {
    box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(15,23,42,0.07) !important;
}

/* Tab underline active state — teal */
.card .nav-tabs > li > a::after {
    background: #009999 !important;
}

/* Old single-room/gallery card */
.single-room {
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

/* Scrollup button — teal instead of original teal (already correct, just ensure) */
.scrollup i {
    background: #009999 !important;
    border-color: #009999 !important;
}

/* Product price strikethrough */
.product .text del,
.product del {
    color: #94a3b8 !important;
    font-size: 12px !important;
}

/* Smooth image loading */
img {
    transition: opacity 0.3s ease;
}
img[loading="lazy"] {
    opacity: 0;
}
img[loading="lazy"].loaded,
img:not([loading]) {
    opacity: 1;
}