/* Minimal W3.CSS subset for base.html */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body { margin: 0; 
    font-family: Verdana, sans-serif; 
    font-size: 15px; 
    line-height: 1.5;  
    display: flex;
    flex-direction: column;
    min-height: 100vh; }

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h1, h2 { font-family: "Segoe UI", Arial, sans-serif; font-weight: 400; margin: 10px 0; }

/* W3.CSS Utilities */
.w3-container { padding: 0.01em 16px; }
.w3-card { box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); }
.w3-bar { padding-left: 15px; padding-right: 5px; }
.w3-bar .w3-bar-item { padding: 8px 16px; float: none; width: auto; border: none; display: block; outline: 0; }
.w3-bar-block .w3-bar-item { width: 100%; display: block; padding: 8px 16px; text-align: left; border: none; white-space: normal; float: none; outline: 0; }
.w3-hide { display: block !important; }
.w3-show { display: block !important; }
.w3-top { position: fixed; width: 100%; z-index: 1; top: 0; }

/* W3.CSS Colors Used */
.w3-safron-dark { color: #fff !important; background-color: #ff9900 !important; } /* Navbar, Footer */
.w3-safron-light { color: #fff !important; background-color: #FFA52C !important; } /* Header */
/*.w3-safron-dark { color: #fff !important; background-color: #996633 !important; } /* Navbar, Footer */
/*.w3-safron-light { color: #fff !important; background-color: #cc9966 !important; } /* Header */

.w3-amber { color: #000 !important; background-color: #ffff99 !important; } /* Content cards */
.w3-hover-white:hover { color: #000 !important; background-color: #fff !important; }
.w3-text-white { color: #fff !important; margin-right: 2px;}
.w3-body { 
    color: #000 !important; 
    background-image: url("../images/design.png");
    background-color: #ffff80 !important; 
} /* Body */

/* Responsive Design */
@media (max-width: 600px) {
   
    .footer {
        padding: 5px;
    }
    .footer-content p, .footer-content a {
        font-size: 12px;
        margin: 2px 0;
    }
    .footer-content {
        gap: 2px;
    }
}



/* Custom Styles */
.content-wrapper {
    padding-top: 60px; /* Space for fixed navbar */
    flex: 1 0 auto;
}

.full-card {
    background-image: url("../images/paper.png");
    width: 90%;
    margin: 15px auto 16px;
    padding: 15px 15px;
    box-shadow: 8px 8px 8px 8px rgba(0,0,0,0.2);
    border-radius: 8px;
    transition: box-shadow 0.3s;
    margin-bottom: 40px;
    overflow: auto; /* Ensure content is fully visible */
    position: relative; 
}
.full-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.inner-card {   
    
    background-color: linear-gradient(135deg, #f8f8f8, #e8e8e8);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    width: 100%;
    box-sizing: border-box;
    margin-top: 15px;
   
}

.inner-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.centered-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the image perfectly */
    width: 60%; /* Image width is 80% of the container */
    height: auto; 
    opacity: 10%;
    pointer-events: none;
  }



.footer {
    margin-top: 200px;
    width: 100%;
    padding: 10px;   
    background-color: #ff9900;
    color: #fff; 
}
.footer-content {
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 3px; /* Space between items */
}

.astro-symbols {
    font-size: 70%;
    font-weight: 700;
}

.header-padding {
    padding: 3em 10px 10px 10px;
}

.logo {
    vertical-align: middle;
    border-radius: 50%;
    width: 60%;
    height: auto;
    background-color: #FFA52C !important;
}



/* Navigation Menu Positioning */
#navDemo {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50px; /* Adjust based on navbar height */
    right: 0;
    width: 200px;
    background-color: #ff9900;
    z-index: 1000;
}
#navDemo.w3-show {
    display: block !important;
}

/* Time Input Styling */
input.form-control.time-input::placeholder {
    color: #999 !important;
    opacity: 1 !important;
    font-size: 12px; /* Smaller font for narrow inputs */
    text-align: center; /* Center placeholders */
}
input.form-control.time-input::-webkit-input-placeholder {
    color: #999 !important;
    opacity: 1 !important;
    font-size: 12px;
    text-align: center;
}
input.form-control.time-input::-moz-placeholder {
    color: #999 !important;
    opacity: 1 !important;
    font-size: 12px;
    text-align: center;
}
input.form-control.time-input:-ms-input-placeholder {
    color: #999 !important;
    opacity: 1 !important;
    font-size: 12px;
    text-align: center;
}
.time-input {
    color: #000; /* Ensure text is visible */
    background-color: #fff; /* White background */
    border: 1px solid #ccc; /* Visible border */
    padding: 5px; /* Spacing */
}

/* Placeholder for unused features */
.form-text { display: block; margin-top: 5px; font-style: italic; color: grey; }
#place-suggestions { position: absolute; background: white; border: 1px solid #ccc; max-height: 150px; overflow-y: auto; z-index: 1000; }
#place-suggestions div { padding: 5px; }
#place-suggestions div:hover { background-color: #f0f0f0; }
#place-loader { margin-left: 5px; color: #666; }

/* Validation Error Styling */
.validation-error {
    color: red;
    font-size: 0.9em;
    margin-top: 5px;
}

#logo-container {
    display: flex;
    align-items: left;
    justify-content: left;
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
}

#logo-image {
    height: auto;
    max-width: 60px; /* Adjust as needed */
    margin-right: 10px; /* Add space between logo and heading */
   
}

#header-title {
    margin: 0; /* Remove default heading margins */
    white-space: nowrap; /* Prevent the heading from wrapping */
}

