/* fqp-ui.css */
/* All comments are in English for clarity */

/* Root variables */
    :root {
    --gold: #e7a726;
    --black: #000000;
    --white: #ffffff;
    --border-width: 2px;
    --banner-height: 48px;
    --intro-title-size: 62px;
    }
/* Global reset */
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body, html {
    width: 100%;
    height: 100%;
    font-family: 'Bahnschrift SemiLight', sans-serif;
    }
/* Global Container of the page*/
    .ui-container {
    position: relative;
    width: 1024px;               /* Fixed width */
    margin: 0 auto;              /* Centered horizontally */
    background: url('../images/gimp-fqp-background.png') center/contain no-repeat;
    background-color: black;     /* Fallback background */
    min-height: 100vh;
    overflow-x: hidden;
    }
/* Top Banner overlay */
    .ui-banner {
    background-color: rgba(231, 167, 38, 0.5); /* #e7a726 at 50% opacity */
    height: var(--banner-height);
    width: 100%;
    border-bottom: var(--border-width) solid var(--gold);
    position: relative;
    mix-blend-mode:overlay;
    z-index: 3;
    }
/* Separator lines: three 2px lines in yellow, black, white */
    .ui-separator-lines {
    width: 100%;
    display: flex;
    flex-direction: column;
    z-index: 3;
    }
    .ui-separator-lines .sep {
    height: var(--border-width); /* 2px as defined in your variables */
    width: 100%;
    background-color: var(--gold); /* actual color overridden by blend */
    mix-blend-mode:overlay;
    }
    .sep.yellow { 
    background-color: rgba(231, 167, 38, 0.8); /* #e7a726 at 50% opacity */
    }
    .sep.black {  
    background-color: rgba(0, 0, 0, 0.8);      /* Black at 50% opacity */
    }
    .sep.white {  
    background-color: rgba(255, 255, 255, 0.8);  /* White at 50% opacity */
    }
/* Intro Section */
    .ui-intro {
    display: flex;
    padding: 20px 56px;
    z-index: 3;
    }
    .welcome-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 20%;
    }
    .welcome-title {
    font-family: 'Source Code Pro', monospace;
    font-weight: bold;
    font-size: var(--intro-title-size);
    color: var(--gold);
    line-height: 1.1;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    }
    .story-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .summary-box {
    display: inline-block;           /* shrink‑wrap to content */
    vertical-align: top;
    background-color: rgba(245, 195, 29, 0.3);
    padding: 20px;
    mix-blend-mode: luminosity;
    border: var(--border-width) solid var(--gold);
    border-radius: 10px;
    font-family: 'Bahnschrift SemiLight', sans-serif;
    font-size:medium;
    color: #000;
    word-wrap: break-word;
    }
/* Images and Stats Section */
.ui-images-stats {
  display: flex;     
  align-items: flex-start;      /* aligne tout en haut */      
  /* vertical-align: top;*/
  padding: 24px 56px;
  gap: 10px;
}
.ui-images {
  flex: 1;
  display: flex;
  gap: 10px;
}
.image-box {
  width: 232px;
  height: 232px;
  border: var(--border-width) solid var(--gold);
  border-radius: 25%;
  background: linear-gradient(to top left, #131103, var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-box img {
  width: 95%;
  height: 95%;
  object-fit: cover;

}
.ui-stats {
  width: 428px;
  height: 232px;
  overflow: hidden;             /* masque tout débordement */
  flex:1;
  display: flex;
  gap: 24px;
  display:flex;
  border: var(--border-width) solid var(--gold);
  border-radius: 10px;
  padding: 24px;
  background: linear-gradient(to top left,#0e0c00, #ffe313, var(--gold),#ffe313,var(--gold));
  align-items: center;
  align-content: center;
}
/* Flipdown clock scaling */
.flipdown {
  transform: scale(0.5);
  transform-origin: left;
  align-items: center;
}
.stats-info p {
  font-size: 1rem;
  margin: 4px 0;
}
.progress-bar {
  width: 60%;
  height: 20px;
  background-color: #ccc;
  border-radius: 10px;
  overflow: hidden;
}
.progress-fill {
  width: 0%;
  height: 100%;
  background-color: var(--gold);
  background: url('../images/Melting-Cheese.gif') repeat-x;
  animation: bubble 2s infinite;
}
@keyframes bubble {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.05); }
}
.progress-percent {
  font-size: 1rem;
}
/* Purchase Section */
.ui-purchase {
  display: flex;           
  vertical-align: top;
  padding: 24px 56px;
  gap: 10px;
  z-index: 3;
}
.purchase-left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: left;
}
.buy-fomo-box {
  width: 324px;
  height: 324px;
  border: var(--border-width) solid var(--gold);
  border-radius: 10px;
  background: linear-gradient(to top left, #FFD700, var(--gold));
  display: flex;
  align-items: left;
  justify-content: center;
}
.buy-fomo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.purchase-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
  object-fit: cover;
}
.purchase-info {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border: var(--border-width) solid var(--gold);
  border-radius: 10px;
  font-family: 'Bahnschrift SemiLight', sans-serif;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.purchase-info p {
  margin: 4px 0;
}
/* Grid for ETH / BUY / FQP layout */
.purchase-grid {
  display: grid;
  grid-template-columns: auto 120px;    /* champ | bouton */
  grid-template-rows: auto auto;        /* ETH row | FQP row */
  align-items: center;
  gap: 8px 16px;                        /* espace ligne / colonne */
}

/* Placement explicite */
.purchase-grid .eth-field { grid-area: 1 / 1; }
.purchase-grid .fqp-field { grid-area: 2 / 1; }
/* Le bouton s'étend sur 2 lignes */
.purchase-grid .buy-cell {
  grid-area: 1 / 2 / span 2 / span 1;   /* from row1/col2 spanning 2 rows */
  display: flex;
  align-items: center;
}

/* Style du bouton */
.purchase-grid .buy-cell button {
  width: 100%;
  padding: 12px 0;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: var(--gold);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.purchase-grid .buy-cell button:hover {
  background-color: #ffb700;
}
.eth-field, .fqp-field {
  display: flex;
  align-items: center;
  gap: 10px;
}
.eth-field label, .fqp-field label {
  min-width: 100px;
}
.eth-field input, .fqp-field input {
  width: 150px;
  padding: 6px;
  border: var(--border-width) solid var(--gold);
  border-radius: 5px;
}
.buy-button-container {
  align-self: flex-end;
}
.buy-button-container button {
  background-color: var(--gold);
  color: #000;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.buy-button-container button:hover {
  background-color: #ffb700;
}
.fiat-equivalence {
  font-size: 1rem;
}

/* Toolbar with 5 buttons */
.ui-toolbar {
  display: flex;
  gap: 12px;
  padding: 20px 48px;
  z-index: 3;
}
.ui-toolbar button {
  background-color: var(--gold);
  color: #000;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
}
.ui-toolbar button:hover {
  background-color: #ffb700;
}
/* MetaMask button state */
.btn-metamask.disconnected {
  background-color: #74491c;
  color: #000000;
  border: var(--border-width) solid var(--gold);
}
.btn-metamask.connected {
  background-color: var(--gold);
  color: #000;
  border: none;
}

.wallet-info {
  font-size: 1rem;
}

/* End of CSS layout */