/* 
   Navigation bar
   Interactive navigation bar with the name of pack and send unley.
*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.navbar{
    background-color:#1f2937;
    padding:25px 50px;
}

.nav-links{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:50px;

    list-style:none;
}

.nav-links a{
    text-decoration:none;
    color:white;

    font-size: 1.1rem;     
    font-weight:600;

    padding:12px 18px;
    border-radius:8px;

    transition:0.3s;
}

.nav-links a:hover{
    background-color:#2563eb;
}


.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;

    background-color:#1f2937;
    padding:25px 60px;
}

.logo{
    color:white;
    font-size:2rem;
}



/* 
   Application page
   Syling component for the application section 
*/


body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f4f6f8;
}

header h1 {
    text-align: center;
    padding: 25px;
    font-size: 2.2rem;
}

form {
    max-width: 1000px;
    margin: 40px auto;
    background: white;
    padding: 35px;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

fieldset {
    border: none;
    margin-bottom: 25px;
}

legend {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
}

input {
    width: 100%;
    padding: 13px;
    margin-top: 6px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
}

button {
    padding: 12px 22px;
    border: none;
    border-radius: 8px;
    background: #1f2937;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    margin: 10px 5px 10px 0;
}

.submit-btn {
background-color:rgb(83, 193, 96)
}

.submit-btn:hover{
    background-color: rgb(44, 155, 44);
}


button:hover {
    background: #374151;
}

.reset-btn {
    background-color:tomato
}
.reset-btn:hover {
    background-color: crimson;
}

#senderPopup,
#receiverPopup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    background: white;
    padding: 30px;
    width: 400px;
    border-radius: 14px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.3);
    z-index: 1000;
}



.close-btn{
    background-color: rgb(182, 88, 88);
    width: 45px;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
}

.close-btn:hover{
    background-color:brown
}



.ok-btn {
    width: 100%;
    margin-top: 14px;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: #65cd70;
    color: rgb(255, 255, 255);
    font-weight: 700;
    cursor: pointer;
}

.ok-btn:hover {
    background: #2caf65;
}


/* 
   About us page
   structure for the about us page
*/

.about-container{
    display: flex;
    align-items: center;     
    justify-content: center;  /* centers the whole section */
    gap: 40px;
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px;
}

.about-image img{
    width: 650px;
    height: auto;
    border-radius: 10px;
}

.about-text{
    flex: 1;
    max-width: 600px;

    border: 2px solid #1f2937;
    border-radius: 10px;

    padding:   25px;
    background-color: white;

    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    margin-top: 30px;
    position: relative;
    top: -60px;
}

.about-text h2{
    margin-top: 0;
    color: #1f2937;
}

.about-text p{
    line-height: 1.6;
    margin-top: 25px;
}

/* 
   Contact us page
   strucutre for how the communication methods are presented. 
*/

.content-header{
    text-align:center;
    margin-top:50px;
    margin-bottom:90px;
}
.content-header p{
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}
.contact-grid{
    margin-top: 50px;

    display:grid;

    grid-template-columns: 1fr 1fr;

    gap:25px;

    max-width:900px;

    margin:auto;
}

.contact-card{
    background:white;

    padding:20px;

    border-radius:12px;

    border:2px solid #1f2937;

    box-shadow:
        0 5px 15px rgba(0,0,0,0.15);

    text-align:center;
}

/* 
   Error handling
   how the errors of the application are presented 
*/

.error-messages {
  display: none;
  margin-top: 20px;
  padding: 16px 20px;
  border: 1px solid #ffb3b3;
  border-left: 6px solid #e63946;
  background-color: #fff5f5;
  color: #8a1f1f;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.5;
}

.error-messages strong {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
}

.error-messages ul {
  margin: 0;
  padding-left: 20px;
}

.error-messages li {
  margin-bottom: 4px;
}


/* 
   Admin Page 
   How the errors in admin page are presented
*/
.error-promo {
  display: none;
  margin-top: 20px;
  padding: 16px 20px;
  border: 1px solid #ffb3b3;
  border-left: 6px solid #e63946;
  background-color: #fff5f5;
  color: #8a1f1f;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.5;
}

