/* ============================================
   Dharlait WHMCS Custom Theme - EXACT MATCH 
   Based on user's final screenshot
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root {
    --blue-header: #0084e8;
    --blue-text: #0073d1;
    --orange-btn: #ff6f00;
    --orange-hover: #e66400;
    --green-check: #059669;
    --text-dark: #0f172a;
    --text-gray: #64748b;
    --border-dashed: #cbd5e1;
    --border-solid: #f1f5f9;
}

#order-pure_comparison {
    font-family: 'Nunito', sans-serif !important;
    background: #f8fafc !important;
}

/* ── Container ── */
#order-pure_comparison .price-table-container {
    padding: 40px 0 !important;
    overflow: visible !important; /* Prevent WHMCS default hidden overflow */
}

#order-pure_comparison .price-table-container > ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr)) !important; /* Magic fix: 100% on small screens, 450px on large! */
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* CARDS EXACT SIZING */
#order-pure_comparison .price-table-container > ul > li {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
    display: block !important;
}

/* ── Card Body ── */
#order-pure_comparison .price-table {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important; /* Force fit */
    box-sizing: border-box !important; /* Ensure padding doesn't cause overflow */
}

#order-pure_comparison .price-table:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}

/* ── Card Header ── */
#order-pure_comparison .price-table .top-head {
    background: var(--blue-header) !important;
    padding: 20px 15px !important;
    border: none !important;
    text-align: center !important;
    border-radius: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#order-pure_comparison .price-table .top-head .top-area {
    background: transparent !important;
    border: none !important;
}

#order-pure_comparison .price-table .top-head h4 {
    color: #ffffff !important;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    margin: 0 0 5px 0 !important;
}

#order-pure_comparison .price-table .top-head p {
    color: #e0f2fe !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* ── Features List (CSS GRID - EXACTLY 2 COLUMNS) ── */
#order-pure_comparison .price-table > ul {
    background: #ffffff !important;
    padding: 15px 15px !important; /* Reduced padding for mobile fit */
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* EXACTLY 2 Columns */
    column-gap: 5px !important; /* Tiny gap to prevent text squishing on mobile */
    flex-grow: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#order-pure_comparison .price-table > ul > li {
    background: transparent !important;
    border-bottom: 1px dashed var(--border-dashed) !important;
    padding: 10px 5px !important; /* Reduced vertical padding to decrease height */
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: var(--text-gray) !important;
    display: flex !important;
    align-items: flex-start !important; /* Perfect for multi-line wrapping */
    text-align: left !important;
    line-height: 1.3 !important; /* Tighter line height */
    word-break: break-word !important; /* Prevent text overflowing */
}

/* Remove bottom border for the last two items in the grid */
#order-pure_comparison .price-table > ul > li:nth-last-child(-n+2) {
    border-bottom: none !important;
}

/* Hide existing fontawesome icons */
#order-pure_comparison .price-table > ul > li i {
    display: none !important;
}

/* Green Checkmark Icon (SVG) */
#order-pure_comparison .price-table > ul > li::before {
    content: "";
    display: inline-block !important;
    width: 16px !important; /* Slightly smaller icon to match reduced height */
    height: 16px !important;
    margin-right: 8px !important;
    margin-top: 1px !important; /* Align checkmark with first line */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex-shrink: 0 !important;
}

/* Bold Blue Text */
#order-pure_comparison .price-table > ul > li b, 
#order-pure_comparison .price-table > ul > li strong {
    color: var(--blue-text) !important;
    font-weight: 800 !important;
    margin-right: 5px !important;
}

/* ── Price Area (Bottom) ── */
#order-pure_comparison .price-table .price-area {
    background: #ffffff !important;
    border-top: 1px solid var(--border-solid) !important;
    padding: 20px 25px !important; /* Reduced vertical padding */
    text-align: center !important;
}

#order-pure_comparison .price-table .price-area .price {
    color: var(--text-dark) !important;
    font-weight: 900 !important;
    font-size: 2.5rem !important;
    line-height: 1 !important;
    margin-bottom: 5px !important;
}

#order-pure_comparison .price-table .price-area .price small,
#order-pure_comparison .price-table .price-area .price br + text {
    display: block !important;
    color: var(--text-gray) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin-top: 5px !important;
}

/* ── Order Now Button ── */
#order-pure_comparison .price-table .order-button {
    background: var(--orange-btn) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    padding: 14px 20px !important;
    border: none !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 20px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 15px rgba(255, 111, 0, 0.3) !important;
}

#order-pure_comparison .price-table .order-button:hover {
    background: var(--orange-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(255, 111, 0, 0.4) !important;
}

/* Shopping Cart Icon (SVG) */
#order-pure_comparison .price-table .order-button::before {
    content: "";
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 10px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* NO MEDIA QUERY FOR MOBILE TO PREVENT COLLAPSING INTO 1 COLUMN ON NARROW WINDOWS */