:root{
--primary: #58ACBC;        /* Jinni cuff blue */
--primary-dark: #3F8A97;   /* darker aqua for hover */

--danger: #F01581;         /* Jinni turban pink */
--danger-dark: #C8116A;    /* darker pink for hover */

--bg:#f7f7f7;
--text:#333
}

*{
box-sizing:border-box
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    margin: 0; /* important! remove auto-centering */
    padding: 0; /* remove space that pushes tabs down */
}

/* --- TOP TABS WRAPPER --- */
.top-tabs {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    position: relative;
    z-index: 10; /* tabs sit above content */
}

a.tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: normal;
    white-space: nowrap;
    text-decoration: none;
}

.tab-btn {
	min-height: 42px;
    padding: 10px 0;
    border: 1px solid #ccc;
    border-bottom: none;                /* tab sits on top edge */
    background: #E3E3E3;                /* inactive */
    color: #333;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px 10px 0 0;       /* browser tab shape */
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
	position: relative;
    z-index: 1;              /* base layer for all tabs */
	flex: 1;       /* each tab gets half of the container */
    display: inline-flex;     /* makes <a> behave like button size */
	align-items: center;
	justify-content: center;
    text-decoration: none;     /* removes default underline from links */
    box-sizing: border-box;
    line-height: normal;
    white-space: nowrap;
	box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    inset 0 -1px 0 rgba(255,255,255,0.6);
}

.tab-icon {
    width: 18px;                /* perfect Windows 11 tab size */
    height: 18px;
    margin-right: 8px;          /* spacing between icon and text */
    display: inline-block;
    object-fit: contain;        /* prevents distortion */
}

/* Active tab */
.tab-btn.active {
    background: #fff;
	border-color: #ccc;
    border-bottom: 1px solid #fff;      /* visually merges with content area */
	z-index: 3;              /* active tab sits above */

    0 2px 6px rgba(0,0,0,0.12),
    0 0 8px rgba(0,0,0,0.10),
    inset 0 -1px 0 rgba(255,255,255,1);
}

/* Hover effect ONLY for inactive tab */
.tab-btn:not(.active):hover {
    background: #f5f5f5;
    border-color: #C9C9C9;
}

/* Overlap borders so they look connected */
.top-tabs .tab-btn + .tab-btn {
    margin-left: -15px;
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .tab-btn {
        min-height: 42px;
        font-size: 0.95rem;
        padding: 8px 0;
    }
}

.page-container {
    max-width: 600px;
    margin: 20px auto;                 /* center the whole card */
    padding: 0;                         /* no inner padding – tabs go flush to top */
    background: #fff;                   /* white card */
    border-radius: 12px;                /* rounded corners for the whole page */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;                   /* tabs + content share same rounded edges */
}

/* Inner content area */
.container {
background: transparent;            /* card bg is now on .page-container */
padding: 20px 24px 20px;            /* inner spacing for content */
border-radius: 0;                   /* handled by .page-container */
box-shadow: none;                   /* handled by .page-container */
}

.tagline {
text-align: center;
margin: 0 0 6px;
font-size: 1rem;
font-weight: 700;
color: var(--primary);
letter-spacing: 0.02em;
}


h1{
text-align:center;
color:#2c3e50;
margin-top:0;
margin-bottom:6px
}

.subtitle{
text-align:center;
margin-top:0;
margin-bottom:24px;
color:#666;
font-size:.95rem
}

.coming-soon-wrapper {
    text-align: center;
    padding: 60px 20px;
    color: #444;
}

.coming-soon-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}

.coming-soon-subtitle {
    font-size: 1rem;
    opacity: 0.8;
}

label{
display:block;
margin-bottom:8px;
font-weight:700
}

input[type="text"],
input[type="number"],
input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  box-sizing: border-box;
}

textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  min-height: 200px;   /* makes it taller */
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
}

.field{
margin-bottom:16px
}

