/* General Layout and Styling */

/* Main GridPane */
#main {
  -fx-padding: 20;
  -fx-hgap: 20;
  -fx-vgap: 20;
  -fx-background-image: url("images/background");
  -fx-background-size: cover;
  -fx-background-position: center center;
  -fx-background-blend-mode: overlay;
}

/* Header */
.header {
  -fx-background-color: #6a1b9a;
  -fx-padding: 20px 30px;
  -fx-border-color: #8e44ad;
  -fx-border-width: 0 0 2px 0;
  -fx-alignment: center;
  -fx-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.mainTitle {
  -fx-font-size: 26px;
  -fx-font-weight: 700;
  -fx-text-fill: #ffffff;
  -fx-padding: 0 20;
  -fx-alignment: center;
  -fx-letter-spacing: 1px;
}

/* Footer */
.footer {
  -fx-background-color: #6a1b9a;
  -fx-padding: 25px;
  -fx-alignment: center;
  -fx-box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
}

.footerHeading {
  -fx-font-weight: bold;
  -fx-font-size: 18px;
  -fx-padding-bottom: 5px;
  -fx-text-fill: #ffffff;
}

.footerText,
.footerLink,
.footerCopy {
  -fx-text-fill: #ffffff;
}

.footerLink {
  -fx-font-size: 14px;
  -fx-padding: 5px 0;
}

.footerLink:hover {
  -fx-text-fill: #8e44ad;
}

.footerCopy {
  -fx-font-size: 12px;
  -fx-padding: 5px;
  -fx-alignment: center;
}

/* Individual Cards */
.cardDiv {
  -fx-background-color: rgba(156, 89, 182, 0.7);
  -fx-border-color: transparent;
  -fx-border-width: 0;
  -fx-border-radius: 12px;
  -fx-background-radius: 12px;
  -fx-padding: 15;
  -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 10, 0.5, 0, 5);
  -fx-alignment: top-center;
  -fx-background-size: cover;
  -fx-background-position: center center;
  -fx-pref-width: 250;
  -fx-pref-height: 230;
  -fx-min-width: 250;
  -fx-min-height: 230;
}

.cardTitel {
  -fx-font-size: 18px;
  -fx-font-weight: 600;
  -fx-text-fill: #ffffff;
  -fx-padding: 5 0 15 0;
  -fx-alignment: center;
}

.cardText {
  -fx-text-fill: #000;
  -fx-margin: 10px auto;
}

#cardDiv1 {
  -fx-background-image: url("images/lotr.jpg");
  -fx-background-size: cover;
  -fx-background-repeat: no-repeat;
  -fx-background-position: center;
}

#cardDiv2 {
  -fx-background-image: url("images/wheel.jpg");
  -fx-background-size: cover;
  -fx-background-repeat: no-repeat;
  -fx-background-position: center;
}

#cardDiv3 {
  -fx-background-image: url("images/narnia.jpg");
  -fx-background-size: cover;
  -fx-background-repeat: no-repeat;
  -fx-background-position: center;
}

#cardDiv4 {
  -fx-background-image: url("images/earthsea.jpg");
  -fx-background-size: cover;
  -fx-background-repeat: no-repeat;
  -fx-background-position: center;
}

#cardDiv5 {
  -fx-background-image: url("images/theFirstLaw.jpg");
  -fx-background-size: cover;
  -fx-background-repeat: no-repeat;
  -fx-background-position: center;
}

#cardDiv6 {
  -fx-background-image: url("images/kingkiller.jpeg");
  -fx-background-size: cover;
  -fx-background-repeat: no-repeat;
  -fx-background-position: center;
}

#cardDiv7 {
  -fx-background-image: url("images/mistborn.jpg");
  -fx-background-size: cover;
  -fx-background-repeat: no-repeat;
  -fx-background-position: center;
}

#cardDiv8 {
  -fx-background-image: url("images/stormlight.jpg");
  -fx-background-size: cover;
  -fx-background-repeat: no-repeat;
  -fx-background-position: center;
}

/* Buttons */

/* Card Button */
.cardBtn {
  -fx-font-size: 14px;
  -fx-background-color: #8e44ad;
  -fx-text-fill: #ffffff;
  -fx-background-radius: 20px;
  -fx-padding: 8px 16px;
  -fx-border-color: transparent;
  -fx-border-width: 0;
  -fx-cursor: hand;
  -fx-transition: background-color 0.3s ease;
}

