/*----- GLOBAL RESET -----*/
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}


:root {
  --color1: black; /* Dark grey */
  --color2: #000; /* Black */
  --color3: #fff;   /* it gives rgb(254,243,224) -1,-12,-33 */
  /* --color3: rgb(231,237,248); grey*/
  /* --color3: rgb(227,234,247); grey*/
  /* --color3: rgb(201,207,234);  Light blue/grey
 --color3: rgb(146,132,225); 
rgb(231,237,248);  the exact same color light blue waveloc */
}

/*----- OUTER 5-ROW GRID (Body remains the grid container for rows) -----*/

*{
	 background:rgb(238,243,252) !important;
	 /* background:rgb(235,240,249) !important; */

	 /* background:rgb(231,237,248) !important; */
}

input{
	 background:black !important;
}

img{
	 background:none !important;
}



body {
  /* view-port-filling canvas */
  width: 100vw;
  min-height: 100vh; /* Use min-height instead of height to allow content taller than viewport */
  /* background:var(--color3); */
  /* background:white !important; */
  /* rgb(231,237,248); */

  /* five rows: Allow rows to size based on content (auto) */
  /* The sections will now stack based on their actual height */
  grid-template-rows: auto auto auto auto auto; /* CHANGED FROM fixed vh */
  display: grid;
  /* only one column for the outer grid */
  /* grid-template-columns: 100%; */
 /*  overflow-y: auto; Add scrolling if content overflows vertically */

}

/*----- ROW SECTIONS (Each section is a grid item of body, and a grid container for its content-wrapper) -----*/
section {
  display: grid; /* Make section a grid container to hold the content wrapper */
  grid-template-columns: 100%; /* Section has one column spanning its full width */
  height: auto; /* ADDED: Ensure section height is determined by its content */
}

/*----- RESPONSIVE CONTENT WRAPPER (Applied inside each section) -----*/
.content-wrapper {
  max-width: 1200px; /* Or your desired maximum content width */
  margin: 0 auto;    /* Centers the wrapper horizontally and creates the fluid gutters */
  padding: 0 20px;   /* Optional: Adds horizontal padding inside the wrapper */
  width: 100%;       /* Ensure the wrapper takes up available horizontal space */
  height: 100%;      /* Ensure the wrapper fills the height of the section by default */

  /* Default flex properties for centering content (can be overridden by specific rows) */
  display: flex;
  align-items: center; /* Center content items vertically */
  justify-content: center; /* Center content items horizontally */
  flex-wrap: wrap; /* Allow content to wrap if needed */
  gap: 10px; /* Default gap between flex items inside wrapper */

  color: #fff; /* Default color for text */
  font-family: 'Lato', sans-serif; /* Applying base font */
  font-size: 1rem;
  line-height: 1.5;
  text-align: center; /* Center text within flex item */
}


.row1, .row2{
  /* These styles don't conflict with the fix, can be kept */
  align-items: center;
}

/* Override flex for row 1 to make it a grid (Desktop > 1200px) */
.row1 > .content-wrapper.features { /* Added .features class selector for clarity */
  display: grid; /* Override flex and make this wrapper a grid container */
  grid-template-columns: repeat(13, 1fr); /* 13 equal columns inside the wrapper */
  align-items: stretch; /* Grid items (the divs) fill the height of the row */
  justify-items: stretch; /* Grid items fill the width */
  gap: 5px; /* Default gap for desktop */
  padding: 5px;
  height:130px; /* Keep the fixed height for the desktop layout */
  margin-top:5em;
}

@media (min-width:1201px){ 
  .dropdown_sims{
    display: none !important;
  }
}




