/* Design Tokens & Custom Properties */
:root {
    --color-blue: #21428b;
    --color-yellow: #f4bc23;
    --color-red: #cd202a;
    --color-dark: #231f20;
    --color-dark-bg: #131214;
    --color-card-shadow: rgba(0, 0, 0, 0.45);
    
    --border-offset: 3vh; /* Distance from edge of viewport */
    --border-width: 1.5vh;  /* Thickness of the border */
    --font-primary: 'Montserrat', sans-serif;
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100vh;
    width: 100vw;
    overflow: hidden; /* Prevent scrollbars on desktop default */
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-dark-bg);
    color: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Portal Main Container */
.portal-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Certificate Card Styling (Takes full viewport, landscape by default) */
.certificate-card {
    background-image: url('certificate-bkg-desktop.jpg');
    background-size: cover;
    background-position: center;
    background-color: #f7f7f9;
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: certificateFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Dynamic CSS SVG Borders with Margin Offsets */
.border-svg {
    position: absolute;
    pointer-events: none;
}

.top-border-svg {
    top: var(--border-offset);
    left: var(--border-offset);
    width: calc(100% - (var(--border-offset) * 2));
    height: var(--border-width);
    z-index: 12; /* Top overlaps left and right borders */
}

.bottom-border-svg {
    bottom: var(--border-offset);
    left: var(--border-offset);
    width: calc(100% - (var(--border-offset) * 2));
    height: var(--border-width);
    z-index: 10;
}

.left-border-svg {
    top: var(--border-offset);
    left: var(--border-offset);
    width: var(--border-width);
    height: calc(100% - (var(--border-offset) * 2));
    z-index: 10;
}

.right-border-svg {
    top: var(--border-offset);
    right: var(--border-offset);
    width: var(--border-width);
    height: calc(100% - (var(--border-offset) * 2));
    z-index: 10;
}

/* Certificate Inner Content */
.certificate-content {
    padding: 6vh 6vw;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    flex-grow: 1;
}

/* Logos Header */
.logos-container {
    width: 100%;
    max-width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vh;
}

.logo {
    height: 8.5vh; /* Desktop logo height proportional to viewport height */
    width: auto;
    object-fit: contain;
}

/* Text Body Content */
.certificate-body {
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 85%;
    gap: 1.5vh; /* Base text elements gap */
    margin: 1.5vh 0;
}

/* Font Sizing requested: Company: 7vh, Titular: 4vh, All others: 2.5vh */
.intro-text {
    font-size: 2.5vh;
    font-weight: 600; /* Semi-bold */
    line-height: 1.5;
    color: var(--color-dark);
}

.intro-text strong {
    font-weight: 900; /* Black for emphasis */
}

/* Company Highlight Block (Loose top spacing, tight bottom spacing) */
.company-wrapper {
    margin-top: 3.5vh;
    margin-bottom: 0.5vh;
    width: 100%;
    text-align: center;
}

.company-name {
    font-family: var(--font-primary);
    font-weight: 900; /* Black */
    font-size: 7vh;
    color: var(--color-dark);
    display: inline-block;
    position: relative;
    z-index: 1;
    letter-spacing: -0.04rem;
    padding: 0 1vw;
}

.company-name.highlight::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 5%;
    width: 100%;
    height: 38%;
    background-color: var(--color-yellow);
    z-index: -1;
}

/* Titular block (Tight top spacing, loose bottom spacing) */
.titular-text {
    font-size: 4vh;
    font-weight: 600; /* Semi-bold */
    color: var(--color-dark);
    margin-top: 0;
    margin-bottom: 2.5vh;
}

.bold-text {
    font-weight: 700;
}

.uppercase {
    text-transform: uppercase;
}

.font-black {
    font-weight: 900;
}

.authorized-status {
    font-size: 2.5vh;
    font-weight: 600;
    line-height: 1.45;
    color: var(--color-dark);
}

.support-text {
    font-size: 2.5vh;
    font-weight: 600; /* Semi-bold */
    line-height: 1.6;
    max-width: 96%;
    color: var(--color-dark);
}

.legal-text {
    font-size: 2.5vh;
    font-weight: 600; /* Semi-bold */
    line-height: 1.6;
    max-width: 95%;
    color: var(--color-dark);
}

.legal-text strong {
    font-weight: 700;
}

/* Footer Section */
.certificate-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.date-time-box {
    font-family: var(--font-primary);
    font-weight: 600; /* Semi-bold */
    font-size: 2.5vh;
    color: var(--color-dark);
    text-align: center;
    padding: 0.6vh 2vh;
    border-radius: 0.25rem;
    background-color: rgba(35, 31, 32, 0.04);
    letter-spacing: 0.03rem;
}