.cardBtn:hover {
  -fx-background-color: #732d91;
}

/* Header Buttons */
.cartBtn,
.loginBtn {
  -fx-font-size: 14px;
  -fx-background-color: #8e44ad;
  -fx-text-fill: #ffffff;
  -fx-background-radius: 20px;
  -fx-padding: 8px 16px;
  -fx-border-color: transparent;
  -fx-border-width: 0;
  -fx-transition: background-color 0.3s ease;
}

.cartBtn:hover,
.loginBtn:hover {
  -fx-background-color: #732d91;
}

/* Form Buttons */
.btnCreateAccount,
.btnLogin,
.btnCheckOut {
  -fx-font-size: 14px;
  -fx-background-color: #8e44ad;
  -fx-text-fill: #ffffff;
  -fx-background-radius: 20px;
  -fx-padding: 8px 20px;
  -fx-border-color: transparent;
  -fx-border-width: 0;
  -fx-cursor: hand;
  -fx-transition: background-color 0.3s ease;
}

.btnCreateAccount:hover,
.btnLogin:hover,
.btnCheckOut:hover {
  -fx-background-color: #732d91;
}

/* Specific Button - Checkout */
#btnCheckOut {
  -fx-font-size: 16px;
  -fx-background-color: #8e44ad;
  -fx-text-fill: #ffffff;
  -fx-background-radius: 20px;
  -fx-padding: 10px 20px;
  -fx-border-color: transparent;
  -fx-border-width: 0;
  -fx-cursor: hand;
  -fx-transition: background-color 0.3s ease;
}

#btnCheckOut:hover {
  -fx-background-color: #732d91;
}

/* Forms */
.formTitle,
.cartTitle {
  -fx-font-size: 26px;
  -fx-font-weight: 700;
  -fx-text-fill: #6a1b9a;
  -fx-alignment: center;
  -fx-padding: 10 0 20 0;
}

.cartTitle {
  -fx-text-fill: #ffffff;
}

.formFields {
  -fx-margin: 5 0 0 0;
  -fx-padding: 5 0 0 0;
}

.formLabel {
  -fx-font-size: 14px;
  -fx-text-fill: #ffffff;
  -fx-padding: 3 0 5 0;
}

.formInput {
  -fx-padding: 1px;
  -fx-font-size: 14px;
  -fx-background-color: #f4f4f4;
  -fx-border-color: #cccccc;
  -fx-border-radius: 8px;
  -fx-pref-width: 220px;
  -fx-transition: all 0.3s ease;
}

.formInput:focus {
  -fx-border-color: #8e44ad;
}

/* List Views */
.cartList {
  -fx-background-color: rgba(156, 89, 182, 0.7);
}
.paypal {
  -fx-background-image: url("icons/paypal.png");
  -fx-background-size: contain; /* Ensures the whole image is shown */
  -fx-background-repeat: no-repeat; /* Prevents the image from repeating */
  -fx-background-position: center; /* Centers the image */
  -fx-min-width: 100px;
  -fx-min-height: 100px; /* Ensures consistent height for the element */
}

.bill {
  -fx-background-image: url("icons/bill.png");
  -fx-background-size: contain;
  -fx-background-repeat: no-repeat;
  -fx-background-position: center;
  -fx-min-width: 100px;
  -fx-min-height: 100px;
}

.creditCard {
  -fx-background-image: url("icons/credit.png");
  -fx-background-size: contain;
  -fx-background-repeat: no-repeat;
  -fx-background-position: center;
  -fx-min-width: 100px;
  -fx-min-height: 100px;
}

/* Table Styling */
.table-view {
  -fx-background-color: rgba(
    156,
    89,
    182,
    0.7
  ); /* Background color with transparency */
  -fx-border-color: #8e44ad; /* Border color */
  -fx-border-width: 2px; /* Border thickness */
  -fx-padding: 10px;
  -fx-alignment: center;
  -fx-font-size: 14px; /* Font size for text */
  -fx-font-weight: normal; /* Normal font weight */
  -fx-text-fill: #ffffff; /* White text */
}