.bulkgen-p {
  text-align: center;
  font-size: 0.8rem;
}

button{
background-color:var(--primary);
color:#fff;
border:none;
padding:12px 20px;
font-size:16px;
font-weight:600;
border-radius:6px;
cursor:pointer;
width:100%;
margin-bottom:12px;
transition:background-color .15s ease,transform .05s ease
}

button:hover{
background-color:var(--primary-dark)
}

#qrcode{
text-align:center;
margin:20px 0 12px;
min-height:240px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center
}

#qrOutput{
  min-height: 220px;
}

#placeholderWrapper{
text-align:center
}

#placeholderLogo{
width:160px;
height:auto;
aspect-ratio:260/250;
opacity:.85
}

/* @font-face{
font-family:'Finger Paint';
font-style:normal;
font-weight:400;
font-display:swap;
src:url(fonts/FingerPaint-Regular.ttf) format("truetype")
} */

.placeholder-text{
font-family:inherit;
/* font-family:'Finger Paint',cursive;  */
font-style:normal;
font-size:1.2rem;
font-weight:700;
color: var(--primary);
letter-spacing:.08em
}

.logo-center {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}

#qrOutput canvas,#qrOutput svg{
display:block;
border:1px solid #ddd;
border-radius:8px
}


#downloadWrapper,
#shareWrapper {
    width: 100%;
    margin: 20px auto;  /* centers them */
	display:none
}

.download {
    text-align: center;
    margin-top: 12px;
}

.download-label {
    display: block;
    font-size: 1rem;
    color: #555;
    margin-bottom: 8px;
}

.download-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Updated to match "format-select" appearance */
.download-btn {
    display: inline-block;
    padding: 8px 20px;
    height: 38px;                 /* align with format-select */
    border: 1px solid var(--primary);
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
	flex: 1 1 0;     /* both buttons expand equally */
    width: 100%;     /* ensures full fill */

    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    text-decoration: none;
	min-width: 130px;
    cursor: pointer;
}

/* Hover/focus highlight like .format-select */
.download-btn:hover,
.download-btn:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(88, 172, 188, 0.2);
    text-decoration: none;
}

/* keep them inline, just tweak spacing on small screens */
@media (max-width: 640px){
    .download-buttons {
        gap: 10px;
    }

    .download-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
        margin: 0; /* stay in one line, no vertical margin */
    }
}

.share {
    text-align: center;
    margin-top: 12px;
}

.share-label {
    display: block;
    font-size: 1rem;
    color: #555;
    margin-bottom: 8px;
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: nowrap;
}

.share-btn {
    display: inline-block;
    padding: 8px 5px;
    height: 38px;
    border: 1px solid var(--primary);
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;

    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    min-width: 120px;
	flex: 0 1 auto;
    cursor: pointer;
}

.share-btn:hover,
.share-btn:focus {
	background: none;
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(88, 172, 188, 0.2);
    text-decoration: none;
}

.share-status {
    margin-top: 6px;
    font-size: .85rem;
    color: #777;
    min-height: 1.1em;
}

@media (max-width: 640px){
    .share-buttons {
        gap: 10px;
    }

    .share-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
        margin: 0;
    }
}

#clear{
background-color:var(--danger)
}

#clear:hover{
background-color:var(--danger-dark)
}

.status{
text-align:center;
font-size:.9rem;
color:#777;
min-height:1.2em;
margin-bottom:10px
}

#bulkStatus {
    margin-top: 12px;
}

.site-footer{
  max-width:600px;
  margin:0 auto;
  padding:16px 20px 24px;
  font-size:.85rem;
  color:#777;
}

.footer-top{
  border-top:1px solid #e1e1e1;
  padding-top:16px;
  margin-top:8px;
}

.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-bottom:6px;
  gap:4px;
}


.footer-logo-text{
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.85rem;
  color:#2c3e50;
}

