/*
Google: To make a <button> look and behave exactly like a text link, use the following CSS:
  */

  /* background:
  The eight individual shorthand background properties are:
  background-color: Sets a solid background color.
  background-image: Sets one or more images (or gradients) for the background.
  background-position: Sets the initial position for each background image.
  background-size: Sets the size of the background image (e.g., cover, contain, or specific dimensions).
  background-repeat: Defines if/how a background image will be repeated.
  background-origin: Specifies the background positioning area (e.g., relative to the border, padding, or content box).
  background-clip: Determines whether an element's background extends underneath its border, padding, or content box
  background-attachment: Determines whether a background image is fixed or scrolls with the rest of the page.
  */
.button-notes-for-reference {
  xbackground: none;  /* short hand  for above 8 items*/
  xbackground: lightblue url("img_tree.gif") no-repeat fixed center;
  background: lightblue none no-repeat fixed center;
  border: none;
  padding: 0;
  font: inherit; /* adopts the font of surrounding text */
  xcolor: blue;
  xtext-decoration: underline;
  xcursor: pointer; /* adds the hand icon */
}

.button-notes-for-reference:hover {
  color: darkblue;
  text-decoration: none; /* optional: toggle underline on hover */
}


/* cursor stuff */
/* Using a custom image with a pointer fallback */
.custom-element {
  cursor: url('custom-hand.png'), pointer;
}





  /* debug borders */
.bx {border: none;}
.b0 {border-width:1px; border-color:black; border-style:solid;}
.b1 {border-width:1px; border-color:#808080; border-style:solid;}
.b2 {border-width:2px; border-color:blue; border-style:solid;}
.b3 {border-width:3px; border-color:green; border-style:solid;}
.b4 {border-width:4px; border-color:purple; border-style:solid;}
.b5 {border-width:2px; border-color:yellow; border-style:solid;}
.b6 {border-width:2px; border-color:orange; border-style:solid;}
.b7 {border-width:2px; border-color:darkgreen; border-style:solid;}
.b8 {border-width:2px; border-color:lightseagreen; border-style:solid;}

/* all fbox-container defaults */
.fbox-container {

}
/* fbox-container the outer most container only one of these */
.fbox-container-outer {
    border-width:2px; border-color:green; border-style:solid;
    padding: 15px;
  xbackground-color: lightgreen;
  background-color: #fafafa;
  border: 1px solid #ccc;
  border-radius: 4px;
  /* consider a shadow from google */
  /* X-offset, Y-offset, Blur-radius, Spread-radius, Color */
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* another version */
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.05), /* Small, sharp directional shadow */
    0 20px 25px -5px rgba(0, 0, 0, 0.1); /* Large, soft ambient light shadow */
  /* soft border from google */
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* fbox-container (optional) inner cointainers can be more than 1? */
.fbox-container-inner {

}



.fbox-container-outer fieldset {
  border: 1px solid #ccc;
  border-radius: 4px;
  xfont-size: 1.2rem;
  background-color: white;

}

/* a list of fbox buttons, typically filled in by javascript, can be multiple lists in a single container */
.fbox-button-list {
  xbackground-color: red;
  padding: 10px 20px;
}

/*from google for grid box */

/* flex box styling * -- separate from filter-box styling */

.fbox {
  display: grid;

  gap: 10px; /* Space between items within the grid */  /* scott belongs with my filter stuff */

  xgrid-template-rows: repeat(3, 30px);  /* 3 rows */
  xgrid-template-rows: repeat(3, 1fr);  /* 3 rows */  /* scott can also do this */
  xgrid-template-rows: repeat(3, 1.5rem);  /* 3 rows */  /* scott can also do this */
}

/* scott testing, maybe there is a better way to do this?? */
.fbox-col1 {grid-template-columns: repeat(1, 1fr);}
.fbox-col2 {grid-template-columns: repeat(2, 1fr);}
.fbox-col3 {grid-template-columns: repeat(3, 1fr);}
.fbox-col4 {grid-template-columns: repeat(4, 1fr);}
.fbox-col5 {grid-template-columns: repeat(5, 1fr);}
.fbox-col6 {grid-template-columns: repeat(6, 1fr);}
.fbox-col7 {grid-template-columns: repeat(7, 1fr);}
.fbox-col8 {grid-template-columns: repeat(8, 1fr);}
.fbox-col9 {grid-template-columns: repeat(9, 1fr);}
.fbox-col10 {grid-template-columns: repeat(10, 1fr);}
.fbox-col11 {grid-template-columns: repeat(11, 1fr);}
.fbox-col12 {grid-template-columns: repeat(12, 1fr);}

.fbox-halves { display: grid; grid-template-columns: 1fr 1fr; }  /* like col2 */

/* another way to override columns */
.fbox.myclass {grid-template-columns: repeat(2, 1fr);}

.fbox-parent {
  display: flex;
  width: 100%; /* Ensures the parent takes up full width of its container */
}

.fbox-child {
  flex: 1;
  xdisplay: flex;
  xalign-items: center;
  xjustify-content: center;
}



/* scott, MY-FILTER styling */



/* I dont really need fbox-btn class, as it can be button.fbox ?? */
/* scott, all child boxes inside fbox need this right, not just buttons */



/* fixme, temp, this is a container to hold multiple fbox, like dates */
/* Align grids side-by-side */
.flex-wrapper2 {
  display: flex;
  gap: 20px; /* Space between the two grids */
  padding: 20px;  /* scott */
}

/* Define the 4x3 grid layout */
.fbox2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns */
  /* NOTE: gap is shorthand for gap-column and gap-row */
  /* it was created so can have equal spacing without complicated margins and double space in the gaps */
  gap: 10px; /* Space between items within the grid */
  /* NOTE: gap is only between items, not the edge, need to use padding for the edge */
  /* Padding shorthand:
        padding: [all-sides];  single value, applies to all sides
        padding: [top & bottom] [left & right];   -- 2 values
        padding: [top] [left & right] [bottom];   -- 3 values
        padding: [top] [right] [bottom] [left];   -- 4 values, tip its clockwise */
        /* A common mnemonic to remember the 4-value order is TRBL (pronounced "trouble"),
        which stands for Top, Right, Bottom, Left.
        You can also visualize an analog clock: starting at 12 o'clock (top) and moving clockwise. */
  padding: 10px;
  border: 1px solid #ccc;
}

