/* --- Base and Utility Classes --- */
html {
     font-size: 14px;
}

@media (min-width: 768px) {
     html {
          font-size: 16px;
        
    }
}

.form-section h3 {
    /* Typography */
    font-size: 1.5em;
    font-weight: 600; /* Semi-bold */
    color: #003c6b;
    text-align: center; /* Centers the text horizontally */
    /* Separation */
    padding-bottom: 10px;
    margin-bottom: 20px; /* Space below the title */
    /* Subtle Separator Line (Optional, but very Apple-like) */
    border-bottom: 1px solid #f0f0f0;
}

.primary-btn {
     
    /* Core Button Styling (No changes needed here for layout) */
      display: inline-block;
      padding: 10px 24px;
      border: none;
      border-radius: 9999px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      text-decoration: none;
      transition: all 0.2s ease-in-out;
      -webkit-appearance: none;
      -moz-appearance: none;
      color: #ffffff;
      background: linear-gradient(145deg, #003c6b, #245385);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

    .primary-btn:hover {
          background: linear-gradient(145deg, #2c2c2e, #1d1d1f);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
          transform: translateY(-1px);
    }

    .primary-btn:active {
          background: linear-gradient(145deg, #0d0d0f, #1c1c1e);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
          transform: translateY(1px);
    }

.modern-input {
    /*  FIX: Reset Flex properties to the modern 'flex: 1' shorthand */
    flex: 1 1 0%; /* Allow growth, allow shrink, basis of 0 */
    min-width: 0; /* CRITICAL FIX for Safari overflow/sizing issues in Flex containers */

     
    /* Core Input Styling */
      display: block;
      width: 250px; /* This is largely ignored due to flex: 1, but acts as a fallback */
      padding: 10px 18px;
      border: 1px solid #d0d0d0;
      border-radius: 9999px;
      font-size: 16px;
      color: #1c1c1e;
      background-color: #f5f5f5;
      transition: all 0.2s ease-in-out;
      -webkit-appearance: none; /* Keep appearance resets */
      -moz-appearance: none;
}

    .modern-input:focus {
          outline: none;
          border-color: #007aff;
          box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);
          background-color: #ffffff;
    }

    /* Removes the ugly default spin buttons */
    .modern-input[type="number"]::-webkit-outer-spin-button,
    .modern-input[type="number"]::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0;
    }

    .modern-input[type="number"] {
          -moz-appearance: textfield;
    }


/* --- Layout Classes --- */

/*  FIX 1: Ensure Flex is clean for the Main Layout */
.summary-layout {
      display: flex;
      gap: 40px;
      align-items: flex-start;
      padding: 10px;
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    /*  Add WebKit prefix for gap fallback if necessary */
    /* If gap still fails, this container needs margin-right on the image-container */
}

/*  FIX 2: Fixed-size Flex Item (Image) */
.image-container {
      flex-shrink: 0;
      width: 350px;
      height: 350px;
    /*  Add min-width to solidify fixed size in Flex */
    max-width: 40vw;
    max-height: 40vw;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/*  FIX 3: Flex Item for Form Container (Right Side) */
.details-and-entry {
      flex: 1; /* Allows the container to take all remaining space */
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding-top: 10px;
    min-width: 0; /* Ensures content doesn't force a larger size */
}

/*  FIX 4: Label/Input Alignment Rows */
.field-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 25px;
    min-width: 0;
}


  .field-row span {
    /* Set explicit non-flexible properties */
    flex: 0 0 330px; /* Do not grow, do not shrink, set basis to 330px */
    width: 330px; 
    max-width: 30vw;
        color: #1c1c1e;
        text-align: right;
        margin-right: 20px;
        padding-left: 0;
     
}

    .field-row p {
        /* Set explicit non-flexible properties */
        color: #1c1c1e;
        text-align: left;
        margin-left: 10px;
        padding-top:10px;
        margin-top: 5px;
    }

    .inlineText span{
        /* Set explicit non-flexible properties */
        flex: 0 0 100px; /* Do not grow, do not shrink, set basis to 330px */
        width: 100px;
        max-width: 30vw;
        color: #1c1c1e;
        text-align: right;
        margin-right: 20px;
        padding-left: 0;
    }

.subtle-details {
    /* Layout: Display items side-by-side */
    display: flex;
    flex-direction: row;
    gap: 15px; /* Space between the two terms */
    /* Aesthetics and Spacing */
    font-size: 0.85em; /* Smaller than the summary-label */
    font-weight: 400;
    color: #a0a0a0; /* Very light grey/muted color */
    margin-top: -15px; /* Pull it slightly closer to the price above */
    margin-bottom: 25px; /* Maintain clean space before the Quantity input */
    letter-spacing: 0.02em;
}


/* --- Remaining Layout Classes (Minor Changes) --- */
.entryDiv {
      padding-top: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      align-content: center;
      gap: 15px;
      max-width: 90%;
    min-width: 0; /* Added */
}

.input-button-group {
      padding-top:20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      align-content: center;
      gap: 15px;
    min-width: 0; /* Added */
}
/* ... rest of your CSS for summary-label, form-section, etc., remains the same ... */

.details-and-entry .summary-label {
      font-size: 1.4em;
      font-weight: 400;
      color: #606060;
      margin-bottom: 8px;
}

    .details-and-entry .summary-label.highlight {
          font-size: 1.4em;
          font-weight: 600;
          color: #1c1c1e;
          margin-bottom: 5px;
    }

    .details-and-entry .summary-label.old {
        font-size: 1.4em;
        font-weight: 600;
        text-decoration:line-through;
        color: #FF0000;
        margin-bottom: 5px;
    }

.image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
}

.checkbox-group-container {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid #f0f0f0;
}

    .checkbox-group-container .group-label {
          width: 200px;
          flex-shrink: 0;
          font-size: 14px;
          font-weight: 500;
          color: #1c1c1e;
          margin-right: 25px;
          padding-top: 2px;
    }

.checkbox-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex-grow: 1;
}

/* ... other non-layout specific rules ... */
/* Retained all other original rules without major changes */
.form-section {
      background-color: #fcfcfc;
      border: 1px solid #e0e0e0;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 30px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure the body fills the entire viewport height */
    margin: 0; /* Clear any default body margins that interfere */
    /*margin-bottom: 60px;  Keep this if you need spacing for the footer height */
}

/* 2. Target the main content wrapper (everything between the header and footer) */
/* This is often the <main> element, or if you don't have one, we need to add a wrapper. */
.main-content-wrapper {
    flex-grow: 1; /* This is the key: makes the main content take all available vertical space */
    padding-bottom: 60px; /* Ensure content doesn't get hidden under the footer */
}

/* 3. Footer definition */
.footer {
    /* Ensure the footer has a defined, non-flexible height */
    flex-shrink: 0;
    height: 60px; /* Set the height to match the padding above */
}

.summary-label {
    padding: 10px;
}