.footer-tagline{
  font-size:.85rem;
  color:#555;
}

.footer-features{
  margin:0;
  line-height:1.4;
  text-align:center;
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
}

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-top:12px;
}

.footer-nav{
  width:100%;
  display:flex;
  justify-content:center;   /* center horizontally */
  align-items:center;
  gap:10px;                  /* spacing between links/separators */
  margin:8px 0 4px;          /* spacing above/below */
}

.footer-link{
  text-decoration:none;
  color:var(--primary);
  font-size:1.05rem;
  font-weight:600;
}

.footer-link:hover,
.footer-link:focus{
  text-decoration:underline;
  color:var(--primary-dark);
}

.footer-separator{
  color:#aaa;
  font-size:1.05rem;
}

.footer-copy{
  margin:0;
  color:#999;
  font-size:.8rem;
}

@media (max-width: 640px){
  .site-footer{
    padding:16px 16px 24px;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-nav {
    gap: 4px;   /* reduce spacing between footer links */
  }
}

@media (max-width: 640px) {

    .tagline {
        font-size: 0.9rem;    /* smaller tagline */
    }

    h1 {
        font-size: 1.4rem;    /* smaller headline */
        line-height: 1.2;
    }

    .subtitle {
        font-size: 0.85rem;   /* reduce subtitle size */
        line-height: 1.3;
    }

}

/* ------ Contact form success/error page styling ------ */

.system-message {
  max-width: 600px;
  margin: 40px auto;
  padding: 28px;
  border-radius: 16px;
  text-align: center;
}

.system-success {
  background: #eefdf3;
  border: 1px solid #c4f1d1;
}

.system-error {
  background: #fde8e8;
  border: 1px solid #f8c7c7;
}

.system-message h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.5rem;
  color: #2f855a;
  font-weight: 700;
}

.system-message-text {
  font-size: 1rem;
  margin-bottom: 24px;
  color: #2f855a;
}

.system-message-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Button-like links */

.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--primary-dark);
}

.btn-secondary {
  background: #e8e8e8;
  color: #333;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: #d5d5d5;
}

/* Honeypot field: hidden from normal users, still present in DOM for bots */
.honey-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* ---------- QRJINNI FAQ page styles ---------- */

.faq-intro {
  text-align: left;
  margin-bottom: 24px;
  color: #555;
  font-size: 0.95rem;
  line-height: 1.5;
}

.faq-section-title {
  font-size: 1.1rem;
  margin: 18px 0 8px;
  color: var(--primary);
}

.faq-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-item {
  border-radius: 8px;
  border: 1px solid #e1e1e1;
  background: #fafafa;
  margin-bottom: 10px;
  overflow: hidden;
}

.faq-item details {
  display: block;
}

.faq-item summary {
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #2c3e50;
  list-style: none;
}

.faq-item[open] summary {
  background: #f0f6fc;
  border-bottom: 1px solid #e1e1e1;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "▾";
  float: right;
  font-size: 0.75rem;
  opacity: 0.7;
  transition: transform 0.15s ease;
}

.faq-item[open] summary::after {
  transform: rotate(180deg);
}

.faq-item-content {
  padding: 10px 12px 12px;
  font-size: 0.9rem;
  color: #444;
  line-height: 1.5;
}

.faq-item-content p {
  margin: 0 0 6px;
}

.faq-item-content ul {
  margin: 0 0 6px 18px;
  padding: 0;
}

.faq-meta-note {
  font-size: 0.8rem;
  color: #888;
  margin-top: 12px;
}

.back-home {
  margin-top: 18px;
  text-align: center;
}

.back-home a {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--primary);
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.back-home a:hover,
.back-home a:focus {
  background: var(--primary);
  color: #fff;
  text-decoration: none;
}

.advanced-btn {
	margin-left: 40px;
    padding: 8px 14px;
    font-size: 0.85rem;
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap; /* keeps the button on one line */
}

