/*************************************************************************************************************/
/*   For KCI's e-houseboats.ca post 'proof of concept' website CSS                                           */
/*   New CSS file for efficiency in displaying plan sSections. Removed this CSS from DispPlanA and DispPlanB */
/*   Reminder: CSS is case sensitive                                                                         */
/*   see: https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile  */
/*   Original:    260122 - Created new CSS file exclusively for 4 e-houseboats.ca master pages               */
/*   Last Update: 26                                                                                         */
/*   Last Update: 26                                                                                         */
/*************************************************************************************************************/
        :root  { --banner-height: 90px; --footer-height: 45px; /* Fixed heights */
            /* Calculated content area height */
            --content-area-height: calc(100vh - var(--banner-height) - var(--footer-height));        }

        html, body { margin: 0; padding: 0; height: 100%; /* Important for full-height layouts */
            overflow:visible; } /* Prevents main body scroll, allowing only partition scroll */

        p, h2, h3      { color: #1F497D; font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; font-size: 1.2em;}

        iframe { width: 100%; height: 100%; border: none;  } 

        /***** Co-Pilot CSS *****/

        main { min-height: calc(100vh - 90px - 45px); padding-bottom: 60px; /* extra breathing room for button */  }

        /* Bottom container */
        #bottomContainer { align-items: stretch; display: flex; flex-wrap: wrap; padding: 10px;
                           justify-content: space-around; height: auto;                                          }

        .bottom-area    { height: 22%; /* Fills the 22% row */  }

        .center         { text-align: center; }
        .dPwelc         { color: red; font-size: 1.4em; font-weight: bold; }
        .imgBtnCent     { margin: 0 auto; }

        .main-container { height: var(--content-area-height) ; 
                          margin-bottom: var(--footer-height); /* push above footer */
                          margin-top: var(--banner-height);    /* Pushes content down 90px to below the banner */
                          padding-bottom: 60px;                /* extra breathing room for button */
                          width: 100%;           }
        .margB10        { margin-bottom: 10px;   }
        .margT15        { margin-top: 15px;      }

        .progress-container { background-color: rgba(255,255,255,0.6); box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
                              border-radius: 8px; height: 25px; margin-top: 10px; overflow: hidden; width: 100%;    }

        .progress-bar  { background: linear-gradient(90deg, #0078D7, #00A2FF); color: white; 
                         font-weight: bold; height: 100%; line-height: 25px; text-align: center; 
                         transition: width 0.5s ease; width: 0%; /* default, updated dynamically */                  }

        .remindTxtC    { color: #1F497D; text-align: center;  font-size: 1.2em;
                         font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; } 
        .remindTxtL    { color: #1F497D; text-align: left;  font-size: 1.2em;
                         font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; } 
        .returnButton  { bottom: 55px; /* just above the 45px footer */ left: 50%;
                         position: fixed; transform: translateX(-50%); z-index: 999; /* keep above other content */ }
        .row           { box-sizing: border-box; /* Ensure padding is handled correctly */ width: 100%;             }
        
        /* Each section */
        .section { background-color: rgba(255, 255, 255, 0.8); border-radius: 8px;  flex: 1 1 30%; margin: 10px;
                   box-shadow: 0 2px 6px rgba(0,0,0,0.3); padding: 15px; min-width: 250px;                          }

        /* Ensure Bootstrap .row also gets 100% width if used inside flex columns */

        .txtALeft      { text-align: left;   }
       
        .top-area      { height: 78%; margin-top: -90px; /* Fills the 78% row */  }        

        /* Ensure the height is a proportion of the viewport, not the tiny parent */
        .top-area iframe { display: block; height: 76vh !important; width: 94% !important;
                           margin: 10px auto !important;  }

        .vAlignM       { vertical-align:middle; }

        /* Extra small devices (phones, 600px and down) */
        @media (max-width: 768px) {
            :root { --banner-height: 70px; --footer-height: 45px; /* Fixed heights */
                /* Calculated content area height */
                --content-area-height: calc(100vh - var(--banner-height) - var(--footer-height));   }
            main { /* smaller header */ min-height: calc(100vh - 70px - 45px); padding-bottom: 60px;            }
            .section { flex: 1 1 100%; }
        }

        @media only screen and (max-width: 600px) {
            :root { --banner-height: 70px; --footer-height: 45px; /* Fixed heights */
                /* Calculated content area height */
                --content-area-height: calc(100vh - var(--banner-height) - var(--footer-height));   }
             iframe          { margin: 3px auto 3px auto; padding: 0 10px;  }
            .dPwelc          { font-size: 1.2em; }
            .top-area iframe { width: 100% !important;                      }
        }

        /* Small devices (portrait tablets and large phones, 600px and up) */
        @media only screen and (min-width: 600px) {
            :root { --banner-height: 75px; --footer-height: 45px;  /* Fixed heights */
                /* Calculated content area height */
                --content-area-height: calc(100vh - var(--banner-height) - var(--footer-height));   }
             iframe        { margin: 4px auto 4px auto; }
            .dPwelc        { font-size: 1.25em;  }
        }

        /* Medium devices (landscape tablets, 768px and up) */
        @media only screen and (min-width: 768px) {
            :root { --banner-height: 75px; --footer-height: 45px; /* Fixed heights */
                /* Calculated content area height */
                --content-area-height: calc(100vh - var(--banner-height) - var(--footer-height));   }
             iframe        { height: 60%; margin: 5px auto 5px auto; }
            .dPwelc        { font-size: 1.3em; }
        }

        /* Large devices (laptops/desktops, 992px and up) */
        @media only screen and (min-width: 992px) {
             iframe        { margin: 7px auto 7px auto;   }
            .dPwelc        { font-size: 1.35em; }
        }

        /* Extra large devices (large laptops and desktops, 1200px and up) */
        @media only screen and (min-width: 1200px) {
             iframe        { margin: 10px auto 10px auto;  }
            .dPwelc        { font-size: 1.4em; }
        }