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

body {
  font-family: 'Poppins', Arial, sans-serif;
  line-height: 1.6;
  background-color: #493C2B; /* earthy brown */
  color: #F5DEB3; /* light parchment text */
  padding: 24px;
}

h1,h2,h3,h4 { font-weight: bold; color: #FFF8DC; }

/* ===== Header & Navigation ===== */
header { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 12px; 
  flex-wrap: wrap; 
  margin-bottom: 24px; 
}

.brand { display: flex; align-items: center; gap: 12px; }

.logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg,#D4AF37,#F5DEB3); /* optional */
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}



nav { display: flex; gap: 12px; align-items: center; }
nav a { 
  padding: 8px 12px; 
  border-radius: 6px; 
  text-decoration: none; 
  font-weight: 600; 
  color: #F5DEB3; 
}
nav a:hover { 
  background-color: #D4AF37; 
  color: #493C2B; 
}

/* ===== Support Me Button ===== */
.tooltip-btn {
  background-color: #D4AF37;
  color: #493C2B;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  position: relative;
}

.tooltip-text {
  visibility: hidden;
  width: 220px;
  background-color: #FFF8DC;
  color: #493C2B;
  text-align: center;
  border-radius: 6px;
  padding: 6px;
  position: absolute;
  z-index: 10000;
  top: -35px;
  right: 0;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.tooltip-btn:hover .tooltip-text {
  visibility: visible;
}

/* ===== PayPal Popup ===== */
.paypal-popup {
  display: none;
  position: absolute;
  top: 45px;
  right: 0;
  width: 300px;
  max-height: 400px;
  overflow-y: auto;
  background-color: #FFF8DC;
  border: 1px solid #D4AF37;
  border-radius: 8px;
  padding: 10px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ===== Donation Options ===== */
.donation-options {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  justify-content: center;
  align-items: center;
}

.donation-options button.donation-amount {
  background-color: #D4AF37;
  color: #493C2B;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.donation-options button.donation-amount.active,
.donation-options button.donation-amount:hover {
  background-color: #F5DEB3;
  color: #493C2B;
}

.donation-options input#don

/* ===== Hero Section ===== */
.hero-left h2 { color: #FFF8DC; margin-bottom: 10px; }
.hero-left p { color: #FFF8DC; }
.badge { 
  background-color: #D4AF37; 
  color: #493C2B; 
  padding: 4px 8px; 
  border-radius: 6px; 
  font-weight: 600; 
}

/* ===== Projects ===== */
.projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 12px; }
.card { 
  background-color: rgba(245, 222, 179, 0.1); 
  border-radius: 12px; 
  padding: 16px; 
  box-shadow: 0 6px 20px rgba(0,0,0,0.2); 
  transition: transform 0.2s ease, box-shadow 0.2s ease; 
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
.card h3 { margin-bottom: 6px; color: #FFF8DC; }
.card p { color: #F5DEB3; font-size: 14px; }
.btn { 
  display: inline-block; 
  background-color: #D4AF37; 
  color: #493C2B; 
  padding: 6px 12px; 
  margin-top: 10px; 
  border-radius: 6px; 
  font-weight: 600; 
  text-decoration: none; 
}
.btn.ghost { background-color: transparent; border: 1px solid #F5DEB3; color: #F5DEB3; }

/* ===== About Panels ===== */
.panel { 
  background-color: rgba(245, 222, 179, 0.05); 
  padding: 16px; 
  border-radius: 12px; 
  margin-bottom: 12px; 
}
.panel h4 { color: #FFF8DC; margin-bottom: 8px; }
.panel p, .panel li { color: #F5DEB3; }

.about-wrapper { text-align: center; }
.about-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 12px;
  border: 2px solid #D4AF37;
  display: block;
}

/* ===== Contact Columns ===== */
.contact-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
.about-column, .contact-column { padding: 16px; }

/* ===== Contact Form ===== */
form input, form textarea, form button {
  background-color: rgba(245, 222, 179, 0.1);
  border: 1px solid #F5DEB3;
  color: #FFF8DC;
  padding: 10px;
  border-radius: 8px;
  width: 100%;
  margin-bottom: 10px;
}
form input::placeholder, form textarea::placeholder { color: #F5DEB3; }
.thumb {
  width: 200px;
  height: auto;
  border-radius: 5px;
  border: 2px solid #d2b48c;
  object-fit: contain;
}

/* ===== Footer ===== */
footer { margin-top: 24px; text-align: center; color: #F5DEB3; font-size: 13px; }

/* Flip Card Container fills its parent */
/* Flip card fills its parent .card */
.flip-card {
  width: 100%;            /* fill parent card width */
  height: 0;
  padding-top: 57.14%;    /* 192 / 336 = aspect ratio */
  perspective: 1000px;
  position: relative;
  margin: 10px 0;
}

.flip-card-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 1px solid #d2b48c;
  border-radius: 5px;
}

.flip-card-front img,
.flip-card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* ===== Support Me Tooltip & PayPal ===== */
.tooltip-btn {
  background-color: #D4AF37;
  color: #493C2B;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  position: relative;
}

.tooltip-text {
  visibility: hidden;
  width: 220px;
  background-color: #FFF8DC;
  color: #493C2B;
  text-align: center;
  border-radius: 6px;
  padding: 6px;
  position: absolute;
  z-index: 10000;
  top: -35px;
  right: 0;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.tooltip-btn:hover .tooltip-text { visibility: visible; }

.paypal-popup {
  display: none;
  position: absolute;
  top: 45px;
  right: 0;
  width: 300px;
  max-height: 400px;
  overflow-y: auto;
  background-color: #FFF8DC;
  border: 1px solid #D4AF37;
  border-radius: 8px;
  padding: 10px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ===== Responsive ===== */
@media (max-width: 720px) {
  nav { display: none; width: 100%; margin-top: 12px; flex-direction: column; }
  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .brand { width: 100%; gap: 8px; }
  .logo img { width: 50px; height: 50px; border-radius: 8px; }
  #supportBtn, .tooltip-btn { width: 100%; text-align: center; }
  .paypal-popup { position: fixed; bottom: 20px; right: 20px; top: auto; width: 90%; max-width: 320px; }
  .contact-columns { grid-template-columns: 1fr; }
  nav { display: flex; flex-wrap: wrap; gap: 6px; }
}




paypal.Buttons({
  style: {
    layout: 'vertical',
    color: 'gold',
    shape: 'rect',
    label: 'paypal',
    height: 40
  },
  commit: true, // removes the “By continuing…” message
  createOrder: (data, actions) => {
    const amountInput = document.getElementById('donate-custom');
    let value = document.getElementById('donate-5').classList.contains('active') ? '5' : amountInput.value || '5';
    return actions.order.create({
      purchase_units: [{ amount: { value: value }, description: 'Support Payment' }]
    });
  },
  onApprove: (data, actions) => actions.order.capture().then(details => {
    alert('Thank you for your support, ' + details.payer.name.given_name);
    document.getElementById('paypalPopup').style.display = 'none';
  }),
  onError: (err) => {
    console.error(err);
    alert('Payment could not be processed. Try again.');
  }
}).render('#paypal-button-small');