.advanced-btn:hover,
.advanced-btn:focus {
    background: var(--primary);
    color: #fff;
}

/* Wrapper to make the color picker match input boxes */
.color-input-wrapper {
    width: 80px;                    /* same width as size box */
    height: 38px;                   /* adjust to match input height */
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* Make the native color picker fill the styled box */
.color-input-wrapper input[type="color"] {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    border: none;
    cursor: pointer;
    background: transparent;
    appearance: none;
}

/* Remove default browser styling */
.color-input-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    margin: 0;
}

.color-input-wrapper input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

/* Wrapper to position arrow like the logo choose-file input */
.dotstyle-wrapper {
    width: 70%;
    justify-self: end;         /* aligns with grid like logo input */
    position: relative;
}

.dotstyle-select {
    width: 100%;
    height: 38px;              /* same height as choose file */
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;

    padding: 0 36px 0 10px;    /* right padding to make space for arrow */
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;  /* hide default arrow */
}

/* Arrow on the right side */    
.dotstyle-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;      /* click passes through to the select */
    font-size: 0.8rem;
    color: #555;
    opacity: 0.65;
}

/* Hover / focus border matching other inputs */
.dotstyle-select:hover,
.dotstyle-select:focus {
    border-color: var(--primary);
    outline: none;
}

/* --- Format selector (match dot-style button) --- */
.format-wrapper {
    width: 100%;
    position: relative;
    justify-self: end;         /* match Advanced Panel layout */
}

/* Select: matches Dot Style behavior */
.format-select {
    width: 100%;
    height: 38px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;

    padding: 0 36px 0 10px;    /* space for arrow */
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}

/* Arrow — correctly anchored inside the select box */
.format-arrow {
    position: absolute;
    right: 12px;               /* keep inside the button */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 1rem;
    color: #555;
    opacity: 0.65;
}

/* Hover/focus border highlight — matching Dot Style exactly */
.format-select:hover,
.format-select:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(88, 172, 188, 0.2);
}

