/* Basic Reset & Body Styling */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', 'Roboto', sans-serif; /* Modern font stack */
    background-color: #f4f7f6; /* Light grey background */
    color: #333;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header Styling */
.header {
    background: linear-gradient(90deg, #4b6cb7, #182848); /* Blue gradient */
    color: #fff;
    text-align: center;
    padding: 2rem 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    opacity: 0.9;
}

/* Controls Container */
.controls-container {
    background-color: #ffffff;
    padding: 1.5rem;
    margin: 1.5rem auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    width: 90%;
    max-width: 1000px;
    text-align: center;
}

.billionaire-selector label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #555;
}

#billionaire-select {
    width: 100%;
    max-width: 450px; /* Slightly wider for longer names/values */
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    margin-bottom: 1.5rem; /* Space before info display */
}

.billionaire-info-display {
    background-color: #e9f5ff; /* Light blue background for info */
    padding: 1rem;
    border-radius: 5px;
    border-left: 5px solid #4b6cb7; /* Accent border */
    margin-top: 1rem;
}

#billionaire-name {
    font-size: 1.5rem;
    color: #182848;
    margin-bottom: 0.5rem;
}

.money-display, .percentage-display {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 0.3rem;
    word-wrap: break-word; /* Prevent long numbers from overflowing */
}

/* Main Wrapper for Items Grid and Ads */
.main-wrapper {
    display: flex;
    flex-direction: row; /* Default layout: items on left, ads on right */
    justify-content: center; /* Center content */
    align-items: flex-start; /* Align items to the top */
    gap: 1.5rem; /* Space between items grid and ad sidebar */
    width: 95%;
    max-width: 1800px; /* Adjust max-width to accommodate sidebar */
    margin: 1rem auto;
    flex-grow: 1; /* Allow wrapper to fill vertical space */
}

/* Main App Container (Items Grid) */
.app-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
    gap: 1.5rem; /* Space between items */
    flex-grow: 1; /* Allow item grid to take available space */
    min-width: 0; /* Prevent flex item overflow issues */
}

/* AdSense Placeholder Sidebar Styling */
.ads-sidebar {
    width: 250px; /* Typical sidebar width */
    flex-shrink: 0; /* Prevent sidebar from shrinking */
    padding-top: 1.2rem; /* Align top with item padding roughly */
}

.ads-placeholder .ad-box {
    border: 2px dashed #ccc;
    background-color: #f9f9f9;
    min-height: 250px; /* Common ad height, adjust as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #aaa;
    font-size: 0.9rem;
    margin-bottom: 1.5rem; /* Space between multiple ad boxes */
    padding: 1rem;
}

.ads-placeholder .ad-box span {
    max-width: 90%;
}

/* Item Box Styling */
.element {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 1.2rem;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes controls to bottom */
}

.element:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.element img {
    max-width: 100%;
    height: 180px; /* Fixed height */
    object-fit: cover; /* Scales image nicely */
    border-radius: 5px;
    margin-bottom: 1rem;
}

.element #name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
    min-height: 40px; /* Ensure consistent height */
    flex-grow: 1; /* Allow name to take space if needed */
}

.element #price {
    font-size: 1rem;
    font-weight: 700;
    color: #007bff; /* Price color */
    margin-bottom: 1rem;
}

/* Buy/Sell Controls */
.buyAndSellContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem; /* Add space above controls */
    border-top: 1px solid #eee;
    padding-top: 1rem;
}

.buyAndSellContainer span {
    font-size: 1.2rem;
    font-weight: bold;
    min-width: 30px; /* Ensure space for numbers */
    text-align: center;
    padding: 0 0.5rem; /* Add horizontal padding */
}

.btn-buy, .btn-sell {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    color: #fff;
    flex-basis: 40%; /* Give buttons a base width */
    flex-grow: 0; /* Don't allow excessive growth */
}

.btn-buy {
    background-color: #28a745; /* Green */
}

.btn-buy:hover {
    background-color: #218838; /* Darker green */
}

.btn-sell {
    background-color: #dc3545; /* Red */
}

.btn-sell:hover {
    background-color: #c82333; /* Darker red */
}

.btn-sell:disabled, .btn-buy:disabled {
    background-color: #6c757d; /* Grey */
    cursor: not-allowed;
    opacity: 0.7;
}

/* Receipt Area Styling */
.receipt-area {
    background: #ffffff;
    padding: 1.5rem;
    margin: 1.5rem auto; /* Centered below main content */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    width: 90%;
    max-width: 700px; /* Slightly wider receipt if desired */
    border-top: 5px solid #ffc107; /* Yellow accent */
}

.receipt-content {
    /* Styles for content within receipt if needed */
}

.receipt-title {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #182848;
    font-size: 1.6rem;
    font-weight: 600;
}

