/* assets/css/notes.css */

/* layout wrappers */
.notes-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 16px 80px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #111;
    line-height: 1.4;
}

/* header block on landing page */
.notes-header-block {
    margin-bottom: 16px;
}

.notes-page-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #111;
}

.notes-page-sub {
    font-size: 14px;
    color: #555;
    margin-bottom: 12px;
}

/* search */
.notes-search-row {
    display: flex;
    margin-bottom: 16px;
}

.notes-search-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.notes-search-input:focus {
    border-color: #111;
}

/* currency grid on landing */
.currency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px,100%), 1fr));
    gap: 12px;
}

.currency-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border: 1px solid #eee;
    color: inherit;
    text-decoration: none;
}

.currency-card:active {
    background: #f4f4f4;
}

.currency-flag {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    margin-right: 12px;
}

.flag-circle {
    width: 44px;
    height: 44px;
    background-size: cover;
    background-position: center;
    background-color: #ddd;
    border-radius: 50%;
    border: 1px solid #ccc;
}

.currency-info {
    min-width: 0;
}

.currency-code {
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

.currency-name {
    font-size: 14px;
    color: #333;
    line-height: 1.3;
}

.currency-country {
    font-size: 12px;
    color: #777;
    line-height: 1.3;
    margin-top: 2px;
}

/* hero section on detail page */
.currency-hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 16px;
}

.hero-flag {
    width: 48px;
    height: 48px;
    background-size: cover;
    background-position: center;
    background-color: #ddd;
    border-radius: 50%;
    border: 1px solid #ccc;
    flex-shrink: 0;
    margin-right: 12px;
}

.hero-text {
    display: flex;
    flex-direction: column;
}

.hero-name {
    font-size: 18px;
    font-weight: 600;
    color: #111;
}

.hero-code {
    font-size: 14px;
    font-weight: 500;
    color: #555;
    margin-left: 4px;
}

.hero-country {
    font-size: 13px;
    color: #777;
}

/* pill tab bar */
.tab-bar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 3px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    gap: 8px;
}
.tab-bar::-webkit-scrollbar {
    display: none;
}

.tab-pill {
    flex-shrink: 0;
    border: 1px solid #ccc;
    background: #fff;
    color: #111;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.2;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}
.tab-pill.active {
    background: #111;
    border-color: #111;
    color: #fff;
}

/* tab sections */
.tab-section {
    display: none;
}
.tab-section.active {
    display: block;
}

/* denominations grid */
.denom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px,100%), 1fr));
    gap: 16px;
}

.denom-card {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border-radius: 12px;
    border: 1px solid #eee;
    padding: 12px;
    position: relative;
}

.denom-headline {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

.denom-value {
    font-size: 16px;
    font-weight: 600;
    color: #111;
    line-height: 1.2;
}

.denom-year {
    font-size: 12px;
    color: #777;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.denom-tag.retired {
    background: #ffe3e3;
    color: #a00;
    font-size: 11px;
    line-height: 1.2;
    padding: 3px 6px;
    border-radius: 6px;
    border: 1px solid #ffa0a0;
}

.note-flip-wrapper {
    width: 100%;
    aspect-ratio: 3 / 1;
    perspective: 1000px;
    margin-bottom: 8px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    background: #222;
}

/* disable long press/save behavior visually with overlay */
.protect-img {
    position: relative;
    user-select: none;
}

.img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    pointer-events: none;
}

.note-flip-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .5s;
    cursor: pointer;
}
.note-flip-inner.flipped {
    transform: rotateY(180deg);
}

.note-face {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    backface-visibility: hidden;
}
.note-front {
    background-image: var(--front-img);
}
.note-back {
    background-image: var(--back-img);
    transform: rotateY(180deg);
}

.denom-desc {
    font-size: 13px;
    color: #444;
    line-height: 1.4;
}

/* verify tips */
.verify-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.verify-item {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border-radius: 12px;
    border: 1px solid #eee;
    padding: 12px;
}
.verify-head {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    margin-bottom: 6px;
}
.verify-body {
    font-size: 13px;
    color: #444;
    line-height: 1.4;
    word-wrap: break-word;
}

