/*
 * PitchPal Custom Stylesheet (v2.0 - Refined & Lightened)
 */

/* 1. Brand Color Palette & Global Typography
-------------------------------------------------- */
:root {
  --pp-red: #C8003A;
  --pp-dark: #222222;
  --pp-gray: #5F5F5F;
  --pp-light: #F5F5F7;
  --pp-white: #fff;
  --pp-red-light: #fdf; /* A very light, warm, pinkish hue */
}

/* Base typography - Lighter weights for an airy feel */
body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  color: var(--pp-dark);
  background-color: var(--pp-white) ;
  font-weight: 300; /* CRITICAL: Use lighter default font weight */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500; /* Lighter headings */
    color: var(--pp-dark);
}

/* Custom display classes for hero sections */
.display-4, .display-5, .display-6 {
    font-weight: 600; /* Bolder, but not overly heavy */
}

/* Lead paragraph styling */
.lead {
    font-size: 1.15rem;
    font-weight: 300; /* Lighter lead text */
    color: var(--pp-gray);
}

/* Custom background and text utility classes */
.bg-pp-light {
    background-color: var(--pp-light);
}
.bg-pp-gray {
    background-color: var(--pp-gray);
}
.bg-pp-white {
    background-color: var(--pp-white);
}


.text-pp-dark {
    color: var(--pp-dark);
}
.text-pp-gray {
    color: var(--pp-gray);
}
.text-pp-red {
    color: var(--pp-red);
}


/* 2. Bootstrap Component Overrides (Refined)
-------------------------------------------------- */

/* Buttons - Reduced font weight, adjusted padding */
.btn {
    font-weight: 400; /* Was fw-bold */
    padding: 0.5rem 0.5rem;
    border-radius: 0.4rem;
}
.btn-lg {
    padding: 0.7rem 1rem;
    font-size: 1rem;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--pp-red);
  --bs-btn-border-color: var(--pp-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b00033;
  --bs-btn-hover-border-color: #a50030;
}

.btn-outline-danger {
    --bs-btn-color: var(--pp-red);
    --bs-btn-border-color: var(--pp-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--pp-red);
    --bs-btn-hover-border-color: var(--pp-red);
}
.btn-outline-secondary {
    --bs-btn-color: var(--pp-gray);
    --bs-btn-border-color: #ced4da;
    --bs-btn-hover-color: var(--pp-dark);
    --bs-btn-hover-bg: #e9ecef;
    --bs-btn-hover-border-color: #ced4da;
}

