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

:root {
    --primary-color: #3b82f6; /* Blue 500 */
    --primary-dark: #2563eb; /* Blue 600 */
    --secondary-color: #f59e0b; /* Amber 500 */
    --text-color: #1f2937; /* Gray 800 */
    --background-color: #f9fafb; /* Gray 50 */
    --card-bg: #ffffff;
    --border-color: #e5e7eb; /* Gray 200 */

    /* Alert Colors */
    --error-bg: #fee2e2; /* Red 100 */
    --error-text: #b91c1c; /* Red 700 */
    --success-bg: #dcfce7; /* Green 100 */
    --success-text: #15803d; /* Green 700 */
    --info-bg: #e0f2fe; /* Sky 100 */
    --info-text: #075985; /* Sky 800 */


}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* Use Inter for general body text (readable, modern sans-serif) */
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    /* Increase base text size and line height for better readability */
    font-size: 16px; 
    line-height: 1.6; 
    /* Set a darker, high-contrast text color */
    color: #333333; 
}

h1, h2, h3, h4, h5, h6, .logo {
    /* Use Fira Sans for headings (stronger, more distinct sans-serif) */
    font-family: 'Fira Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: #1a202c; /* Near black */
}

p {
    margin-bottom: 1.25rem; /* Add consistent space below paragraphs */
}

.main-content header p {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    /* Keeping text-lg (1.125rem) and text-gray-600 */
    line-height: 1.75; /* Slightly increase line height for better flow in the main description */
}

/* Table Text Readability Fixes */
/* Ensure table data in the cart/account pages remains neat and readable */
.cart-table td, .domain-list-table td, .domain-card-body span {
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Enhance the "Remove" links in the cart */
.cart-table a[aria-label^="Remove"], .item-card-action a {
    color: #E53E3E; /* A clear, destructive red */
    font-weight: 500; /* Medium weight */
}

/* --- Layout --- */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.main-content ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
    list-style-type: disc;
}

.main-content ul li {
    margin-bottom: 0.5rem;
}

.main-content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* --- Header & Navigation (EXISTING CODE UNMODIFIED) --- */
.site-header {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 0.5rem 1rem;
}

.logo-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.menu-area {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Primary Nav (below logo on mobile, hidden on desktop) */
.primary-nav {
    display: flex;
    flex-direction: column; /* Stack vertically on mobile */
    gap: 0.5rem;
    padding: 0.5rem 0 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: 0.5rem;
}

.nav-btn {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem; /* rounded-md */
    transition: background-color 0.2s;
}

.nav-btn:hover {
    background-color: #f3f4f6; /* Gray 100 */
}

/* --- Cart Button & Badge --- */
.cart-btn {
    position: relative;
    font-size: 1.5rem;
    text-decoration: none;
    padding: 0.25rem;
    line-height: 1; /* Aligns emoji better */
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--secondary-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 9999px; /* rounded-full */
    padding: 1px 6px;
    min-width: 20px;
    text-align: center;
    line-height: 1.2;
}

.user-dropdown {
    position: relative;
}

.user-menu-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--primary-color);
    line-height: 1;
    transition: opacity 0.2s;
}

.user-menu-btn:hover {
    opacity: 0.8;
}

.dropdown-menu {
    /* Base state: Hidden */
    display: none; /* JS will toggle this to 'flex' */

    position: absolute;
    top: 100%; /* Position below the button */
    right: 0;
    z-index: 50;
    margin-top: 0.5rem; /* Space below button */

    /* Appearance */
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    min-width: 180px;
    padding: 0.5rem;

    /* Internal layout (will be set to 'flex' by JS) */
    flex-direction: column;
    gap: 0.25rem;


}

.dropdown-item {
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: var(--text-color);
    border-radius: 0.375rem;
    transition: background-color 0.2s;
    font-size: 0.95rem;
}

.dropdown-item:hover {
    background-color: #f3f4f6; /* Gray 100 */
}

.user-label {
    font-weight: 600;
    color: var(--primary-dark);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.25rem;
    padding-bottom: 0.5rem;
    cursor: default; /* Not a clickable link */
}

.site-footer {
  margin-top: auto;
  padding: 12px 16px;
  text-align: center;
  font-size: 0.85rem;
  color: #777;
  border-top: 1px solid #e5e5e5;
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
}