/* facts + guide */
.section-title {
    font-size: 15px;
    font-weight: 600;
    color: #111;
    margin-bottom: 12px;
}

.facts-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.fact-row {
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border-radius: 12px;
    border: 1px solid #eee;
    padding: 12px;
}
.fact-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}
.fact-value {
    font-size: 13px;
    color: #222;
    line-height: 1.4;
    word-wrap: break-word;
}

.guide-block {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border-radius: 12px;
    border: 1px solid #eee;
    padding: 12px;
    margin-bottom: 16px;
}
.guide-title {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    margin-bottom: 6px;
}
.guide-body {
    font-size: 13px;
    color: #444;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

/* history */
.history-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.history-item {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border-radius: 12px;
    border: 1px solid #eee;
    padding: 12px;
}
.history-meta {
    font-size: 12px;
    color: #777;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}
.history-year {
    font-weight: 600;
    color: #111;
}
.history-type {
    background: #eef;
    color: #223;
    font-size: 11px;
    line-height: 1.2;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid #99a;
}
.history-headline {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    margin-bottom: 4px;
}
.history-body {
    font-size: 13px;
    color: #444;
    line-height: 1.4;
    word-break: break-word;
    white-space: pre-wrap;
}

/* buy card */
.buy-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    padding: 12px;
}
.buy-head {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    margin-bottom: 6px;
}
.buy-body {
    font-size: 13px;
    color: #444;
    line-height: 1.4;
}

/* generic empty state */
.empty-state {
    text-align: center;
    padding: 32px 12px;
    color: #888;
    font-size: 14px;
}
.empty-text {
    line-height: 1.4;
}

/* overlay to discourage copy/screenshot and right-click image saving */
.no-copy-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* basic responsive tweaks */
@media (min-width: 768px) {
    .notes-wrapper {
        padding: 24px 24px 96px;
    }
    .currency-grid {
        gap: 16px;
    }
    .denom-grid {
        gap: 20px;
    }
}









/* sticky tabs */
.tab-bar-sticky {
    position: sticky;
    top: 54px; /* adjust if your header height differs */
    z-index: 5;
    background: #fff;
    padding-top: 8px;
  }
  
  /* badges on tab pills */
  .tab-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    background: #eee;
    color: #333;
    border: 1px solid #ddd;
  }
  
  /* toolbars */
  .toolbar-row, .quickjump-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 8px 0 12px;
  }
  .toolbar-left, .toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .toolbar-label {
    font-size: 12px;
    color: #666;
  }
  .toolbar-select {
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
  }
  
  /* segmented buttons */
  .segmented {
    display: inline-flex;
    border: 1px solid #ccc;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
  }
  .seg-btn {
    font-size: 13px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .seg-btn + .seg-btn {
    border-left: 1px solid #ccc;
  }
  .seg-btn.active {
    background: #111;
    color: #fff;
  }
  
  /* reveal (IR/UV/front/back) */
  .reveal-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
  }
  .reveal-btn {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
  }
  .reveal-btn:active {
    background: #f1f1f1;
  }
  
  /* subtle focus outlines for a11y */
  .tab-pill:focus, .seg-btn:focus, .toolbar-select:focus, .reveal-btn:focus {
    outline: 2px solid #222;
    outline-offset: 1px;
  }
  
  /* prevent accidental drag of images (background-based already helps) */
  .protect-img, .note-face {
    -webkit-user-drag: none;
    user-drag: none;
    user-select: none;
  }
  

  .denom-card.flash {
    animation: flashFade .9s ease-out 1;
  }
  @keyframes flashFade {
    0% { box-shadow: 0 0 0 3px rgba(17,17,17,.25); }
    100% { box-shadow: 0 0 0 0 rgba(17,17,17,0); }
  }
