/* Inspection Report Verify Styles */

/* This page replaces the site's real header (which carries unrelated nav/contact
   placeholder content) with a clean logo-only bar. This stylesheet only loads on
   the Verify Report page, so this selector never affects any other page. */
#masthead,
.entry-header {
    display: none !important;
}

/* The Elementor page layout leaves an empty spacer container and top padding
   above the shortcode widget, showing as blank whitespace before this header.
   Collapse it here since this stylesheet only ever loads on this page. */
.e-con-inner {
    padding-top: 0 !important;
}

.e-con-inner > .e-con:not(:has(*)) {
    display: none !important;
}

/* This container was originally one of two 50/50 columns, with the other
   (now hidden) column empty. Since it's not centered in the viewport, the
   .irv-page-header full-bleed trick below can't do its math correctly
   against it. Make it span the full row instead. */
.e-con-inner > .e-con:has(.irv-page-header) {
    width: 100% !important;
    flex: 1 1 100% !important;
    padding-top: 0 !important;
}

/* All links on this page lose their underline. Scoped safely since this
   stylesheet only ever loads on the Verify Report page. Important because the
   theme's link styles otherwise win on specificity and re-add the underline. */
a {
    text-decoration: none !important;
}

.irv-page-header {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 10;
    /* Full-bleed: break out of the theme's centered/padded .ast-container so the
       header spans the full viewport width regardless of where it sits in the DOM.
       Margin-only calc() (no left/right percentages) so this stays correct no
       matter how narrow the surrounding Elementor container is. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.irv-page-header::after {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, #0a3929, #1c8b3c);
}

/* Top contact bar */
.irv-topbar {
    background: #1a1a1a;
    color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 30px;
    padding: 10px 30px;
    font-size: 13px;
    font-weight: 600;
}

.irv-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Main bar: logo, nav, CTA button */
.irv-mainbar {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 6px 30px;
}

.irv-mainbar-logo {
    display: flex;
    align-items: center;
    gap: 16px;
}

.irv-mainbar-logo img {
    max-width: 170px;
    height: auto;
    display: block;
}

.irv-page-title {
    font-size: 17px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
    max-width: 220px;
}

.irv-mainbar-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.irv-nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.irv-nav-list a {
    color: #222;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 16px;
}

.irv-nav-list a:hover {
    color: #1c8b3c;
}

.irv-cta-btn {
    flex-shrink: 0;
    background: #156b2e;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 26px;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(21, 107, 46, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.irv-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(21, 107, 46, 0.55);
}

/* Burger button (mobile only) */
.irv-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.irv-burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #1a1a1a;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.irv-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.irv-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.irv-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Off-canvas sidebar + overlay */
.irv-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    z-index: 998;
}

.irv-sidebar-overlay.irv-is-open {
    opacity: 1;
    visibility: visible;
}

.irv-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 300px;
    max-width: 85vw;
    background: #ffffff;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
    z-index: 999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.irv-sidebar.irv-is-open {
    transform: translateX(0);
}

.irv-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 18px 20px;
    border-bottom: 1px solid #eee;
}

.irv-sidebar-close {
    border: none;
    background: #f3f3f3;
    color: #222;
    width: 34px;
    height: 34px;
    padding: 0;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.irv-sidebar-close:hover {
    background: #e2e2e2;
}

/* Without this, the inline SVG can be flex-shrunk to 0 width inside this
   small fixed-size flex button. */
.irv-sidebar-close svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.irv-sidebar-nav {
    padding: 8px 0;
}

.irv-sidebar-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.irv-sidebar-nav-list li {
    border-bottom: 1px solid #f2f2f2;
}

.irv-sidebar-nav-list a {
    display: block;
    padding: 14px 22px;
    color: #222;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 15px;
    transition: background 0.2s ease, color 0.2s ease;
}

.irv-sidebar-nav-list a:hover {
    background: #f7f7f7;
    color: #1c8b3c;
}

.irv-sidebar-cta {
    display: block;
    text-align: center;
    margin: 18px 20px;
    background: #156b2e;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 0;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.irv-sidebar-cta:hover {
    background: #0f5223;
}

.irv-sidebar-contact {
    margin-top: auto;
    padding: 18px 22px 26px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.irv-sidebar-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #444 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.2s ease;
}

.irv-sidebar-contact-item svg {
    flex-shrink: 0;
    color: #1c8b3c;
}

.irv-sidebar-contact-item:hover {
    color: #1c8b3c !important;
}

body.irv-no-scroll {
    overflow: hidden;
}

@media (max-width: 768px) {
    .irv-topbar {
        display: none;
    }

    .irv-mainbar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px;
    }

    .irv-mainbar-nav,
    .irv-mainbar > .irv-cta-btn {
        display: none;
    }

    .irv-burger {
        display: flex;
    }
}

.irv-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    max-width: 640px;
    margin: 30px auto;
}

.irv-box {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.1);
    border: 1px solid #eee;
}

/* Status header bar */
.irv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 30px;
    color: #fff;
}

.irv-header-valid {
    background: linear-gradient(135deg, #1c8b3c, #156b2e);
}

.irv-header-expired {
    background: linear-gradient(135deg, #a3110a, #830001);
    justify-content: center;
}

.irv-header-text {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Animated days-left circle badge */
.irv-days-circle {
    flex-shrink: 0;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid rgba(255, 255, 255, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    transform: scale(0.6);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.irv-days-circle.irv-circle-in {
    transform: scale(1);
    opacity: 1;
}

.irv-days-number {
    font-size: 30px;
    font-weight: 800;
    color: #156b2e;
    line-height: 1;
}

.irv-days-label {
    font-size: 10px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 2px;
}

/* Body */
.irv-body {
    padding: 26px 30px 30px;
}

.irv-section-title {
    margin: 0 0 14px 0;
    font-size: 17px;
    font-weight: 700;
    color: #222;
}

.irv-details {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 26px 0;
    background: #f3f3f3;
    border-radius: 8px;
    border-left: 4px solid #1c8b3c;
}

.irv-header-expired ~ .irv-body .irv-details {
    border-left-color: #830001;
}

.irv-details tr td,
.irv-details tr th {
    padding: 4px 16px;
}

.irv-details th {
    text-align: left;
    color: #444;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    width: 24%;
}

.irv-details td {
    text-align: left;
    color: #111;
    font-size: 14px;
    font-weight: 500;
}

.irv-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #1c7a3c;
    color: #fff !important;
    text-decoration: none !important;
    padding: 15px 0;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.irv-download-btn:hover {
    background: #15602f;
    transform: translateY(-1px);
}

.irv-download-icon {
    flex-shrink: 0;
}

.irv-error {
    color: #721c24;
    background: #f8d7da;
    padding: 18px;
    border-radius: 6px;
    border: 1px solid #f5c6cb;
    text-align: center;
    margin: 20px;
}

@media (max-width: 480px) {
    .irv-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        padding: 24px 20px;
    }

    .irv-body {
        padding: 22px 18px 26px;
    }

    .irv-details th,
    .irv-details td {
        padding: 9px 12px;
        font-size: 13px;
    }
}