/* ==========================================================================
   INVOICEDOM - SELECT REGISTRATION TYPE PAGE STYLES
   Pixel-perfect styling matching design specifications
   ========================================================================== */

/* Page Background & Layout */
.role-select-page {
    background: #F4F8FC;
    min-height: calc(100vh - 80px);
    position: relative;
    overflow: hidden;
    padding: 60px 24px 90px;
    box-sizing: border-box;
}

/* Subtle background ambient waves */
.role-select-page::before {
    content: '';
    position: absolute;
    top: -200px;
    left: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(29, 104, 246, 0.05) 0%, rgba(244, 248, 252, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.role-select-page::after {
    content: '';
    position: absolute;
    top: 50px;
    right: -150px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(0, 184, 124, 0.04) 0%, rgba(244, 248, 252, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.role-select-container {
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* --------------------------------------------------------------------------
   HERO / HEADER SECTION
   -------------------------------------------------------------------------- */
.role-select-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 52px;
}

/* Pill Badge */
.role-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #EEF4FF;
    border: 1px solid #D0E2FF;
    border-radius: 9999px;
    padding: 6px 16px;
    color: #1D68F6;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(29, 104, 246, 0.06);
}

.role-badge-pill i {
    font-size: 12px;
}

/* Hero Title */
.role-select-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 46px;
    font-weight: 800;
    line-height: 1.15;
    color: #0B1A30;
    letter-spacing: -0.025em;
    margin: 0 0 16px 0;
}

.role-select-title .text-blue {
    color: #1D68F6;
}

.role-select-title .text-green {
    color: #00B87C;
}

/* Hero Subtitle */
.role-select-desc {
    font-size: 15.5px;
    color: #64748B;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 640px;
}

/* --------------------------------------------------------------------------
   THREE CARDS GRID
   -------------------------------------------------------------------------- */
.role-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
}

/* Base Card */
.role-card {
    background: #FFFFFF;
    border-radius: 24px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.role-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Specific Card Hover Borders */
.role-card.seller-card:hover {
    border-color: #BFDBFE;
}

.role-card.buyer-card:hover {
    border-color: #A7F3D0;
}

.role-card.org-card:hover {
    border-color: #DDD6FE;
}

/* Top squircle icon badge */
.role-card-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.seller-card .role-card-badge {
    background: #EEF4FF;
    color: #1D68F6;
    border: 1px solid #D6E4FF;
}

.buyer-card .role-card-badge {
    background: #E6FBF2;
    color: #00B87C;
    border: 1px solid #C4F3DF;
}

.org-card .role-card-badge {
    background: #F3E8FF;
    color: #7C3AED;
    border: 1px solid #E9D5FF;
}

/* 3D Visual Box */
.role-visual-box {
    width: 100%;
    height: 200px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    margin-bottom: 24px;
    transition: transform 0.3s ease;
}

.role-card:hover .role-visual-box {
    transform: scale(1.02);
}

.seller-card .role-visual-box {
    background: linear-gradient(180deg, #F0F6FF 0%, #E6F0FD 100%);
    border: 1px solid #DCE9FC;
}

.buyer-card .role-visual-box {
    background: linear-gradient(180deg, #EDFAF3 0%, #E0F5EB 100%);
    border: 1px solid #D4EFE1;
}

.org-card .role-visual-box {
    background: linear-gradient(180deg, #F7F2FF 0%, #EFE8FD 100%);
    border: 1px solid #E5D9F8;
}

.role-visual-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    pointer-events: none;
}

/* Card Titles */
.role-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #0B1A30;
    letter-spacing: -0.015em;
    margin: 0 0 8px 0;
}

.role-summary {
    font-size: 13.5px;
    color: #64748B;
    line-height: 1.5;
    margin: 0 0 24px 0;
    min-height: 42px;
}

/* Checkmark List */
.role-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.role-feature-li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: #334155;
}

.role-feature-li i {
    font-size: 13px;
    flex-shrink: 0;
}

.seller-card .role-feature-li i {
    color: #1D68F6;
}

.buyer-card .role-feature-li i {
    color: #00B87C;
}

.org-card .role-feature-li i {
    color: #7C3AED;
}

/* Action Buttons */
.role-btn {
    width: 100%;
    padding: 13.5px 20px;
    border-radius: 50px;
    font-size: 14.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    font-family: inherit;
}

/* Seller Button (Blue) */
.role-btn-seller {
    background: linear-gradient(180deg, #1D68F6 0%, #1754DB 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(29, 104, 246, 0.32);
}

.role-btn-seller:hover {
    background: linear-gradient(180deg, #185BDB 0%, #1247BE 100%);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(29, 104, 246, 0.42);
}

/* Buyer Button (Green) */
.role-btn-buyer {
    background: linear-gradient(180deg, #00B87C 0%, #009A67 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(0, 184, 124, 0.32);
}

.role-btn-buyer:hover {
    background: linear-gradient(180deg, #00A670 0%, #00895B 100%);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 184, 124, 0.42);
}

/* Organization Button (Purple) */
.role-btn-org {
    background: linear-gradient(180deg, #7C3AED 0%, #6366F1 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.32);
}

.role-btn-org:hover {
    background: linear-gradient(180deg, #6D28D9 0%, #4F46E5 100%);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.42);
}

.role-btn i {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.role-btn:hover i {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   DARK FOOTER THEME OVERRIDE
   -------------------------------------------------------------------------- */
body.dark-footer-mode .landing-footer {
    background: #0B1A30 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-footer-mode .landing-footer .footer-logo {
    filter: none;
}

body.dark-footer-mode .landing-footer .footer-desc {
    color: #94A3B8 !important;
}

body.dark-footer-mode .landing-footer .footer-col h5 {
    color: #FFFFFF !important;
}

body.dark-footer-mode .landing-footer .footer-col ul li a {
    color: #94A3B8 !important;
}

body.dark-footer-mode .landing-footer .footer-col ul li a:hover {
    color: #38BDF8 !important;
    padding-left: 4px;
}

body.dark-footer-mode .landing-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-footer-mode .landing-footer .footer-bottom p {
    color: #64748B !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
    .role-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .role-card.org-card {
        grid-column: span 2;
        max-width: 540px;
        margin: 0 auto;
        width: 100%;
    }
    
    .role-select-title {
        font-size: 38px;
    }
}

@media (max-width: 768px) {
    .role-select-page {
        padding: 40px 18px 64px;
    }
    
    .role-cards-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .role-card.org-card {
        grid-column: span 1;
        max-width: 100%;
    }
    
    .role-select-title {
        font-size: 32px;
    }
    
    .role-visual-box {
        height: 180px;
    }
}