/* --- Section & Background --- */
.partner-link-section {
    position: relative;
    padding-top: 3rem; /* Equivalent to py-12 */
    padding-bottom: 3rem; /* Equivalent to py-12 */
    overflow: hidden;
}

.partner-link-background {
    position: absolute;
    inset: 0;
    background-size: cover; /* Equivalent to bg-cover */
    background-position: center; /* Equivalent to bg-center */
    background-repeat: no-repeat; /* Equivalent to bg-no-repeat */
    z-index: 0;
}

.partner-link-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(2, 6, 23, 0.9); /* Equivalent to bg-slate-950/90 */
    z-index: 10;
}

/* --- Content Wrapper --- */
.partner-link-content-wrapper {
    position: relative;
    z-index: 20;
    width: 100%;
    max-width: 72rem; /* Equivalent to container mx-auto (assuming default container max-width of 1152px or 72rem) */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* Equivalent to px-4 */
    padding-right: 1rem;
}

/* Specific inner wrapper for max-w-6xl */
.partner-link-content-inner-wrapper {
    max-width: 64rem; /* Equivalent to max-w-6xl */
    margin-left: auto;
    margin-right: auto;
}

/* --- Header Section --- */
.partner-link-header {
    text-align: center;
    margin-bottom: 3rem; /* Equivalent to mb-12 */
}

.partner-link-title {
    font-size: 1.875rem; /* Equivalent to text-3xl */
    font-weight: 600; /* Equivalent to font-semibold */
    color: #fff; /* Equivalent to text-white */
    margin-bottom: 1.5rem; /* Equivalent to mb-6 */
}

.partner-link-subtitle {
    font-size: 1.125rem; /* Equivalent to text-lg */
    color: rgba(255, 255, 255, 0.9); /* Equivalent to text-white/90 */
    line-height: 1.625; /* Equivalent to leading-relaxed */
    max-width: 48rem; /* Equivalent to max-w-3xl */
    margin-left: auto;
    margin-right: auto;
}

/* --- Browse Our Catalog Button (reused from previous conversion) --- */
.cta-button-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    height: 2.5rem; /* h-10 */
    padding: 0.5rem 1rem; /* px-4 py-2 */
    color: #fff;
    background-color: #005EB8; /* bg-daikin-blue */
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

    .cta-button-blue:hover {
        background-color: #fff; /* hover:bg-white */
        color: #005EB8; /* hover:text-daikin-blue */
    }

.button-arrow-icon {
    margin-left: 0.5rem; /* ml-2 */
    height: 1rem; /* h-4 */
    width: 1rem; /* w-4 */
    transition: transform 0.2s ease-in-out; /* transition-transform */
}

.cta-button-blue:hover .button-arrow-icon {
    transform: translateX(0.25rem); /* group-hover:translate-x-1 */
}

/* --- Switchback Card --- */
.switchback-card {
    background-color: rgba(255, 255, 255, 0.1); /* Equivalent to bg-white/10 */
    backdrop-filter: blur(12px); /* Equivalent to backdrop-blur-md */
    border-radius: 0.5rem; /* Equivalent to rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Equivalent to shadow-lg */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Equivalent to border border-white/20 */
    overflow: hidden;
}

/* --- Switchback Buttons --- */
.switchback-buttons {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Equivalent to border-b border-white/20 */
}

.switchback-button {
    flex: 1; /* Equivalent to flex-1 */
    padding: 1rem 1.5rem; /* Equivalent to px-6 py-4 */
    font-weight: 600; /* Equivalent to font-semibold */
    border-radius: 0; /* Ensures rounded-none */
    border: none;
    cursor: pointer;
    background-color: transparent; /* Default transparent */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Equivalent to transition-all duration-300 */
    color: rgba(255, 255, 255, 0.8); /* text-white/80 */
}

    .switchback-button:hover {
        background-color: rgba(255, 255, 255, 0.1); /* hover:bg-white/10 */
        color: #fff; /* hover:text-white */
    }

    .switchback-button.active {
        background-color: rgba(255, 255, 255, 0.2); /* bg-white/20 */
        color: #fff; /* text-white */
    }

        .switchback-button.active:hover {
            background-color: rgba(255, 255, 255, 0.25); /* hover:bg-white/25 */
        }

/* --- Content Area --- */
.switchback-content-area {
    padding: 2rem; /* Equivalent to p-8 */
}

.switchback-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 3rem; /* Equivalent to gap-12 */
    align-items: stretch; /* Equivalent to items-stretch */
}

@media (min-width: 1024px) { /* lg breakpoint */
    .switchback-grid {
        grid-template-columns: repeat(2, 1fr); /* lg:grid-cols-2 */
    }
}

/* --- Left Side: Key Features Card --- */
.key-features-card {
    background-color: rgba(255, 255, 255, 0.05); /* Equivalent to bg-white/5 */
    backdrop-filter: blur(4px); /* Equivalent to backdrop-blur-sm */
    border-radius: 0.5rem; /* Equivalent to rounded-lg */
    padding: 1.5rem; /* Equivalent to p-6 */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Equivalent to border border-white/10 */
    height: 100%; /* Equivalent to h-full */
}