/* top row: denom tools (left) + tabs (right) */
.topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 14px;
    flex-wrap: wrap;
  }
  .denom-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  /* prettier native select */
  .pretty-select {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .pretty-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 13px;
    padding: 8px 28px 8px 12px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
  }
  .pretty-select .ps-icon {
    position: absolute;
    right: 10px;
    pointer-events: none;
    font-size: 11px;
    color: #333;
  }
  
  /* compact tab bar on right */
  .tab-bar.compact {
    border-bottom: none;
    padding-bottom: 0;
    gap: 6px;
  }
  .tab-bar.compact .tab-pill {
    padding: 7px 10px;
    font-size: 12px;
  }
  
  /* minor polish */
  .denom-card.flash { animation: flashFade .9s ease-out 1; }
  @keyframes flashFade { 0%{box-shadow:0 0 0 3px rgba(17,17,17,.25);} 100%{box-shadow:0 0 0 0 rgba(17,17,17,0);} }
    

  /* ===== KapnoxForex blue palette ===== */
:root{
    --blue-1:#E4E7FF;
    --blue-2:#CDD2FF;
    --blue-3:#B7BEFF;
    --blue-4:#9AA2FF;
    --blue-5:#6F78FF;
    --blue-6:#0C0391;
  }
  
  /* Back to List */
  .notes-topnav{ margin-bottom:8px; }
  .back-btn{
    display:inline-block;background:transparent;color:#0C0391;text-decoration:none;
    font-size:12px;padding:2px 0;border-radius:20px;
  }
  .back-btn:hover{ text-decoration:underline; }
  
  /* ===== Top section (left info + right controls) ===== */
  .notes-topgrid{
    display:grid;grid-template-columns:minmax(280px,2fr) 3fr;gap:4px;align-items:start; margin-bottom: 10px;
  }
  /* * Change .nt-left to stack its children vertically 
 * (topnav on top, nt-info-row on bottom)
*/
.nt-left {
    display: flex;
    flex-direction: column; /* This is the key change */
    gap: 2px; /* This will create space between the topnav and the info-row */
}

/* * NEW class to put the flag and text side-by-side
 * (These are the styles you had on .nt-left before)
*/
.nt-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* * The rest of your CSS can stay the same
*/
.notes-topnav {
    margin-bottom: 2px; 
    /* You can remove margin-bottom if you like the 'gap' from .nt-left */
}

.back-btn {
    display: inline-block;
    background: transparent;
    color: #0C0391;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    padding: 2px 0;
    border-radius: 20px;
}
.back-btn:hover { text-decoration: underline; }