/* Cards - Subtler border and shadow */
.card {
    border: 1px solid #EAEAEA;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Main Navigation - Adjusted active state for pills */
.navbar-nav .nav-link {
    color: var(--pp-gray);
}
.navbar-nav .nav-link.active, .navbar-nav .show > .nav-link {
    background-color: var(--pp-red);
    color: white !important;
    border-radius: 0.375rem;
}

/* Pill Toggles (for Pricing Section) */
.nav-pills .nav-link {
    color: var(--pp-gray);
    background-color: #E9ECEF;
    padding: 0.6rem 1.5rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--pp-red);
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* css/custom.css */

/* ... (keep all your existing styles above this) ... */


/* 10. Custom Form Control Focus Style
-------------------------------------------------- */
/*
 * This rule overrides Bootstrap's default blue focus ring on form inputs,
 * textareas, and select elements, replacing it with a soft red glow that
 * matches our brand's color palette.
*/
.form-control:focus {
  border-color: #f0809d; /* A lighter shade of our brand red for the border */
  box-shadow: 0 0 0 0.25rem rgba(200, 0, 58, 0.25); /* The soft red 'glow' */
}

.waitlist{
    max-width: 30rem;
}


/* 3. Pricing Section Logic
-------------------------------------------------- */
.price-toggle .price-annual,
.price-toggle.annual .price-monthly {
  display: none;
}
.price-toggle .price-monthly,
.price-toggle.annual .price-annual {
  display: inline;
}


/* 4. Footer Styles (Refined)
-------------------------------------------------- */
.footer-link {
    color: var(--pp-gray);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
.footer-link:hover {
    color: var(--pp-dark);
    text-decoration: underline;
}

.footer-social-icon {
    color: var(--pp-gray);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
.footer-social-icon:hover {
    color: var(--pp-dark);
}

footer hr {
    color: #DDE2E8;
}


/* 5. Dashboard-specific Styles
-------------------------------------------------- */
.dashboard-nav .nav-link {
    color: var(--pp-gray);
    font-weight: 500;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dashboard-nav .nav-link .bi {
    margin-right: 0.75rem;
    font-size: 1.2rem;
    width: 20px; /* Aligns text neatly */
}

.dashboard-nav .nav-link:hover {
    background-color: #e9ecef;
    color: var(--pp-dark);
}

.dashboard-nav .nav-link.active {
    background-color: var(--pp-light);
    color: var(--pp-red);
    border-right: 3px solid var(--pp-red);
}


/* 6. Dashboard Off-canvas Mobile Menu
-------------------------------------------------- */
.offcanvas .dashboard-nav .nav-link {
    font-size: 1.1rem; /* Slightly larger for mobile tap targets */
    padding: 0.8rem 1rem;
    border-right: none; /* No active border needed in offcanvas */
}


/* 7. Global Link Styling
-------------------------------------------------- */

/* 
 * Style all <a> tags, but EXCLUDE any that are styled as buttons,
 * navbar links, footer links, or the main brand logo.
*/
a:not(.btn):not(.nav-link):not(.footer-link):not(.navbar-brand):not(.footer-social-icon) {
    color: var(--pp-red);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.2s ease-in-out;
}

/* 
 * Define the hover effect for these same links.
 * We'll use a slightly darker version of our brand red.
*/

a:not(.btn):not(.nav-link):not(.footer-link):not(.navbar-brand):not(.footer-social-icon):hover {
    color: #b00033; 
}


/* 8. Sticky Header Scroll Fix
-------------------------------------------------- */
/*
 * This tells the browser to leave a 70px gap at the top after any
 * scroll jump, preventing the sticky header from covering section titles.
 * We also add smooth scrolling for a nicer user experience.
*/
html {
    scroll-padding-top: 70px; /* Adjust this value to match your header's height */
    scroll-behavior: smooth;
}

/* --- Container ------------------------------------------------------------------ */

.outer_space{
    display: flex;
    align-items: center;
    justify-content: center;
}


/* --- Auth ------------------------------------------------------------------ */

.auth{
    max-width: 500px;
    padding: 20px;
    /* margin-top: 4rem; */
}

.auth_space{
    min-height: 80vh;
}

.login_menu{
    display: flex;
    flex-direction: column;
    gap: 3rem;
    /* margin-top: 4rem; */
    margin-bottom: 8rem;
}


.login_google a, .login_email a{
    width: 100%;
    padding: 0.7rem 0;
    font-size: larger;
    font-weight: 500;
    text-decoration: none;

    -moz-border-radius:13px;
    -webkit-border-radius:13px;
    border-radius:13px;
    text-shadow: 1px 1px 1px #111111;  
}

.auth h1 {
    margin-bottom: 2.5rem;
}


/* --- Errors ------------------------------------------------------------------ */

.errors_space{
    min-height: 100vh;
}

.errors_container{
    max-width: 500px;
    padding: 20px;
    text-align: center;
}

/* Terms */
.terms_container, .privacy_container{
    margin-top: 7rem;
    margin-bottom: 4rem;
}

/* On boarding */

.img-card {
    border: 1px solid #EAEAEA;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    max-width: 10rem;
    height: auto;
}

.onboarding_form {
    width: 40rem; /* Set a fixed width */
    max-width: 95%;
    
    /* Optional: Add some padding and height for better appearance */
    padding: 8px;
}


.onboarding_form .form-control, .onboarding_form .invalid-feedback {
    margin-bottom: 1rem;
}

.form-select {
  margin-bottom: 1.3rem !important;
}

.onboarding_form .invalid-feedback{
    display: block;
}

.conditional-group {
    display: none;
    margin-top: 1em;
}

    /* 
     Use the general sibling combinator (~) to show the correct div
     when the corresponding radio button is checked.
    */
    input[id="company"]:checked ~ .company-group,
    input[id="product"]:checked ~ .product-group {
        display: block;
    }

    /* Optional: Just for basic styling of the form fields */
    form p {
        margin-top: 1em;
    }
    form label {
        font-weight: bold;
    }

    .onb_at_a_glance{
        max-width: 45%;
        margin-bottom: 2rem;
    }

    .onb_at_a_glance .on_status{
        margin-bottom: 1.25rem;
    }

    .details-list .list-group-item {
            display: flex;
            align-items: center;
            border: none;
            padding: 0.3rem 0;
        }
    
    .details-list .bi {
            font-size: 1.25rem;
            margin-right: 1rem;
            width: 24px; /* Aligns text neatly */
            color: #6c757d;
        }
    
    .details-label {
            font-weight: 500;
            color: #495057;
        }
    
    .revenue-stat {
            font-weight: 500;
            font-size: 1rem;
            color: #212529;
        }
    
    .badge {
            font-size: 0.9rem;
            font-weight: 500;
        }

/* Directories */

/* when checked, swap the default blue for red */
  .form-check-input:checked {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
  }
  /* match the focus ring to danger tone */
  .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), .25);
  }

  /* Blog */

  .blog_page{
    min-height: 100vh;
  }

  /* FAQ - accordion */

  /* css/custom.css */

/* ... (keep all your existing styles above this) ... */


/* 9. FAQ Accordion Customization
-------------------------------------------------- */

/* Now, we override the default Bootstrap accordion styles */
.accordion {
    /* Set the warm background for the OPEN accordion button */
    --bs-accordion-active-bg: var(--pp-red-light);

    /* Set the text and arrow icon color to our main red when OPEN */
    --bs-accordion-active-color: var(--pp-red);

    /* Set the focus outline ring to a semi-transparent version of our main red */
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(200, 0, 58, 0.15);

    /* Optional: Remove the default border for a cleaner look */
    --bs-accordion-border-width: 0;
}

/* Style the individual accordion items */
.accordion-item {
    margin-bottom: 0.5rem;
    border: 1px solid #e9ecef;
    border-radius: .375rem !important; /* Use !important to override Bootstrap's specific radius rules */
}

/* Make the question text slightly bolder */
.accordion-button {
    font-weight: 500;
}


  /* --- Medias ------------------------------------------------------------------ */

  @media (max-width: 992px) {
    .onb_at_a_glance{
        max-width: 100%;
    }
  }