/* Warning Red Screen */
.warning-container {
    width: 90%;
    max-width: 30rem;
    perspective: 1000px;
    animation: warningPopIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.warning-box {
    background-color: rgba(35, 31, 32, 0.9);
    border: 0.125rem solid var(--color-red);
    border-radius: 0.5rem;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 0.9375rem 2.1875rem rgba(205, 32, 42, 0.15), 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(15px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

.warning-logo {
    height: 3rem;
    width: auto;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

.warning-icon-wrapper {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: rgba(205, 32, 42, 0.15);
    color: var(--color-red);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    animation: warningPulse 2s infinite;
}

.warning-svg {
    width: 2rem;
    height: 2rem;
}

.warning-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.03rem;
}

.warning-message {
    font-size: 0.9rem;
    color: #a1a1aa;
    line-height: 1.6;
}

.divider {
    width: 100%;
    height: 0.0625rem;
    background-color: rgba(255, 255, 255, 0.1);
}

.redirect-info {
    font-size: 0.85rem;
    color: #a1a1aa;
    line-height: 1.5;
}

.countdown-container {
    margin-top: 0.5rem;
    font-weight: 700;
    color: #ffffff;
}

.countdown-num {
    color: var(--color-yellow);
    font-size: 1.1rem;
    font-weight: 900;
    display: inline-block;
    animation: numPulse 1s infinite alternate;
}

.redirect-btn {
    display: inline-block;
    background-color: transparent;
    color: #ffffff;
    border: 0.0625rem solid rgba(255, 255, 255, 0.2);
    padding: 0.6rem 1.5rem;
    border-radius: 0.25rem;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.redirect-btn:hover {
    background-color: #ffffff;
    color: var(--color-dark);
    border-color: #ffffff;
}

/* Animations */
@keyframes certificateFadeIn {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(15px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes warningPopIn {
    from {
        opacity: 0;
        transform: scale(0.9) rotateX(-10deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotateX(0);
    }
}

@keyframes warningPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(205, 32, 42, 0.4);
    }
    70% {
        box-shadow: 0 0 0 1.25rem rgba(205, 32, 42, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(205, 32, 42, 0);
    }
}

@keyframes numPulse {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.15);
    }
}

/* Responsive Media Queries (Mobile portrait override: enables scrolling to fit content at readable sizes) */
@media (max-width: 768px), (orientation: portrait) {
    html, body {
        height: auto;
        min-height: 100vh;
        overflow-y: auto; /* Enable scrolling on mobile screens */
    }

    .portal-container {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
    }

    /* Switch to mobile portrait background, height: auto to allow expansion */
    .certificate-card {
        background-image: url('certificate-bkg-mobile.jpg');
        height: auto;
        min-height: 100vh;
        --border-offset: 1.25rem;
        --border-width: 0.75rem;
    }
    
    .certificate-content {
        padding: 3.5rem 3.5rem 3rem 3.5rem; /* Restored top padding to 3.5rem, increased side padding to 3.5rem to offset logos and text from left/right borders */
        height: auto;
        min-height: 100vh;
        justify-content: flex-start; /* Flow top-down naturally */
        gap: 2rem;
    }

    .logos-container {
        max-width: 100%;
        margin-bottom: 0;
    }

    .logo {
        height: 3.8rem;
    }
    
    .certificate-body {
        max-width: 100%;
        gap: 1.25rem;
        margin: 0;
    }

    /* Standardized margins for Company and Titular spacing on mobile */
    .company-wrapper {
        margin-top: 2rem;
        margin-bottom: 0.25rem;
    }

    .titular-text {
        margin-top: 0;
        margin-bottom: 1.5rem;
    }

    /* Mobile font sizes scaled to remain highly readable (scrolling handles height overflow) */
    .intro-text {
        font-size: 1.05rem;
    }

    .company-name {
        font-size: 2.25rem;
        padding: 0 0.5rem;
        letter-spacing: -0.01rem;
    }

    .titular-text {
        font-size: 1.35rem;
    }

    .authorized-status {
        font-size: 1.05rem;
    }

    /* Hide this specific paragraph on mobile only */
    .support-text {
        display: none;
    }

    .legal-text {
        font-size: 1.05rem;
    }

    .date-time-box {
        font-size: 1.05rem;
        padding: 0.5rem 1.25rem;
    }
    
    .certificate-footer {
        margin-top: auto; /* Push timestamp to the bottom */
        padding-top: 1rem;
    }
}

/* Print Stylesheet Overrides */
@media print {
    body {
        background-color: #ffffff !important;
        background-image: none !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .warning-container, .redirect-btn {
        display: none !important;
    }
    
    .portal-container {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    .certificate-card {
        background-image: url('certificate-bkg-desktop.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        box-shadow: none !important;
        width: 100vw !important;
        height: 100vh !important;
        border-radius: 0 !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        margin: 0 !important;
        --border-offset: 3vh;
        --border-width: 1.5vh;
    }
    
    .border-svg path {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .company-name.highlight::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        background-color: var(--color-yellow) !important;
    }
}