/* Basic item styling for all buttons, assumes active? */
/* 1. Base Styles (Inactive & Enabled) */
.deal-button,  /* temp make all buttons work this way, scott fixme, didnt work */
.fbox-btn {
  /* carnival uses a blue on white with blue border with rounded corners */
  background-color: white;
  xcolor: #007bff;
  color: #0066f5;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  /* scott, fixme, this is still broke */
  /* button tag css at top of file is somehow messing up it working like a link */
  border-radius: 4px; /* scott */
  border: 1px solid blue;
  padding: 10px;  /* scott */
  text-decoration: none; /* scott might not be needed */
  cursor: pointer;
}

/* 2. Active State (Independent of disabled status) */
/* carnival uses a blue background with gradientand white font possibly bold and no border as far as I can tell */
.fbox-btn[aria-pressed="true"] {
  xbackground-color: #007bff;
  background-image: linear-gradient(270deg, #0066f5, #105591);
  color: #ffffff;
}

/* 3. Disabled States (Overrides styles if the button is locked) */
/* carnival uses a black on light gray, with NO border around the button */
.fbox-btn[aria-pressed="true"]:disabled,
.fbox-btn:disabled {
  background-color: #eee;
  color: #666;
  border: 1px solid #ccc;  /* soft border */
  background-image: none;
  cursor: default;
}

/* 4. Optional: Specific style for an Active but Disabled button */
/* this occurs when a user has selected the filter, but later the DB changes behind the sceenes and becomes disabled */
/* when the DB changes again, it can get toggled back to enabled and keeps its active state */
/* carnival shows this exactly like the disabled above */
.fbox-btn[aria-pressed="true"]:disabled {
  xackground-color: #66b0ff; /* Lighter/washed-out active color */
  xcolor: #678db3;
}

/* scott testing */
/* this is one method to style a button based on ID without a class */
.fbox-btn[data-id="SXM"] {
  background-color: red;
}
.fbox-btn[data-id="122"] { /* virgin voyages */
  xbackground-color: red;  /* this worked */
}

.pill-btn {
  border-radius: 9999px;  /* makes button completely round on ends */
  /* this is picking up a 2px or more border from where??  user-agent style sheet */
  border: 1px solid blue;
  color: blue;
  background-color: white;
  padding: 2px 8px;
}
/* I like the hover action on a pill button, but no hover action on the filter buttons */
.pill-btn:hover {
  background-color: red;
  cursor: pointer;
}
/* fixme, also need inactive/active, if everything is reset, it should be grayed out */



/* Ensure the legend stretches across the fieldset */
.split-legend {
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px; /* Optional: adds spacing between text and the fieldset border lines */
}

/* Style for the text blocks if needed */
.left-text {
  font-weight: bold;
}

.right-text {
  color: #666;
  font-size: 0.9em;
}

/* 2nd try */

/* Style the fieldset box */
.split-fieldset {
  border: 2px solid #333;
  border-radius: 8px;
  padding: 20px;
  max-width: 400px;
}

/* Make the legend stretch across the full width */
.split-legend {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0; /* Removes default browser padding */
}

/* Style the text spans */
.legend-left,
.legend-right {
  font-weight: bold;
  background-color: #fff; /* Matches background to cover the fieldset line */
  padding: 0 10px; /* Creates spacing around the text */
}

/* Optional: Offset the left side to align with the border corner */
.legend-left {
  margin-left: 10px;
}

/* Optional: Offset the right side to align with the border corner */
.legend-right {
  margin-right: 10px;
}

/* 3rd try */
    fieldset {
      border: 1px solid #333;
      border-radius: 8px;
      xborder-style: groove;
      background-color: #f8f8f8;
      padding: 20px;
      margin: 20px;
    }

    legend {
      /* Revert standard browser legend styling */
      float: none;
      padding: 0;

      /* Establish the split layout */
      display: flex;
      justify-content: space-between;
      align-items: center;

      /* Set to 100% width of the fieldset border */
      width: 100%;
    }

    .legend-left,
    .legend-right {
      xbackground-color: #fff; /* Matches parent background to mask fieldset border */ /* scott just use inherit */
      background-color: lightgray; /* Matches parent background to mask fieldset border */
      xbackground-color: inherit;
      padding: 0 10px;
    }

    /* scott, this helps IF the background color of the left/right spans is not same as parent */
    /* also helps to just a little space between border and words */
    .legend-left {margin-right: 10px;}  /* scott */
    .legend-right {margin-left: 10px;}

    /* Optional: style the divider line between them */
    /* scott, this is what draws the line between the two words */
    /* scott, this is why it MUST match the fieldset border size and color */
    .legend-divider {
      flex-grow: 1;
      /* scott, fixme, 1px does not seem exactly like the fieldset border?? */
      /* scott, when both are 2px they seem similar, but when both are 1px, this line is thicker?? why */
      /* scott, 0.5px seems to work better */
      height: 0.5px;   /* must match the fieldset border thickness */
      /* scott, background color has no impact if field is empty and no height specified */
      background-color: #333; /* Matches the fieldset border color */
    }


fieldset legend {
  width: auto;     /* Shrinks the legend box to only fit the actual text */
  float: none;     /* Overrides framework overrides that stretch the element */
  padding: 0 10px; /* Optional: adds a nice clean gap between the text and the line */
  xmargin: 20px; /* this just pushes the title text to the right, but does not add any gap before after the title block */
  background-color: #e0e0e0;
  border: 1px solid black;
}





/* scott starting all over with new classes */

.filter-modal {
  /* fuck it, damn flex boxes, wont grow the box, so I'll just force it */
  width: 90%;  /* without this, it wants to somehow auto size it too small */

  display: flex;         /* Ensure the outer wrapper is a flex container */
  xwidth: max-content;    /* Forces container to stretch to fit the widest layout */ /* seems to override my 90% width */

}


/* outer div with multiple rows (filters, sort, etc) */
.modal-buttons {
  border-width:1px; border-color:#808080; border-style:solid; /* debug */
  border-radius: 6px;

  display: flex;  /* scott if do this, all buttons on same line, filters, sort and options */
  flex-direction: column; /* stacks children vertically */
  xflex-wrap: wrap;
  xgap: 10px; /* Space between the rows */
  padding: 5px;  /* scott */
  xheight: 12rem; /* must have a height so can make them equal height rows if set too small will overlap next section */
  xwidth: fit-content;  /* this makes each row same width using the largest of the rows */

  flex: 1 1 auto;        /* Grow and shrink equally, basing size on content */
  white-space: nowrap;   /* Keeps text on one line */
  width: 100%;

}

/* one row, either filters, options, ...  They all have a left column (title) and then equal columns after that */
.modal-row {
  /* border-width:1px; border-color:#808080; border-style:solid;  */ /* debug */
  display: flex;
  /* scott these are not doing what I want */
  align-items: center;     /* Aligns text content vertically within the row */
  justify-content: center; /* Optional: Aligns text content horizontally */
  gap: 15px;
  padding: 10px;  /* top bottom */
  height: 5rem;
  xwidth: fit-content;  /* this works if want each row to be a different size */
}

/* this is the left column which is fixed width for each row */
.modal-btn-title {
    font-weight: bold;
    color: purple;  /* debug */
    flex: 0 0 4.0rem;
    xwidth: 5rem;
}

.modal-btn {
    flex: 1;  /* this makes all buttons (columns) the exact same width */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 10px 15px;
    /* scott, this next line might mess up the button presets */
    xmin-width: 0;   /* google: Prevents long unbreaking words/content from stretching the column */

      flex: 1 1 auto;        /* Grow and shrink equally, basing size on content */
      flex: 1 1 0px;
    xwhite-space: nowrap;   /* Keeps text on one line */

}