@media (max-width: 768px) {
    #logo-container {
        flex-direction: column; /* Stack logo and heading vertically */
    }

    #logo-image {
        margin-right: 0; /* Remove right margin on smaller screens */
        margin-bottom: 10px; /* Add bottom margin to logo */
        max-width: 60px; /*Adjust logo for smaller screens*/
    }
}

.my-button {
    padding-top: 5px;
    margin-top: 20px;
    background-color: #FFA52C; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    
  }

.my-button:hover{    
    background-color: #ff9900;
}

.my-button:active{    
    background-color: #ff9900;
}
.my-button:visited{    
    background-color: #ff9900;
}
.my-button:focus{    
    background-color: #ff9900;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

.wrap-pre {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-wrap: break-word; /* Fallback */
}


/* Container for the boxes */
.containerfooter {
    
    padding: 10px;
    /* Clearfix necessary to contain floated children */
    overflow: auto; /* Simple clearfix */
  }
  
  /* Styling for both boxes */
  .boxfooter {
    padding: 20px;
    margin: 1%; /* Add some space around boxes */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    background-color: #f0f0f0;
   
  }
  
  /* Float layout for wider screens */
  .leftfooter {
    float: left !important; 
    width: 23%; /* 50% minus margin */
    background-color: #ff9900;
  }
  
  .rightfooter {
    float: left !important; 
    width: 23%; /* 50% minus margin */
    background-color: #ff9900;
  }
  
  /* --- Responsive Part --- */
  /* Media query for screens smaller than 600px */
  @media (max-width: 600px) {
    .leftfooter, .rightfooter {
      float: none; /* Remove the float */
      width: 98%; /* Take up nearly full width (adjust margin if needed) */
      margin-left: 1%;
      margin-right: 1%;
      margin-bottom: 10px; /* Add space between stacked boxes */
    }
  }

  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }

    /* New placeholder styling */
    ::placeholder {
        color: #d3d3d3; /* Light grey color */
        font-size: 0.75rem; /* Smaller font size */
        opacity: 1; /* Ensure consistent visibility across browsers */
    }

    /* For cross-browser compatibility */
    :-ms-input-placeholder {
        color: #d3d3d3;
        font-size: 0.75rem;
    }

    ::-ms-input-placeholder {
        color: #d3d3d3;
        font-size: 0.75rem;
    }