.site-footer a:hover {
  color: #000;
}

/* --- Desktop/Tablet Media Query (Large Screen Layout) (EXISTING CODE UNMODIFIED) --- */
@media (min-width: 768px) {
    .site-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 2rem;
    }

    .logo-area {
        padding: 0; /* Remove mobile padding */
        flex-grow: 1;
        justify-content: flex-start;
        gap: 2rem;
    }

    /* Primary navigation (inline on desktop) */
    .primary-nav {
        flex-direction: row; /* Layout horizontally on desktop */
        border-top: none;
        margin-top: 0;
        padding: 0;
    }

    .nav-btn {
        padding: 0.5rem 1rem;
        color: var(--text-color);
    }

    .logo {
        /* Pushing the menu to the right */
        margin-right: auto;
    }

    /* Move cart and dropdown to the far right area */
    .menu-area {
        order: 3;
        gap: 1.5rem;
    }


}

/* ------------------------------------------- */
/* --- Message/Alert Styling (UPDATED) --- */
/* ------------------------------------------- */

.alert {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    /* Add a default border for consistency, the specific alert class will set the color */
    border: 1px solid var(--border-color);
    border-left-width: 4px; /* Stronger left border */
}

/* The SVG icon and title should be horizontally aligned */
.alert .flex-items-center {
    display: flex;
    align-items: center;
}

.alert-error {
    background-color: var(--error-bg);
    color: var(--error-text);
    border-left-color: var(--error-text);
}

.alert-success {
    background-color: var(--success-bg);
    color: var(--success-text);
    border-left-color: var(--success-text);
}

.alert-info {
    background-color: var(--info-bg);
    color: var(--info-text);
    border-left-color: var(--primary-color); /* Using primary color for a stronger visual cue */
}

/* Ensure the SVG icon inherits the text color of the alert */
.alert svg {
    color: inherit;
}


/* ------------------------------------------- */
/* --- Subscription Tier Selection (EXISTING CODE UNMODIFIED) --- */
/* ------------------------------------------- */

.tier-selection {
    border: none;
    padding: 0;
    margin: 1.5rem 0;
}

.tier-selection legend {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding: 0;
}

.tier-selection {
    border: none;
    padding: 0;
    margin: 1.5rem 0;
}

.tier-selection legend {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding: 0;
}

.tier-options-grid {
    display: grid;
    gap: 1.5rem;
    /* Use 'stretch' to ensure all grid items (the cards) are the same height */
    align-items: stretch;
    
    /* Default: Responsive columns, minimum 280px wide */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    /* NEW: Center the grid container and limit its max-width for better grouping (e.g., up to three tiers) */
    max-width: 1000px;
    margin: 0 auto;
}

/* Force 3 columns on large screens to prevent 3 cards from spreading too far */
@media (min-width: 1000px) {
    .tier-options-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tier-option {
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack children vertically */
    cursor: pointer;
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: all 0.2s ease-in-out;
    position: relative;
    height: 100%; /* Important: ensures the card fills the grid cell height */
}

/* Hide default radio input, but keep its functionality */
.tier-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Hover effect */
.tier-option:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15); /* Light blue shadow */
    transform: translateY(-2px);
}

/* The .tier-details div now takes up all available vertical space */
.tier-details {
    transition: all 0.2s ease-in-out;
    flex-grow: 1; /* Allows the content area to expand and equalize height */
    display: flex;
    flex-direction: column;
}

/* Checked state: Active left border and padding shift */
.tier-option input[type="radio"]:checked + .tier-details {
    border-left: 5px solid var(--primary-color);
    padding-left: 1rem;
}

/* Checked state: Show checkmark */
.tier-option input[type="radio"]:checked ~ .checkmark {
    opacity: 1;
}

.tier-details strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 0.25rem;
}

.tier-details .price {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 0.5rem;
}

.tier-details .description {
    font-size: 0.9rem;
    color: #6b7280; /* Gray 500 */
    /* Push description to the bottom if needed, ensuring alignment */
    margin-top: auto;
}

/* Checkmark indicator for checked state */
.checkmark {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.2s;
    color: var(--primary-color);
}

/* ------------------------------------------- */
/* --- NEW: Cart Styling --- */
/* ------------------------------------------- */