/* Table Header */
.table-view .column-header-background {
  -fx-background-color: #8e44ad; /* Header background */
  -fx-text-fill: white; /* Header text color */
}

/* Table Column Styling */
.table-view .table-column {
  -fx-alignment: center-left; /* Align text to the left */
  -fx-padding: 8px 16px; /* Padding for columns */
  -fx-font-size: 14px; /* Font size for column headers */
  -fx-text-fill: #ffffff; /* White text */
}

/* Table Cell Styling */
.table-view .table-cell {
  -fx-background-color: transparent; /* Transparent background for cells */
  -fx-border-color: transparent; /* No border for cells */
  -fx-padding: 5px 10px; /* Padding for each cell */
}

/* Row Styling */
.table-view .table-row-cell {
  -fx-background-color: rgba(
    156,
    89,
    182,
    0.3
  ); /* Semi-transparent row background */
  -fx-border-color: transparent; /* No border for rows */
}

.table-view .table-row-cell:hover {
  -fx-background-color: rgba(156, 89, 182, 0.6); /* Darker row color on hover */
}

/* Table Scroll Bar */
.table-view .scroll-bar {
  -fx-background-color: #8e44ad; /* Scroll bar background color */
}

/* Media Queries - Responsive Design */

/* For screens up to 1200px (large tablets and smaller desktops) */
@media screen and(max-width: 1200px) {
  #main {
    -fx-hgap: 15;
    -fx-vgap: 15;
  }

  .cardDiv {
    -fx-pref-width: 45%;
    -fx-min-width: 45%;
    -fx-pref-height: 220;
    -fx-min-height: 220;
  }

  .mainTitle {
    -fx-font-size: 24px;
  }

  .footerCopy {
    -fx-font-size: 12px;
  }

  .cartBtn,
  .loginBtn {
    -fx-font-size: 13px;
    -fx-padding: 7px 14px;
  }
}

/* For screens up to 1024px (tablets and medium-sized devices) */
@media screen and(max-width: 1024px) {
  #main {
    -fx-hgap: 15;
    -fx-vgap: 15;
  }

  .cardDiv {
    -fx-pref-width: 48%;
    -fx-min-width: 48%;
    -fx-pref-height: 210;
    -fx-min-height: 210;
  }

  .mainTitle {
    -fx-font-size: 24px;
  }

  .footerCopy {
    -fx-font-size: 12px;
  }

  .cartBtn,
  .loginBtn {
    -fx-font-size: 14px;
    -fx-padding: 8px 15px;
  }
}

/* For screens up to 768px (mobile devices and small tablets) */
@media screen and(max-width: 768px) {
  #main {
    -fx-hgap: 10;
    -fx-vgap: 10;
  }

  .cardDiv {
    -fx-pref-width: 100%;
    -fx-min-width: 100%;
    -fx-pref-height: 180;
    -fx-min-height: 180;
  }

  .cardTitel {
    -fx-font-size: 16px;
    -fx-background-color: #000;
  }

  .cardText {
    -fx-font-size: 12px;
  }

  .mainTitle {
    -fx-font-size: 22px;
  }

  .footerCopy {
    -fx-font-size: 10px;
  }

  .cartBtn,
  .loginBtn {
    -fx-font-size: 12px;
    -fx-padding: 6px 12px;
  }
}

/* For screens up to 480px (very small screens like smartphones in portrait mode) */
@media screen and(max-width: 480px) {
  #main {
    -fx-hgap: 5;
    -fx-vgap: 5;
  }

  .cardDiv {
    -fx-pref-width: 100%;
    -fx-min-width: 100%;
    -fx-pref-height: 150;
    -fx-min-height: 150;
  }

  .cardTitel {
    -fx-font-size: 14px;
  }

  .cardText {
    -fx-font-size: 10px;
  }

  .mainTitle {
    -fx-font-size: 18px;
  }

  .footerCopy {
    -fx-font-size: 8px;
  }

  .cartBtn,
  .loginBtn {
    -fx-font-size: 12px;
    -fx-padding: 5px 10px;
  }

  .formTitle,
  .cartTitle {
    -fx-font-size: 20px;
  }

  .formInput {
    -fx-pref-width: 200px;
  }

  .footerHeading {
    -fx-font-size: 16px;
  }
}