/* --- START NEW MEDIA QUERY FOR LAYOUT CHANGE (< 1200px) --- */
@media (max-width: 1200px) {
  .dropdown_sims{
    display: none !important;
  }

    .row1 > .content-wrapper{
      max-width:600px !important;
      /* #router-output{
        margin-top:10em !important;  on mobile everything is cluttered
      } */
    }


    /* Reconfigure the grid for screens up to 1200px */
    .row1 > .content-wrapper.features { /* Targeting the same wrapper */
        display: grid; /* Ensure it's a grid */
        /* Define 16 columns for easier centering of 7 items (7*2=14, leaves 2 columns for ends) */
        grid-template-columns: repeat(16, 1fr); 
        grid-template-rows: auto auto; /* Two rows */
        /* gap: 10px; REMOVED - replaced by column-gap and row-gap */
        column-gap: 0px; /* ADDED: Horizontal gap between grid items (like SIMs) */
        row-gap: 20px; /* Vertical gap between rows (icons and SIMs) */
        padding: 10px; /* Adjust padding for smaller screens */
        height: auto; /* Allow height to adjust to content */
        align-items: center; /* Center items vertically in their cells */
        justify-items: center; /* Center items horizontally in their cells */
        align-content: center; /* Centers grid tracks within the container */
        justify-content: center; /* Centers grid tracks within the container */
     

    }

    /* Ensure the .option div fills its grid cell */
    .row1 > .content-wrapper.features > div > .option {
         width: 100%; /* Make the option fill the width of its grid cell */
         height: 100%; /* Make the option fill the height of its grid cell */
         flex-shrink: 0;
         flex-grow: 1;
         /* Ensure internal flex properties (direction, center, etc.) are still applied if needed */
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
    }

     /* Ensure images inside options scale down */
 .option img {
        max-width: 100%; 
        height: auto; 
        /* object-fit: contain;  */
    } 


    /* Hide the empty divs (3rd and 6th child) */
    .row1 > .content-wrapper.features > div:nth-child(3),
    .row1 > .content-wrapper.features > div:nth-child(6) {
        display: none;
    }

    /* Place Icons (1st, 2nd, 4th, 5th child) in Row 1 */
    /* Span 4 columns each in the 16-column grid to fill the width */
    .row1 > .content-wrapper.features > div:nth-child(1) { grid-row: 1; grid-column: 1 / span 4; } /* spans columns 1-4 */
    .row1 > .content-wrapper.features > div:nth-child(2) { grid-row: 1; grid-column: 5 / span 4; } /* spans columns 5-8 */
    .row1 > .content-wrapper.features > div:nth-child(4) { grid-row: 1; grid-column: 9 / span 4; } /* spans columns 9-12 */
    .row1 > .content-wrapper.features > div:nth-child(5) { grid-row: 1; grid-column: 13 / span 4; } /* spans columns 13-16 */


    /* Place SIMs (7th through 13th child) in Row 2 */
    /* Span 2 columns each, starting at column line 2 to center the group of 7 */
    .row1 > .content-wrapper.features > div:nth-child(7) { grid-row: 2; grid-column: 2 / span 2; } /* spans lines 2-4 */
    .row1 > .content-wrapper.features > div:nth-child(8) { grid-row: 2; grid-column: 4 / span 2; } /* spans lines 4-6 */
    .row1 > .content-wrapper.features > div:nth-child(9) { grid-row: 2; grid-column: 6 / span 2; } /* spans lines 6-8 */
    .row1 > .content-wrapper.features > div:nth-child(10) { grid-row: 2; grid-column: 8 / span 2; } /* spans lines 8-10 */
    .row1 > .content-wrapper.features > div:nth-child(11) { grid-row: 2; grid-column: 10 / span 2; } /* spans lines 10-12 */
    .row1 > .content-wrapper.features > div:nth-child(12) { grid-row: 2; grid-column: 12 / span 2; } /* spans lines 12-14 */
    .row1 > .content-wrapper.features > div:nth-child(13) { grid-row: 2; grid-column: 14 / span 2; } /* spans lines 14-16 */
    /* This leaves grid columns 1 and 16 empty, providing 1 column of space on each side */
}
/* --- END NEW MEDIA QUERY --- */


/* === Specific styles for ROW 2 (visual) - Router Images (class row3) === */
.row2 > .content-wrapper {
    display: flex; /* Ensure it's a flex container */
    justify-content: center; /* Center images horizontally */
    align-items: center; /* Center images vertically */
    gap: 20px; /* Increase gap between multiple router images */
    min-height: 0; /* Allow flex container to shrink */
    overflow: hidden;
    height: 250px; /* Keep max height reasonable */
}

.row2 img{
   padding:2em;
}

/* Style for the placeholder text in ROW 2 (visual) BEFORE images are loaded */
.row2 > .content-wrapper p {
    margin: 0;
    font-family: 'Lato', sans-serif; /* Re-apply Lato */
    font-size: 1rem;
    color: #fff;
    /* text-align: center is inherited */
}



.row3{
  margin-top:3em;
}

/* === Specific styles for ROW 3 (visual) - Selected Values Text & PRICE (class row2) === */
.row3 > .content-wrapper {
   display: flex;
   flex-direction: column; /* Stack children (paragraphs) vertically */
   justify-content: center; /* Center the column block vertically */
   align-items: center; /* Center each line/paragraph horizontally */
   /* Inherits other .content-wrapper styles like gap */
}

/* Style for the text in ROW 3 (visual) - Selected values paragraph */
#selected-values-output {
    margin: 0; /* Remove default paragraph margin */
    font-weight: normal; /* Keep default weight or set as needed */
    font-family: 'Lato', sans-serif; /* Match base font */
    font-size: 1.5rem; /* Match base size */
    color: var(--color2); /* Ensure color is white */
    /* text-align: center is inherited */
}

/* Style for the text in ROW 3 (visual) - Price paragraph */
#price-output {
    margin: 0; /* Remove default paragraph margin */
    /* Use gap on parent (.row3 > .content-wrapper) for spacing between paragraphs */
    font-family: 'Lato', sans-serif;  /* Example: Use a different font */
    font-size: 1.5rem; /* Example: Make it larger */
    font-weight: bold; /* Example: Make it bold */
    color: var(--color2); /* Example: Give it a distinct color */
    /* text-align: center is inherited */
}


/* === Specific styles for ROW 4 (visual) - Empty placeholder (class row4) === */
/* The content wrapper still maintains the border and height of this row */
.row4 > .content-wrapper {
    /* Inherits default .content-wrapper styles */
    /* No specific content styling needed as it's empty */
}