.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    background-color: var(--card-bg);
    border-radius: 0.75rem;
    overflow: hidden; /* Ensures rounded corners apply to content */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.cart-table th, .cart-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.cart-table th {
    background-color: #f3f4f6; /* Gray 100 */
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.cart-table tr:last-child td {
    border-bottom: none;
}

.cart-table a {
    color: #ef4444; /* Red 500 */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.cart-table a:hover {
    color: #b91c1c; /* Red 700 */
    text-decoration: underline;
}

.cart-summary {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.checkout-btn {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 700;
    cursor: pointer;
    background-color: var(--secondary-color);
    color: white;
    font-size: 1.1rem;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.checkout-btn:hover {
    background-color: #d97706; /* Amber 700 */
    box-shadow: 0 6px 15px rgba(245, 158, 11, 0.3);
}

.empty-cart-message {
    padding: 2rem;
    text-align: center;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    margin-top: 1.5rem;
    color: #6b7280;
}

/* --- Mobile Card List for Cart (Hidden on Desktop) --- */
.cart-list-mobile {
    display: none; /* Hide by default */
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
    gap: 1rem;
}

.cart-item-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1.25rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.item-domain {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 0.5rem;
}

.item-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.item-details strong {
    font-weight: 600;
}

/* Action link in mobile view */
.item-card-action {
    display: block;
    text-align: right;
}

/* Hide the responsive table on small screens, show the card list */
@media (max-width: 767px) {
    .cart-table {
        display: none;
    }
    .cart-list-mobile {
        display: flex;
        flex-direction: column;
    }
    .cart-summary {
        justify-content: center; /* Center button on mobile */
    }
    .checkout-btn {
        width: 100%;
    }
}

/* ------------------------------------------- */
/* --- NEW: Account Dashboard & Domain List Styling --- */
/* ------------------------------------------- */

/* Standardizing the look of the domain list table */
.domain-list-table {
    width: 100%;
    border-collapse: collapse;
}

.domain-list-table th {
    /* Most styles are set via HTML classes, but ensure consistency */
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: #6b7280; /* Gray 500 */
    text-transform: uppercase;
}

.domain-list-table td {
    padding: 1rem 1.5rem; /* Matches px-6 py-4 */
    border-bottom: 1px solid var(--border-color);
}

/* Status Badges - ensuring custom names map to color variables */
.status-active {
    background-color: var(--success-bg);
    color: var(--success-text);
}
/* Using var(--info-bg)/var(--info-text) for pending/to_cancel (blue/yellow hue) */
.status-pending {
    background-color: var(--info-bg);
    color: var(--info-text);
}
.status-canceled {
    background-color: var(--error-bg);
    color: var(--error-text);
}

/* Action Buttons Container (Table Cell) */
.action-buttons {
    display: flex;
    gap: 0.5rem; /* Small space between buttons */
    justify-content: flex-end; /* Align actions to the right of the cell */
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

/* Primary Action Button (Manage Redirects) */
.btn-action-primary {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    background-color: var(--primary-color);
    color: white;
    transition: background-color 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}

.btn-action-primary:hover {
    background-color: var(--primary-dark);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Secondary Action Links (Change Tier, Resubscribe) */
.action-link {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--primary-dark);
    background-color: #e0f2fe; /* Sky 100 - light background for contrast */
    border: 1px solid #7dd3fc; /* Sky 300 */
    transition: background-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.action-link:hover {
    background-color: #bae6fd; /* Sky 200 */
}

/* Cancel Action Link (Cancel) */
.cancel-link {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--error-text);
    background-color: var(--error-bg); /* Red 100 */
    border: 1px solid #fca5a5; /* Red 300 */
    transition: background-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.cancel-link:hover {
    background-color: #fee4e4; /* Slightly darker Red 100 */
}

/* --- Mobile View of Domain List (Card View) --- */

.domain-list-mobile-view {
    display: none; /* Hidden by default */
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.domain-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.domain-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.domain-card-header .domain-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-color);
}

.domain-card-body > div {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.95rem;
    border-bottom: 1px dashed #f3f4f6;
}

.domain-card-body > div:last-child {
    border-bottom: none;
}

.domain-card-label {
    font-weight: 500;
    color: #6b7280; /* Gray 500 */
}

.domain-card-value {
    font-weight: 600;
    color: var(--text-color);
}

.domain-card .action-buttons {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    justify-content: space-between; /* Make buttons span full width */
}

/* Mobile media query to switch layout */
@media (max-width: 767px) {
    .domain-list-table {
        display: none;
    }
    .domain-list-mobile-view {
        display: flex;
    }

    .domain-card .action-buttons a {
        /* Make action buttons take half width on mobile in the card view */
        flex: 1 1 48%;
        text-align: center;
    }


}

/* ------------------------------------------- */
/* --- NEW: Redirect Management Styling --- */
/* ------------------------------------------- */

/* Styling for the form used to create new redirects ({{ form.as_table }}) */
.form-table {
    width: 100%;
    margin-bottom: 2rem;
    border-collapse: collapse;
}

.form-table tr {
    border-bottom: 1px solid var(--border-color);
}

.form-table tr:last-child {
    border-bottom: none;
}

.form-table th {
    text-align: right;
    padding: 1rem 1.5rem 1rem 0;
    font-weight: 600;
    color: var(--text-color);
    vertical-align: top; /* Align label to the top of the row */
    width: 30%; /* Give labels some space */
}

.form-table td {
    padding: 1rem 0;
}

/* Styling for the existing redirects list table */
.redirects-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    background-color: var(--card-bg);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.redirects-table th, .redirects-table td {
    padding: 1rem 1.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.redirects-table th {
    background-color: #f3f4f6; /* Gray 100 */
    font-weight: 600;
    color: #6b7280; /* Gray 500 */
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.redirects-table tr:last-child td {
    border-bottom: none;
}

.redirects-table a {
    color: var(--primary-dark);
    text-decoration: none;
    transition: color 0.2s;
}

.redirects-table a:hover {
    text-decoration: underline;
    color: var(--primary-color);
}

/* Styling for the domain management list on the home page */
.domain-management-list {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.domain-management-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.domain-management-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.domain-info {
    display: flex;
    flex-direction: column;
}

.domain-info strong {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-color);
}

.domain-info span {
    font-size: 0.9rem;
    color: #6b7280;
}


.alert {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    /* Add a default border for consistency, the specific alert class will set the color */
    border: 1px solid var(--border-color);
    border-left-width: 4px; /* Stronger left border */
}

/* FIX: New rule to explicitly set the size and margin of the SVG icons */
.alert svg {
    color: inherit;
    /* Set icon size */
    height: 1.5rem; /* 24px, matching the old h-6 */
    width: 1.5rem; /* 24px, matching the old w-6 */
    /* Set right margin */
    margin-right: 0.75rem; /* Matching the old mr-3 (12px) */
    flex-shrink: 0; /* Prevents the icon from squishing */
}


/* The SVG icon and title should be horizontally aligned */
.alert .flex-items-center {
    display: flex;
    align-items: center;
}

.alert-error {
    background-color: var(--error-bg);
    color: var(--error-text);
    border-left-color: var(--error-text);
}

.alert-success {
    background-color: var(--success-bg);
    color: var(--success-text);
    border-left-color: var(--success-text);
}

.alert-info {
    background-color: var(--info-bg);
    color: var(--info-text);
    border-left-color: var(--primary-color); /* Using primary color for a stronger visual cue */
}

input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.form-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

/* --- UPDATED: Generic Button Styling --- */
button {
    display: inline-block; /* Ensure uniformity with anchor tags */
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s; /* Added transform */
    font-size: 1rem;
    text-align: center;

    /* Default Primary Button Appearance for generic <button> */
    background-color: var(--primary-color);
    color: white;
}

button:hover {
    background-color: var(--primary-dark);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); /* New shadow */
    transform: translateY(-1px); /* Slight lift */
}

/* --- UPDATED: Signup Button Styling (for <a> tags) --- */
.signup-btn {
    display: inline-block; /* Essential for <a> tags to act like buttons */
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none; /* Remove underline from link */
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s; /* Added transform */
    font-size: 1rem;
    text-align: center;

    background-color: var(--primary-color);
    color: white;
}

.signup-btn:hover {
    background-color: var(--primary-dark);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); /* New shadow */
    transform: translateY(-1px); /* Slight lift */
}

/* Secondary Button (No changes to logic, just location moved below primary) */
.btn-secondary {
    background-color: #e5e7eb; /* Gray 200 */
    color: var(--text-color);
    /* Reset hover effects for secondary buttons */
    box-shadow: none;
    transform: none;
}

.btn-secondary:hover {
    background-color: #d1d5db; /* Gray 300 */
    box-shadow: none;
    transform: none;
}

/* Added Danger Button for Delete Actions */
.btn-danger {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--error-text);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    background-color: var(--error-bg);
    color: var(--error-text);
    transition: background-color 0.2s;
    line-height: 1;
}

.btn-danger:hover {
    background-color: #fecaca; /* Red 200 */
}

/* --- NEW: Pricing Table Specific Styles (Added from previous step) --- */
.pricing-table {
    /* Center the table within the section */
    max-width: 900px;
    margin: 0 auto;
}

/* Overriding the default left alignment for comparison headers */
.pricing-table .tier-header {
    text-align: center;
    font-size: 1rem;
    color: var(--primary-dark);
    text-transform: none; /* Keep tier names as-is */
}

/* Ensure feature name column is left-aligned and stands out */
.pricing-table .feature-name {
    text-align: left !important;
    font-weight: 600;
    color: var(--text-color);
}

/* Style for the values in the comparison columns */
.pricing-table .feature-value {
    text-align: center;
    /* Reset padding for better checkmark alignment */
    padding: 1rem;
}

/* Styling for the small status badges (reusing your existing status styles) */
.status-active, .status-pending {
    display: inline-block;
    font-weight: 600;
    white-space: nowrap;
}

/* Styling the global CTA button container */
.checkout-actions a {
    /* Ensures the .signup-btn looks correct when placed inside this container */
    text-decoration: none;
    display: inline-block;
}

.auth-card {
    max-width: 420px; /* Limit width for focused content */
    margin: 3rem auto; /* Center card vertically and horizontally */
    padding: 2.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
}

.auth-card h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    color: var(--primary-dark);
}

input[type="text"],
input[type="password"], 
input[type="email"], 
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    /* Ensure all inputs use the same font stack */
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text-color);
    line-height: 1.5;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.form-field-group {
    margin-bottom: 1.25rem;
}

.form-field-group label {
    display: block; /* Make label appear above the input field */
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.form-error-text {
    display: block;
    color: var(--error-text);
    font-size: 0.9em;
    margin-top: 0.25rem;
}

.form-non-field-error {
    color: var(--error-text);
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    background-color: var(--error-bg);
    border-radius: 0.375rem;
    border: 1px solid #fca5a5;
    font-weight: 500;
    text-align: center;
}

.auth-secondary-action {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.auth-secondary-action p {
    margin-bottom: 0.75rem;
    color: #6b7280; /* Gray 500 */
}

.auth-secondary-action .signup-btn {
    /* Ensure the secondary button fills the width of the card */
    width: 100%;
    display: block;
    box-sizing: border-box; /* Includes padding/border in the width */
}

.requirement-notice {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    border-left: 5px solid var(--primary-color);
}

.requirement-list {
    margin-top: 0.75rem;
    padding-left: 2.5rem;
    font-size: 0.95rem;
}

.requirement-list li {
    margin-bottom: 0.25rem;
}

.form-help {
    display: block;
    margin-top: 0.5rem;
    color: #6b7280;
    font-size: 0.85rem;
}

.agreement-box {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 1.25rem;
    background-color: #fffbeb; /* Light Amber */
    border: 1px solid #fcd34d;
    border-radius: 0.5rem;
}

.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.checkbox-container input {
    margin-top: 0.35rem;
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
}

.checkbox-text {
    font-size: 0.95rem;
    color: var(--text-color);
    line-height: 1.4;
}

/* Adjust domain input group spacing */
.domain-input-group {
    max-width: 600px;
    margin: 0 auto 2rem auto;
}

.domain-input-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.dns-step {
    margin-bottom: 3rem;
}

/* Enhancing the cart-table for technical data */
.dns-technical-table code {
    background-color: #f3f4f6; /* Gray 100 */
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-family: monospace;
    font-weight: 600;
    color: var(--primary-dark);
}

.text-primary-dark {
    color: var(--primary-dark);
}

/* Ensure the hr has some visibility */
.my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border: 0;
    border-top: 1px solid var(--border-color);
}