.error-promo strong {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
}
/* 
   Footer content
   links to social media of the company which are presented in simple yet engagning manner
*/

.footer-content {
    width: 100%;
    text-align: center;
    margin-top: 50px;
    padding: 20px 0;
}

.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-bottom: 8px;
}

.social-links a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-links img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}

.footer-content p {
    margin: 0;
    font-size: 14px;
    text-align: center;
}


.social-links img:hover {
    transform: scale(1.1);
}



/* 
   Estimated price
   How the estimated price of the shipping is presented to the user
*/


.quote-result {
    margin-top: 20px;
    padding: 15px;
    background-color: #e9f7ef;
    border: 1px solid #2e7d5b;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

/* 
   Price information
*/

.weight-price {
    width: 80%;
    margin: 40px auto;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
    font-size: 15px;
}

.weight-price thead {
    background: #d9e2f3;
}

.weight-price th {
    padding: 16px;
    text-align: left;
    font-weight: 700;
    color: #333;
}

.weight-price td {
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    color: #333;
}

.weight-price tbody tr:nth-child(even) {
    background: #f8f9fc;
}

.weight-price tbody tr:hover {
    background: #eef3ff;
}


.additional-cost {
    width: 80%;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cost-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 5px solid #2d6a4f;
    border-radius: 10px;
    padding: 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.cost-card h2 {
    margin-bottom: 12px;
    font-size: 1.2rem;
    color: #1f2937;
}

.cost-card p {
    line-height: 1.7;
    color: #4b5563;
    margin: 0;
}

/* Different accent colours */

.insurance-cost {
    border-left-color: #2563eb;
}

.medication-cost {
    border-left-color: #f59e0b;
}

.electronic-cost {
    border-left-color: #10b981;
}

/* Notice section */

.notice {
    background: #fff8e7;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 18px 22px;
}

.notice h2 {
    margin-bottom: 8px;
    color: #92400e;
}

.notice p {
    margin: 0;
    color: #78350f;
    line-height: 1.6;
}


/* Login-page
User can find their previous enquiries by putting down the matching email.
 */


.login-overlay {
    width: 100%;
    min-height: 45vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #eef2f6;
    padding: 60px 20px;
}

.login-overlay form {
    background: white;
    width: 380px;
    padding: 45px 40px;
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
    text-align: center;
}

.login-overlay label {
    display: block;
    margin-bottom: 18px;
    font-size: 26px;
    font-weight: 700;
    color: #1d2a3a;
}

.login-overlay input {
    width: 100%;
    padding: 15px 16px;
    margin-bottom: 22px;
    border: 1px solid #d4d9df;
    border-radius: 8px;
    background: #f3f5f7;
    font-size: 15px;
    outline: none;
}

.login-overlay input:focus {
    border-color: #1d2a3a;
    background: white;
}

.login-overlay button {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px;
    background: #1d2a3a;
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.login-overlay button:hover {
    background: #2d3f55;
}

/* Enquiry-page
How the user is presented with their previous enquiries
 */

.enquiries-section {
    width: 80%;
    margin: 60px auto;
}

.enquiries-section h2 {
    text-align: center;
    color: #1d2a3a;
    font-size: 32px;
    margin-bottom: 30px;
}

.enquiry-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 25px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border-left: 6px solid #1d2a3a;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.card-header h3 {
    color: #1d2a3a;
    font-size: 24px;
}

.card-header span {
    background: #1d2a3a;
    color: white;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 700;
}

.enquiry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


.enquiry-grid form:last-child {
    grid-column: 3;
    justify-self: end;
    align-self: end;

    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: auto;
}

.enquiry-grid h4 {
    color: #1d2a3a;
    margin-bottom: 10px;
}

.enquiry-grid p {
    color: #333;
    margin-bottom: 8px;
}



/* 
   Admin page
   This block updates the colouring of the status on each quote
*/


.status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: bold;
}

.status-badge.new {
    background-color: #fff3cd;
    color: #856404;
}

.status-badge.contacted {
    background-color: #cce5ff;
    color: #004085;
}

.status-badge.booked {
    background-color: #d4edda;
    color: #155724;
}




/* 
   Admin page
   A box which allows pack and send to add promo rate to future quotes.
*/

.promo-box {
    margin-top: 15px;
}

.promo-rate {
    width: 70px;
    padding: 8px;
    border: 1px solid #888;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
}

.promo-box button {
    padding: 8px 12px;
    margin-left: 5px;
}


.promo-header{
    font-size: 18px;
    font-weight: bold
}



/* 
   Admin page
   A How the dropdown menu to change the status of the status in admin page is presented. 
*/


.promo-control {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}


.status-form {
    grid-column: 2;
    grid-row: 2;

    justify-self: start;
    align-self: start;

    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0;
    padding: 0;
    width: auto;
    background: transparent;
    box-shadow: none;
}

.status-select,
.promo-rate {
  padding: 10px 12px;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  font-size: 14px;
  background: white;
}

.status-btn,
.promo-control button {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: #005baa;
  color: white;
  font-weight: 600;
  cursor: pointer;
}

.status-btn:hover,
.promo-control button:hover {
  background: #004080;
}



/* Styling on how the admin can see the number of times users have pressed calculate quote */

.admin-stats {
    max-width: 1230px;
    margin: 45px auto 20px;
    padding: 0 20px;
}

.stat-card {
    background: white;
    border-left: 6px solid #1d2b3c;
    border-radius: 14px;
    padding: 22px 28px;

    display: flex;
    align-items: center;
    gap: 20px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.stat-icon {
    width: 55px;
    height: 55px;

    background: #1d2b3c;
    color: white;

    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 25px;
    font-weight: bold;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-label {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #687385;
}

.stat-number {
    margin: 3px 0 0;
    font-size: 30px;
    font-weight: 700;
    color: #1d2b3c;
}




/* 
   Enquiries and Home page
   Styling of how the user presented if they have submited an enquiry or have entered the an email with no prior quotes submitted
   in the enquiries page.
*/

.popup-message {
  position: fixed;
  top: 25px;
  right: 25px;
  background-color: #1f8f4d;
  color: white;
  padding: 14px 22px;
  border-radius: 8px;
  font-weight: bold;
  z-index: 9999;
}

.noenquiry-message {
  position: fixed;
  top: 25px;
  right: 25px;
  background-color: #8f2a1f;
  color: white;
  padding: 14px 22px;
  border-radius: 8px;
  font-weight: bold;
  z-index: 9999;
}


.flash-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

/* Responsive navbar fix */

.navbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 25px;
    padding: 25px 5%;
}

.logo {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    text-align: center;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.nav-links a {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    padding: 10px 14px;
    text-align: center;
}




/* Responsive layout for tablets and phones */

@media (max-width: 900px) {
    form {
        width: 90%;
        padding: 25px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        width: 90%;
    }

    .about-container {
        flex-direction: column;
        text-align: center;
    }

    .about-image img {
        width: 100%;
        max-width: 650px;
    }

    .about-text {
        top: 0;
        width: 90%;
    }

    .enquiry-grid {
        grid-template-columns: 1fr;
    }

    .card-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

@media (max-width: 500px) {
    .navbar {
        padding: 20px;
    }

    .nav-links {
        flex-direction: column;
        gap: 10px;
    }

    .nav-links a {
        width: 100%;
    }

    #senderPopup,
    #receiverPopup {
        width: 90%;
    }

    .login-overlay form {
        width: 90%;
        padding: 30px 25px;
    }

    .weight-price,
    .additional-cost,
    .enquiries-section {
        width: 95%;
    }
}






@media (max-width: 768px) {

    .enquiries-section {
        width: 95%;
    }

    .enquiry-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .status-form {
        grid-column: 1;
        grid-row: auto;

        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .enquiry-grid form:last-child {
        grid-column: 1;
        grid-row: auto;
        justify-self: end;
    }
}






@media (max-width: 768px) {
    .status-form {
        grid-column: 1;
        grid-row: auto;

        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .status-form label {
        width: 100%;
    }
}









/* Prevent iPhone and iPad from zooming into form inputs */
input,
select,
textarea,
button {
    font-size: 16px;
}



/* making every page fill the screen*/
html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main,
.enquiryprogress,
.enquiries-section,
.about-container,
.contact-container,
.login-page,
.admin-section {
    flex: 1;
}



/* Final mobile layout overrides */
@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        min-height: 100%;
        overflow-x: hidden;
    }

    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    header {
        width: 100%;
    }

    .navbar {
        width: 100%;
        padding: 28px 20px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
        gap: 22px;
    }

    .navbar h1,
    .navbar .logo,
    .site-title {
        text-align: center;
        margin: 0;
    }

    .nav-links {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px 20px;
    }

    .nav-links a {
        width: auto;
        padding: 8px 4px;
        text-align: center;
        white-space: nowrap;
    }

    main,
    .enquiryprogress,
    .enquiries-section,
    .contact-container,
    .login-page,
    .admin-section {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        flex: 1;
    }

    form {
        width: calc(100% - 24px);
        max-width: 700px;
        margin: 24px auto;
        padding: 28px 22px;
        box-sizing: border-box;
    }

    input,
    select,
    textarea,
    button {
        font-size: 16px;
        box-sizing: border-box;
    }

    input,
    select,
    textarea {
        width: 100%;
        min-height: 48px;
    }

    textarea {
        min-height: 130px;
    }

    button,
    .calculate-btn,
    .submit-btn,
    .reset-btn,
    .ok-btn,
    .delete-btn {
        min-height: 46px;
    }

    .form-buttons,
    .button-container,
    .action-buttons {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .form-buttons button,
    .button-container button,
    .action-buttons button {
        width: 100%;
    }

    #senderPopup,
    #receiverPopup {
        width: calc(100% - 30px);
        max-width: 500px;
        padding: 25px 20px;
        box-sizing: border-box;
    }

    .enquiry-grid {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .enquiry-card,
    .quote-card {
        width: 100%;
        box-sizing: border-box;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .status-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .status-form select,
    .status-form button {
        width: 100%;
    }

    .delete-btn {
        width: 100%;
        margin-top: 14px;
    }

    footer {
        width: 100%;
        margin-top: auto;
        padding: 28px 16px;
        box-sizing: border-box;
    }
}




/* correcting the layout page of about us seperately */
@media (max-width: 768px) {

    .about-container {
        width: 100%;
        max-width: none;
        padding: 24px 16px;
        margin: 0 auto;
        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .about-image,
    .about-text {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }

    .about-image {
        order: 1;
    }

    .about-text {
        order: 2;
        padding: 24px;
    }

    .about-image img {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0;
    }

    .about-text h1,
    .about-text h2 {
        font-size: 30px;
        line-height: 1.15;
    }

    .about-text p {
        font-size: 17px;
        line-height: 1.65;
    }
}





/* Ennquiry page using more of the screen */
@media (max-width: 768px) {

    .login-overlay,
    .enquiries-login-container,
    .login-page {
        width: 100%;
        min-height: calc(100vh - 210px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px 16px;
        box-sizing: border-box;
    }

    .login-overlay form,
    .enquiries-login-container form {
        width: 100%;
        max-width: 480px;
        margin: 0;
        padding: 32px 24px;
    }
}




/* improving the calculator page buttons */
@media (max-width: 768px) {

    .calculate-btn,
    .submit-btn,
    .reset-btn,
    fieldset > button {
        width: 100%;
        margin: 6px 0;
    }

    fieldset {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}



/* How the delete button is displayed to the admin and user when attempting to delete an enquiry */

.delete-btn {
    width: 100%;
    margin-top: 14px;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: #d7461d;
    color: rgb(255, 255, 255);
    font-weight: 700;
    cursor: pointer;
    

}

.delete-btn:hover { 
    background: #af352c;
}