/* Logo file input: match size/color boxes */
.logo-input-wrapper {
    width: 100px;
    height: 38px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

/* Make the file input fill the styled box */
.logo-input-wrapper input[type="file"] {
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Add label overlay (fake button text) */
.logo-input-wrapper::after {
    content: "Choose file";
    position: absolute;
    font-size: 0.85rem;
	font-weight: 600;
    color: #555;
    pointer-events: none;
}

/* --- Advanced Panel --- */

.advanced-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;      /* center the text */
    position: relative;

    width: 100%;
    margin-top: 10px;
    margin-bottom: 12px;
    padding: 6px 16px;

    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;

    background-color: var(--bg);
    color: var(--text);
    border: 1px solid #ccc;
    border-radius: 6px;
    transition: background-color 0.22s ease, border-color 0.22s ease;
}

.advanced-toggle-btn:hover {
    background-color: #ededed;
    border-color: #bbb;
}

/* Icon stays right, does not affect centering */
.advanced-toggle-btn .icon {
    position: absolute;
    right: 16px;
    font-size: 0.8em;
    opacity: 0.75;
    transition: transform 0.3s ease;
}

/* When expanded, rotate caret */
.advanced-toggle-btn[aria-expanded="true"] .icon {
    transform: rotate(180deg);
}

/* --- Bulk generation inside Advanced Panel --- */

.bulk-frame {
    border: 1px solid var(--primary);      /* frame color */
    border-radius: 12px;         /* rounded corners */
    padding: 5px;               /* inner spacing */
    margin: 10px auto;           /* spacing above/below */
    max-width: 800px;            /* keep it nicely centered */
    background: #fff;            /* optional, keeps frame clean */
	box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.advanced-divider {
  grid-column: 1 / -1;
  border: 0;
  border-top: 1px solid #eee;
  margin: 8px 0 4px;
}

.bulk-generation-section {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 4px;
}

.bulk-generation-section h2 {
  text-align:center;
  font-size: 1rem;
  margin: 4px 0 6px;
  color: #2c3e50;
}

.bulk-generation-section p {
  text-align: center;
  font-size: 0.9rem;
  margin: 0 0 10px;
  color: #555;
}

/* Bulk format selector styling (with arrow, centered) */
.format-wrapper {
  width: 70%;                 /* same width as before */
  margin: 0 auto 4px;         /* center in bulk section */
  position: relative;         /* arrow will be positioned inside this */
}

.format-select {
  width: 100%;
  height: 38px;               /* match Dot style / logo input height */
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;

  padding: 0 36px 0 10px;     /* space on right for the arrow */
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
}

/* Arrow pinned to the right INSIDE the button */
.format-arrow {
  position: absolute;
  right: 12px;                /* inside the 70% width area */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 1rem;
  color: #555;
  opacity: 0.65;
}

/* Hover/focus border like Dot style selector */
.format-select:hover,
.format-select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(88, 172, 188, 0.2);
}

.hidden-file-input {
  display: none;
}

/* Your styled button */
.file-like-btn {
  appearance: none;
  -webkit-appearance: none;
  font-size: 0.9rem;
  padding: 6px 12px;
  border: 1px solid #ccc;
  background: #f8f8f8;
  border-radius: 4px;
  cursor: pointer;
  color: #444;
}

.file-like-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bulk-generation-section .bulk-desc {
  text-align: center;
  font-size: 0.8rem;
}

/* Bulk file selector – same look as logo-input-wrapper */
.bulk-file-input-wrapper {
    width: 70%;
    height: 38px;
	margin: 8px auto 0;
	
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    position: relative; /* required for ::after label */
}

/* File input fills styled box */
.bulk-file-input-wrapper input[type="file"] {
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Fake button label */
.bulk-file-input-wrapper::after {
    content: "Choose file";
    position: absolute;
    font-size: 0.85rem;
	font-weight: 600;
    color: #555;
    pointer-events: none;
}

/* Make the Generate ZIP button same size as the file input */
.bulk-generation-section .primary-btn {
  display: block;
  width: 70%;          /* same as #advancedPanel .logo-input-wrapper */
  height: 38px;        /* same as .logo-input-wrapper height */
  margin: 8px auto 0;  /* similar visual spacing + centered */

  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  font-size: 0.85rem;
  color: #555;
  cursor: pointer;
  box-sizing: border-box;
}

.bulk-generation-section .primary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Show/hide correctly */
#generateBulkBtn[hidden] {
  display: none;
}

/* Make the field inside bulk section look like other fields */
.bulk-generation-section .field {
  margin-bottom: 10px;
}

/* Collapsible Advanced Panel + 2-column grid (labels | controls) */
.advanced-panel {
    max-height: 600px;
    overflow: hidden;
    opacity: 1;
    margin-bottom: 12px;
    transition: max-height 0.32s ease, opacity 0.22s ease;

    display: grid;
    grid-template-columns: auto 1fr;  /* left: labels, right: controls */
    grid-auto-rows: auto;
    row-gap: 16px;
    column-gap: 22px;
    padding: 8px 0;
}

/* Collapsed state */
.advanced-panel.collapsed {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
}

/* Label styling */
#advancedPanel label {
    font-weight: 600;
    text-align: left;
    align-self: center;  /* vertically centered with its control */
}

/* Controls: fill the right column and align neatly */
#advancedPanel .size-control-group,
#advancedPanel input[type="file"],
#advancedPanel .logo-input-wrapper,
#advancedPanel .color-input-wrapper {
    width: 70%;
    align-self: center;
    justify-self: end;
}

/* --- Slider + Number combo for Size (px) --- */

.size-control-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;  /* so the number aligns under the slider’s right edge */
    gap: 6px;
}