/* --- General .option styling (applied to any element with class="option") --- */
.option {
    cursor: pointer;
    border: 2px solid transparent;
    padding: 2px;
    border-radius: 8px;
    transition: border-color 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%; /* Fill parent height */
    max-height: 100%;
    flex-shrink: 1; /* Keep flex properties for items when wrapper is flex */
    flex-basis: auto; /* Keep flex properties for items when wrapper is flex */
    flex-grow: 0; /* Keep flex properties for items when wrapper is flex */
}

.option:hover,
.option.selected {
    border-color: var(--color1); /*white*/
    border-radius: 8px;
}

/* --- General image styling inside any .option element --- */
.option img {
    display: block;
    max-width: 100%; /* Ensure images fit their container */
    max-height: 100%;
    object-fit: contain;
    height: auto; /* Let height adjust to maintain aspect ratio */
    width: auto; /* Let width adjust */
}

/* Style for text content inside .option (Row 1 options) */
.option span {
    margin-top: 5px;
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    /* color: #fff; */
}

/* Adjust text styles for ROW 5 (visual) */
.row5 .content-wrapper p {
     margin: 0;
     font-family: 'Lato', sans-serif;
     font-size: 1rem;
     /* color: #fff; */
}


/******************************************************************/
/***************************  TOTAL PRICE *************************/
/******************************************************************/

.price-quantity-container {
  display: flex; /* Keep these elements in a row */
  align-items: center; /* Align them vertically */
  gap: 1em; /* Space between price, label, input, total */
  margin-top: 1em; /* Space above this container */
  flex-wrap: wrap; /* Allow wrapping on very small screens */
  justify-content: center; /* Center the group when wrapped */
}


.price-quantity-container input[type="number"]{
  margin-top: 0; /* Remove individual margin, use gap on parent */
  /* margin-left: 1em; /* Remove individual margin, use gap on parent */
  width:50px;
  text-align:center;
  padding:2px;
  border:1px solid  rgb(43,43,44) !important;
  border-radius:2px;
  background: rgb(43,43,44) !important;
  color:#fff;
  font-size:1.3rem;
  caret-color: transparent !important;
  outline:none;
}

.price-quantity-container input[type="number"]::-webkit-inner-spin-button,
.price-quantity-container input[type="number"]::-webkit-outer-spin-button{
  opacity:1;
}


.price-quantity-container input[type="number"]::-webkit-inner-spin-button,
.price-quantity-container input[type="number"]::-webkit-outer-spin-button:hover{
  cursor:pointer;
}
/* .price-quantity-container input[type="number"]::-webkit-inner-spin-button,
.price-quantity-container input[type="number"]::-webkit-outer-spin-button{

  width:1em;
  color:white !important;
} */

/* make the new line sit right under “Monthly Cost” */
/* This will now be another item in the flex container */
#total-price-output{
  margin:0; /* Remove default margin */
  /* margin-top:0.4em ; REMOVED - use gap */
  font-family:'Lato',sans-serif;
  font-size:1.5rem;
  font-weight:bold;
  color:var(--color2);
}

label{
  color:var(--color2);
}

.price-breakdown {
    margin-top: 0.5em; /* Add space above breakdown lines */
    font-size: 0.9rem;
    color: var(--color2);
}


/* ─────────  ➤ mobile row₁  (≤ 900 px)  ───────── */
/* Removed previous conflicting rules as per last revision */
@media (max-width: 900px){
    /* No specific rules needed here for row1 anymore, as the 1200px media query handles its layout */
    /* You could add refinements here if needed below 900px, but they would apply ON TOP of the 1200px rules */
}

/* Added a specific style for the price/breakdown paragraphs to ensure they take full width if container wraps */
.row3 > .content-wrapper p {
    /* Ensure text paragraphs inside row3 wrapper take full width */
    width: 100%;
    text-align: center; /* Keep them centered */
}
/* More specific targeting to be safe */
#selected-values-output,
#price-output,
#total-price-output,
.price-breakdown {
     width: 100%; /* Ensure these specific paragraphs take full width */
     text-align: center; /* Keep them centered */
}

/* Adjust price/quantity container layout for potentially wrapping content */
.price-quantity-container {
    width: 100%; /* Make sure the flex container fills the width */
    /* Existing flex properties: display: flex; align-items: center; gap: 1em; margin-top: 1em; flex-wrap: wrap; justify-content: center; */
}





@media (max-width: 600px) {
  .row1 > .content-wrapper.features { 
    margin-top:0px !important;
  }
  .row2 img{
    width:150px !important;
    padding:2px !important;
  }

  .sim{
    display: none !important;
  }

  .dropdown_sims{
    display: block !important;
    width:200px !important;
    background-color: transparent;
    color:black;
    border:2px solid #555;
    border-radius: 5px;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto; 
    padding:0.5em;
    font-size: 1.2em;
  }


    #router-quantity{
     user-select: none !important;
    }

    #router-quantity::-webkit-inner-spin-button,
    #router-quantity::-webkit-outer-spin-button {
      background-color: #555 !important;
      -webkit-appearance: inner-spin-button;
      color: white !important; /* optional, for contrast */
    }
}