/* Glass Effect */
.glass-effect {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.commercial-header{
    height: 5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center; 
    position: relative;
    z-index: 1001;
    justify-content:space-between;
}

.top-row {
    justify-content: space-between;
    padding: 0 1rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1001; /* Ensure header is above other content */
}

.migratrix-logo img {
    height: 50px;
}

.plan-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.plan-card {
    background: var(--migratrix-bg-card);
    border: 2px solid var(--migratrix-border);
    border-radius: var(--migratrix-radius-sm);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.plan-card:hover {
    border-color: var(--migratrix-primary-light);
    transform: translateY(-1px);
    box-shadow: var(--migratrix-shadow-sm);
}

.plan-card.selected {
    border-color: var(--migratrix-primary);
    box-shadow: 0 0 0 2px rgba(74, 137, 220, 0.1);
}

.plan-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--migratrix-text-primary);
    margin-bottom: 0.25rem;
}

.plan-desc {
    font-size: 0.75rem;
    color: var(--migratrix-text-secondary);
    margin-bottom: 0.5rem;
}

.plan-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--migratrix-primary);
    margin-top: 0.5rem;
}
/* Button Styles */
/*.migratrix-btn {*/
/*    padding: 0.5rem 1rem;*/
/*    border: 1px solid #e0e0e0;*/
/*    border-radius: 8px;*/
/*    background: white;*/
/*    color: #333;*/
/*    text-decoration: none;*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    gap: 0.5rem;*/
/*    font-size: 0.9rem;*/
/*    cursor: pointer;*/
/*    transition: all 0.2s;*/
/*    white-space: nowrap;*/
/*    font-family: inherit;*/
/*}*/

/*.migratrix-btn:hover {*/
/*    background: #f9f9f9;*/
/*    border-color: #ccc;*/
/*    transform: translateY(-1px);*/
/*}*/

/*.migratrix-btn.action {*/
/*    background: #2563eb;*/
/*    color: white;*/
/*    border-color: #2563eb;*/
/*}*/

/*.migratrix-btn.action:hover {*/
/*    background: #1d4ed8;*/
/*    border-color: #1d4ed8;*/
/*}*/

/*.migratrix-btn.stages {*/
/*    background: #f3f4f6;*/
/*    border-color: #d1d5db;*/
/*}*/

/*.migratrix-btn.stages:hover {*/
/*    background: #e5e7eb;*/
/*    border-color: #9ca3af;*/
/*}*/

/* Desktop Navigation */
.item-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

/* Mobile Navigation Toggle */
.mobile-nav-toggle {
    display: none;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.5rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

.mobile-nav-toggle:hover {
    background: #f9f9f9;
    border-color: #ccc;
}

/* Mobile Navigation Menu */
.mobile-nav {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 0.75rem;
    z-index: 1002; /* Higher than header to ensure dropdown shows */
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.mobile-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.mobile-nav.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav-content {
    display: flex;
    padding: 0 2rem;
    justify-content: space-between;
    min-width: max-content;
}

.mobile-nav .migratrix-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.cc-rsqmy{
    height: 600px !important;
}

/* CSS-only alternative using checkbox hack */
.nav-checkbox {
    display: none;
}

.nav-checkbox:checked + .top-row .mobile-nav {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.nav-checkbox:checked + .top-row .mobile-nav-toggle i::before {
    content: "close";
}

@media (max-width: 1727px) {

    .cc-rsqmy{
        width: 350px !important;
        height: 550px !important;
    }
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
    .item-actions {
        display: none;
    }

    .mobile-nav-toggle {
        display: flex;
    }

    .top-row {
        padding: 0.75rem 1rem;
    }

    .migratrix-logo img {
        height: 40px;
    }
}

@media (max-width: 480px) {
    .top-row {
        padding: 0.5rem 0.75rem;
    }

    .migratrix-logo img {
        height: 36px;
    }

    .mobile-nav {
        left: -0.2rem;
        right: -0.2rem;
    }

    .migratrix-btn {
        padding: 0.1rem 0.1rem;
        font-size: 0.7rem !important;
    }

    .migratrix-btn.md{
        padding: 0.1rem 0.1rem;
        font-size: 0.7rem !important;
    }
}

@media (max-width: 360px) {
    .migratrix-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
        gap: 0.3rem;
    }

    .migratrix-btn i {
        font-size: 1rem;
    }

    .mobile-nav {
        padding: 0.5rem;
    }

    .mobile-nav-content {
        gap: 0.3rem;
    }
}

/* Alternative: CSS-only dropdown using hover */
@media (max-width: 768px) {
    .top-row:hover .mobile-nav,
    .mobile-nav:hover {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }
}