.nt-flag {
    width: 55px;
    height: 36px;
    border-radius: 10%;
    background-size: cover;
    background-position: center;
    border: 2px solid var(--blue-2);
}
.nt-name { font-size: 18px; font-weight: 600; color: #111; }
.nt-code { font-size: 13px; color: #666; margin-left: 6px; }
.nt-country { font-size: 13px; color: #666; margin-top: 2px; }
  
  .nt-right{ display:flex;flex-direction:column;gap:10px; }
  .pills-row{ display:flex;flex-wrap:wrap;gap:8px; }
  
  /* Tabs (pills) */
  .tab-bar.pills-row{ border:0;padding:0; }
  .tab-pill{
    background:#fff;border:1px solid var(--blue-2);color:#0C0391;
    border-radius:24px;padding:7px 12px;font-size:12px;cursor:pointer;
  }
  .tab-pill.active{ background:var(--blue-6);border-color:var(--blue-6);color:#fff; }
  .tab-badge{
    margin-left:6px;font-size:11px;padding:2px 6px;border-radius:999px;
    background:var(--blue-1);border:1px solid var(--blue-3);color:#0C0391;
  }
  
  /* Segmented (Circulating/All) */
  .denbar .segmented{
    display:inline-flex;border:1px solid var(--blue-3);border-radius:999px;overflow:hidden;background:#fff;
  }
  .denbar .seg-btn{
    font-size:13px;padding:8px 12px;border:0;background:transparent;color:#0C0391;cursor:pointer;
  }
  .denbar .seg-btn + .seg-btn{ border-left:1px solid var(--blue-3); }
  .denbar .seg-btn.active{ background:var(--blue-6);color:#fff; }
  
  /* Pretty selects */
  .pretty-select{ position:relative;display:inline-flex;align-items:center; }
  .pretty-select select{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    font-size:13px;padding:8px 28px 8px 12px;border:1px solid var(--blue-3);
    border-radius:10px;background:#fff;color:#111;cursor:pointer;
  }
  .pretty-select .ps-icon{ position:absolute;right:10px;font-size:11px;color:#333;pointer-events:none; }
  
  /* ===== Denomination cards (vertical flow) ===== */
  .denom-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));gap:18px; }
  .denom-card{
    background:#fff;border:1px solid var(--blue-3);border-radius:14px;
    box-shadow:0 4px 14px rgba(12,3,145,.08);padding:14px;
  }
  .denom-card:hover{ box-shadow:0 6px 18px rgba(12,3,145,.12); }
  
  /* Card header */
  .den-hdr{ display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px; }
  .denom-value{ font-size:19px;font-weight:700;color:var(--blue-6); }
  .denom-year{ font-size:13px;color:#444;margin-top:4px; }
  .denom-tag.retired{
    margin-left:8px;background:var(--blue-3);color:var(--blue-6);
    border:none;border-radius:6px;padding:2px 6px;font-size:11px;
  }
  
  /* Action bar inside card header (right) */
  .reveal-bar{ display:flex;gap:6px;flex-wrap:nowrap; }
  .reveal-btn{
    background:var(--blue-4);color:#fff;border:none;border-radius:6px;
    font-size:11px;padding:4px 8px;cursor:pointer;transition:background .2s;
  }
  .reveal-btn:hover{ background:var(--blue-5); }
  .reveal-btn:active{ background:var(--blue-6); }
  
  /* Centered image block (full width, proportional height) */
  .note-flip-wrapper.wide{
    width:100%;
    aspect-ratio: 2.3 / 1; /* banknote look; adjusts with width */
    border-radius:10px;
    background:var(--blue-1);
    margin:6px 0 10px 0;
    perspective:1000px;
    position:relative;overflow:hidden;
  }
  .note-flip-inner{ width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .5s;cursor:pointer; }
  .note-flip-inner.flipped{ transform:rotateY(180deg); }
  .note-face{ position:absolute;inset:0;background-size:contain;background-position:center;background-repeat:no-repeat;backface-visibility:hidden;background-color:transparent; }
  .note-back{ transform:rotateY(180deg); }
  
  /* Text below image */
  .denom-desc{ font-size:13.5px;color:#333; }
  
  /* Focus */
  .tab-pill:focus,.seg-btn:focus,.pretty-select select:focus,.reveal-btn:focus{ outline:2px solid var(--blue-6);outline-offset:1px; }
  
  /* Responsive topgrid */
  @media (max-width: 767px){
    .notes-topgrid{ grid-template-columns:1fr; }
  }
  /* --- right-aligned top bar with fixed width --- */
.nt-right {
  display:flex;
  justify-content:flex-end; /* push content to the right */
}
.nt-right-box {
  width:1005px;             /* as requested */
  max-width:1005px;
  margin-left:auto;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.nt-right-box .pills-row { justify-content:flex-end; } /* align rows to the right */

/* --- size controller --- */
.size-ctrl {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
}
.size-label { font-size:12px; color:#333; }
.size-ctrl input[type="range"] { width:140px; }
.size-val { font-size:12px; color:#0C0391; }

/* --- scalable cards via CSS var --- */
:root { --card-scale: 1; --card-min: 360px; }

.denom-grid {
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-min) * var(--card-scale)), 1fr));
  gap: calc(18px * var(--card-scale));
}

.denom-card { padding: calc(14px * var(--card-scale)); }

.denom-value { font-size: calc(19px * var(--card-scale)); }
.denom-year  { font-size: calc(13px * var(--card-scale)); }
.denom-desc  { font-size: calc(13.5px * var(--card-scale)); }

.note-flip-wrapper.wide {
  /* height scales automatically with width via aspect-ratio,
     but add margin that scales too */
  margin: calc(6px * var(--card-scale)) 0 calc(10px * var(--card-scale));
}

.reveal-btn {
  font-size: calc(11px * var(--card-scale));
  padding: calc(4px * var(--card-scale)) calc(8px * var(--card-scale));
}

/* Responsive: on very small screens, let top bar go full width */
@media (max-width: 3100px) {
  .nt-right-box { width:100%; max-width:100%; }
}

/* Hide denomination controls by default; shown when Denominations tab active */
.denbar {
    display: none;
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
  }
  .denbar.active {
    display: flex;
    opacity: 1;
  }