/* Make the slider fill the group width */
.size-control-group #sizeSlider {
    width: 100%;
}

/* Make the number box compact as a value display */
.size-control-group #size {
    width: 90px;
    text-align: center;
    margin: 0;  /* override generic margin if any */
}

/* Make the Size slider match the --primary color */

#sizeSlider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #ddd;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

/* Track (WebKit: Chrome, Brave, Safari) */
#sizeSlider::-webkit-slider-runnable-track {
    height: 6px;
    background: var(--primary);
    border-radius: 4px;
}

/* Thumb (WebKit browsers) */
#sizeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 18px;
    width: 18px;
    background: var(--primary-dark);
    border-radius: 50%;
    cursor: pointer;
    margin-top: -6px; /* centers thumb vertically */
}

/* Firefox */
#sizeSlider::-moz-range-track {
    height: 6px;
    background: var(--primary);
    border-radius: 4px;
}

#sizeSlider::-moz-range-thumb {
    height: 18px;
    width: 18px;
    background: var(--primary-dark);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Optional: focus glow */
#sizeSlider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(52,152,219,0.3);
}

#sizeSlider:focus::-moz-range-thumb {
    box-shadow: 0 0 0 4px rgba(52,152,219,0.3);
}

/* Buy me a coffee button */
.buy-coffee-wrapper {
    text-align: center;
    margin-top: 16px;
}

.buy-coffee-link {
    display: inline-block;
    padding: 10px 18px;
    background: rgba(88, 172, 188, 0.12); /* soft primary tint */
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid var(--primary);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.buy-coffee-link:hover,
.buy-coffee-link:focus {
    background: rgba(88, 172, 188, 0.20); /* slightly stronger tint on hover */
    border-color: var(--primary-dark);
    color: var(--primary-dark);
}

/* ---- Donation Page Styles ---- */

.donation-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.donation-section h2 {
    margin-top: 0;
    color: var(--primary-dark);
}

.donation-helps {
    margin: 20px 0;
    padding-left: 18px;
    color: #555;
    line-height: 1.55;
}
.donation-helps li {
    margin-bottom: 10px;
}

.network-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.network-list li {
    margin-bottom: 20px;
    padding: 15px;
    background: var(--bg);
    border-radius: 6px;
    border-left: 4px solid var(--primary);
    word-break: break-all;
}

.network-list strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1.05rem;
}

.network-warning {
    color: var(--danger);
    font-weight: bold;
    text-align: center;
    padding: 15px;
    margin-bottom: 25px;
    border: 2px solid var(--danger);
    border-radius: 6px;
    background: #fff0f7;
}

.donation-intro {
    text-align: left;
    margin-bottom: 20px;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
}

.back-home-link {
    text-align: center;
    margin-top: 32px;
}

.back-home-link a {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.back-home-link a:hover,
.back-home-link a:focus {
    background: var(--primary);
    color: #fff;
}

/* Wallet rows */
.wallet-row {
    display: flex;
    align-items: center;
	justify-content: center;
    gap: 4px;
    margin-top: 6px;
}

/* Address text */
.wallet-address {
    font-size: 1rem;
    user-select: all;
    background: #f4f4f4;
    padding: 4px 6px;
    border-radius: 4px;
}

/* Copy button */
.copy-btn {
    display: flex;
	margin-top: 10px; 
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--primary);
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.copy-btn:hover,
.copy-btn:focus {
    background: var(--primary);
    border-color: var(--primary-dark);
}

.copy-btn:hover .copy-icon,
.copy-btn:focus .copy-icon {
    fill: #fff;
}

/* Icon */
.copy-icon {
    width: 16px;
    height: 16px;
    fill: var(--primary);
    transition: fill 0.15s ease;
}

/* Copied feedback */
.copy-btn.copied {
    background: var(--primary);
    border-color: var(--primary-dark);
}

.copy-btn.copied .copy-icon {
    fill: #fff;
}