.key-features-content-wrapper {
    transition: all 0.5s ease-in-out; /* Equivalent to transition-all duration-500 ease-in-out */
    height: 100%;
    display: flex;
    flex-direction: column; /* flex flex-col */
}

    /* Apply space-y-4 to direct children for features content */
    .key-features-content-wrapper > *:not(:last-child) {
        margin-bottom: 1rem; /* Equivalent to space-y-4 (4 * 0.25rem = 1rem) */
    }

.key-features-list {
    /* Hidden by default, activated by JS */
    display: none;
    flex: 1; /* flex-1 */
    /* space-y-4 equivalent for inner list */
}

    .key-features-list > *:not(:last-child) {
        margin-bottom: 1rem; /* space-y-4 */
    }

    .key-features-list.is-active {
        display: block; /* Show active list */
    }

.key-features-title {
    font-size: 1.25rem; /* Equivalent to text-xl */
    font-weight: 600; /* Equivalent to font-semibold */
    color: #fff; /* Equivalent to text-white */
}

.features-list {
    list-style: none; /* Remove default list bullets */
    padding: 0;
    margin: 0;
    color: rgba(255, 255, 255, 0.9); /* text-white/90 */
    /* space-y-3 */
}

    .features-list li:not(:last-child) {
        margin-bottom: 0.75rem; /* space-y-3 */
    }

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Equivalent to gap-3 */
}

.check-circle-icon {
    height: 1.25rem; /* Equivalent to h-5 */
    width: 1.25rem; /* Equivalent to w-5 */
    color: #fff; /* text-white */
    flex-shrink: 0; /* flex-shrink-0 */
    stroke: currentColor;
}

/* --- Right Side: Login Credentials Card --- */
.login-credentials-card {
    background-color: rgba(255, 255, 255, 0.05); /* Equivalent to bg-white/5 */
    backdrop-filter: blur(4px); /* Equivalent to backdrop-blur-sm */
    border-radius: 0.5rem; /* Equivalent to rounded-lg */
    padding: 1.5rem; /* Equivalent to p-6 */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Equivalent to border border-white/10 */
    height: 100%; /* Equivalent to h-full */
}

.login-credentials-content {
    transition: all 0.5s ease-in-out; /* transition-all duration-500 ease-in-out */
    height: 100%;
    display: flex;
    flex-direction: column; /* flex flex-col */
    justify-content: space-between; /* justify-between */
}

.login-credentials-content:not(.active) {
    display: none;
}


/* Login Details Group - space-y-6 */
.login-details-group {
    /* Mimics space-y-6 */
}

    .login-details-group > *:not(:last-child) {
        margin-bottom: 1.5rem; /* space-y-6 */
    }


.login-title {
    font-size: 1.25rem; /* Equivalent to text-xl */
    font-weight: 600; /* Equivalent to font-semibold */
    color: #fff; /* text-white */
    margin-bottom: 1rem; /* mb-4 */
}

/* Login Info List - space-y-3 */
.login-info-list {
    /* Mimics space-y-3 */
}

    .login-info-list > *:not(:last-child) {
        margin-bottom: 0.75rem; /* space-y-3 */
    }

.login-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-label {
    font-weight: 500; /* font-medium */
    color: rgba(255, 255, 255, 0.9); /* text-white/90 */
}

.login-value {
    font-family: monospace; /* font-mono */
    background-color: rgba(255, 255, 255, 0.1); /* bg-white/10 */
    padding: 0.5rem 0.75rem; /* px-3 py-2 */
    border-radius: 0.25rem; /* rounded */
    border: 1px solid rgba(255, 255, 255, 0.2); /* border border-white/20 */
    color: #fff; /* text-white */
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
}

.login-cta-area {
    margin-top: 1.5rem; /* mt-6 */
}

.login-button-link {
    display: block; /* block */
    text-decoration: none; /* remove underline */
}

.login-button {
    width: 100%; /* w-full */
    background-color: rgba(255, 255, 255, 0.2); /* bg-white/20 */
    color: #fff;
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
    font-weight: 600; /* font-semibold */
    backdrop-filter: blur(4px); /* backdrop-blur-sm */
    border: 1px solid rgba(255, 255, 255, 0.3); /* border border-white/30 */
    border-radius: 0.375rem; /* rounded-md, or whatever the actual Button component implies */
    cursor: pointer;
    transition: all 0.3s ease; /* transition-all duration-300 */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .login-button:hover {
        background-color: rgba(255, 255, 255, 0.3); /* hover:bg-white/30 */
    }

.login-button-icon {
    margin-left: 0.5rem; /* ml-2 */
    height: 1rem; /* h-4 */
    width: 1rem; /* w-4 */
    stroke: currentColor;
}

/* MEDIA QUERIES */

@media (max-width: 767px) {
    .switchback-content-area {
        padding: 1rem;
    }

    .login-credentials-card {
        padding-inline: 1rem;
    }

    .key-features-card {
        padding-inline: 1rem;
    }
}

/* MEDIA QUERIES END */