#receipt-items {
    margin-bottom: 1rem;
    max-height: 350px; /* Limit height and allow scroll if needed */
    overflow-y: auto; /* Add scroll for long receipts */
    padding-right: 10px; /* Space for scrollbar */
}

#receipt-items p {
    font-size: 0.95rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed #eee; /* Separator for items */
    display: flex;
    justify-content: space-between;
    align-items: center; /* Align items vertically */
    flex-wrap: wrap; /* Allow wrapping if name is long */
}
#receipt-items p:last-child {
    border-bottom: none;
}

#receipt-items span:first-child { /* Target the item name part */
    flex-basis: 70%; /* Give name more space */
    text-align: left;
}
#receipt-items span:last-child { /* Target the total price part */
     flex-basis: 30%;
     text-align: right;
}


#receipt-items strong {
    margin: 0 5px; /* Space around quantity */
    color: #007bff;
}

.receipt-placeholder {
    color: #777;
    font-style: italic;
    text-align: center;
    padding: 1rem 0;
    border-bottom: none !important; /* Override dashed border */
}

.receipt-divider {
    border: none;
    border-top: 2px solid #ccc;
    margin: 1rem 0;
}

.receipt-total-section {
    margin-top: 1rem;
}

.receipt-total {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: right;
    color: #dc3545; /* Highlight total */
}

.print-button {
    display: block;
    width: 100%;
    padding: 0.8rem;
    margin-top: 1.5rem;
    background-color: #4b6cb7;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.print-button:hover {
    background-color: #182848;
}

/* Footer */
.footer {
    text-align: center;
    padding: 1.5rem 1rem; /* More padding */
    margin-top: auto; /* Push footer to bottom */
    font-size: 0.9rem;
    color: #666;
    background-color: #e9ecef; /* Light background for footer */
    width: 100%;
}

/* Alert Message Styling (Temporary) */
.alert-message {
    color: #dc3545 !important; /* Red, use important to override */
    font-weight: bold;
}

/* Responsive Adjustments */
@media (max-width: 1024px) { /* Stack sidebar below items */
    .main-wrapper {
        flex-direction: column;
        align-items: center; /* Center items */
        width: 95%;
    }

    .app-container {
       width: 100%; /* Take full width when stacked */
       max-width: 1000px; /* Optional: Limit width even when stacked */
    }

    .ads-sidebar {
        width: 90%; /* Make ads wider when stacked */
        max-width: 600px; /* Limit ad width */
        margin-top: 1.5rem; /* Add space above ads when stacked */
        padding-top: 0;
    }
}


@media (max-width: 768px) {
    .header h1 {
        font-size: 2rem;
    }
    .app-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Smaller items */
        padding: 1rem;
        gap: 1rem;
    }
    .element {
        padding: 1rem;
    }
    .element img {
        height: 150px;
    }
    .controls-container, .receipt-area {
        width: 95%;
        padding: 1rem;
    }
    #billionaire-select {
        font-size: 0.9rem;
    }
    .btn-buy, .btn-sell {
        padding: 0.5rem 0.8rem;
        flex-basis: 35%; /* Adjust button basis */
    }
    .buyAndSellContainer span {
        padding: 0 0.3rem; /* Reduce padding around number */
    }

    /* Further adjust stacked ad sidebar if needed */
    .ads-sidebar {
        width: 95%;
    }
}

/* Print Media Query */
@media print {
  body {
    background-color: #fff; /* Ensure white background for printing */
  }
  body * {
    visibility: hidden; /* Hide everything by default */
    box-shadow: none !important;
    border: none !important;
    color: #000 !important; /* Black text for printing */
  }

  /* Make only the receipt area visible */
  #receipt-container, #receipt-container * {
    visibility: visible;
  }

  #receipt-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 100%; /* Ensure it uses full width */
    margin: 0;
    padding: 20px; /* Add padding for print margins */
    box-shadow: none;
    border: none;
    border-top: none; /* Remove yellow border for print */
    background: #fff; /* Ensure white background */
  }

  /* Ensure receipt items display correctly */
   #receipt-items p {
      display: block; /* Stack elements within paragraph if needed */
      border-bottom: 1px dashed #ccc !important; /* Ensure borders print */
   }
   #receipt-items p span {
       display: inline-block; /* Allow spans side-by-side */
       padding: 2px 0;
   }
   #receipt-items p span:last-child {
       float: right; /* Align price to the right */
   }


  .receipt-title {
    text-align: center;
    font-size: 1.5rem; /* Adjust font size */
  }
  .receipt-total {
      text-align: right;
      font-size: 1.1rem;
      font-weight: bold;
  }
  .receipt-divider {
       border-top: 1px solid #ccc !important; /* Ensure divider prints */
       margin: 0.5rem 0;
   }

  /* Explicitly hide elements we don't want printed */
  .print-button, .ads-sidebar, .header, .controls-container, .footer, .main-wrapper {
      display: none !important; /* Use important to override other styles */
      visibility: hidden !important;
  }
}