/* ==========================================================================
   FURLDERS – Site layout & page sections (pairs with ui.css tokens)
   ========================================================================== */

/* --- Base / layout ------------------------------------------------------- */
html, body { height: 100%; margin: 0; }
body{
  min-height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #8686AC;              /* site purple */
  color: #F2F2F2;
  font-family: 'Poppins', sans-serif;
}
#page-content{ flex: 1; }

/* Offset below fixed header (header-init.js updates --header-h) */
:root { --header-h: 72px; }
main.page-container,
#page-content{
  padding-top: calc(var(--header-h) + 8px);
}

/* Small misc utilities */
.maindiv{ width:100%; flex:1; overflow:visible; }
.maindiv img{ max-width:100%; height:auto; }
.btn{ margin-left: 5px; }

/* Section rhythm */
:root { --section-pad: clamp(2rem, 4vw, 4rem); }
.maindivs{ padding-block: var(--section-pad); }
.vh-section{ min-height: min(92vh, 900px); display:flex; align-items:center; }

/* Full-bleed band helper (edge-to-edge rows like hero/CTA) */
.full-bleed{
  position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw; width:100vw;
}
.full-bleed > .container,
.full-bleed > .container-fluid{ padding-inline: 1rem; }

/* --- Header / Navbar ----------------------------------------------------- */
#headerdiv .navbar{
  background:#8686AC;
  padding-block:.6rem;
  min-height:72px;
  border-bottom:1px solid rgba(255,255,255,.25);
}
#headerdiv .brand-logo{ height:56px; width:auto; }
@media (min-width: 992px){ #headerdiv .brand-logo{ height:64px; } }

#headerdiv .navbar-nav{ gap:.6rem; }
@media (min-width: 992px){ #headerdiv .navbar-nav{ gap:1rem; } }

#headerdiv .nav-link{
  color:#fff;
  font-weight:600;
  font-size:1.12rem;
  letter-spacing:.01em;
  padding-inline:.45rem;
  opacity:.95;
}
@media (min-width: 992px){
  #headerdiv .nav-link{ font-size:1.2rem; padding-inline:.6rem; }
}
#headerdiv .nav-link:hover, #headerdiv .nav-link:focus{ opacity:1; }

#headerdiv .header-search,
#headerdiv .btn-header{
  height:46px;
  border-radius:18px;             /* matches ui.css header radius */
}
#headerdiv .header-search{
  background:#fff; color:#333; font-size:1.05rem;
  border:1px solid rgba(255,255,255,.55);
  padding-inline:.9rem;
  width: clamp(260px, 28vw, 320px);
}
#headerdiv .header-search::placeholder{ color:#767676; }
#headerdiv .header-search:focus{
  border-color:#fff;
  box-shadow:0 0 0 .2rem rgba(255,255,255,.25);
}
#headerdiv .btn-header{
  font-weight:700; line-height:1.2; padding:.5rem 1rem;
  background:transparent; color:#fff; border:2px solid rgba(255,255,255,.9);
}
#headerdiv .btn-header--black{
  background:#fff; color:#111; border-color:#111;
}
#headerdiv .btn-header--black:hover{ background:#f4f4f4; border-color:#000; }
#headerdiv .btn-header--ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
#headerdiv .navbar-toggler{ border-color:rgba(255,255,255,.6); }
#headerdiv .navbar-toggler-icon{ filter: invert(1) grayscale(1); }
#headerdiv .search-wrap{ gap:.6rem; }
@media (min-width: 992px){ #headerdiv .search-wrap{ gap:.8rem; } }

/* Optional sign-in button variant that keeps text perfectly centered */
#headerdiv .btn-header--signin{
  height:52px; padding:0 20px; border-radius:18px;
  background:#fff; color:#EC399F; border:2px solid #EC399F;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.05rem; white-space:nowrap; min-width:168px;
}
#headerdiv .btn-header--signin:hover{ background:#f4f4f4; border-color:#000; }
@media (max-width: 576px){ #headerdiv .btn-header--signin{ white-space:normal; line-height:1.15; } }

/* --- Section backgrounds ------------------------------------------------- */
#firstdiv  { background:#423182; }
#seconddiv { background:#505081; }
#thirddiv  { background:#0F0E47; }
#fourthdiv { background:#272757; }

#firstdiv, #seconddiv, #thirddiv, #fourthdiv{
  border:0; height:auto; width:100%;
}

/* --- HERO (firstdiv) ----------------------------------------------------- */
#firstdiv{ margin-top:0 !important; padding-block: var(--section-pad); }
#firstdiv .row{ align-items:center; }

#divonetextbox, #divoneimgbox{ width:auto; height:auto; margin:0; text-align:inherit; }
#divoneimgbox img{ display:block; max-width:100%; height:auto; margin-inline:auto; }

#divonetextbox h1{
  font-family:'Dancing Script', cursive;
  font-weight:700;
  font-size: clamp(2.2rem, 5vw, 4rem);
  color:#FD3DB5;
}
#divonetextbox h3{
  font-weight:600;
  font-size: clamp(1.15rem, 2.2vw, 1.85rem);
  color:#FFB8DC;
}
@media (min-width: 992px){
  #firstdiv .col-lg-6{ flex:0 0 50%; max-width:50%; }
}

/* --- CTA band (below hero) ---------------------------------------------- */
.cta-band{
  background: rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding:.75rem 0;
  margin-top:8px;
  box-shadow: 0 -6px 12px rgba(0,0,0,.08) inset;
}
.cta{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:1rem 1.25rem; background:transparent; border:0; padding:0;
}
.cta-text{ justify-self:center; text-align:center; max-width:46ch; }
.cta h2{ color:#fff; margin-bottom:.25rem; }
.cta .text-muted{ color:rgba(255,255,255,.75) !important; }
.cta-actions{ display:flex; gap:.6rem; justify-content:center; }
@media (min-width: 992px){ .cta-actions{ justify-content:flex-end; } }
/* (Buttons here rely on global .btn-ghost / .btn-accent styles from ui.css) */

/* --- VALUE PROPS (seconddiv) -------------------------------------------- */
#seconddiv .subdiv1 .col-md-4{ text-align:center; padding-inline:1rem; }
#seconddiv .subdiv1 .h4{ color:#fff; font-weight:700; letter-spacing:.2px; margin-bottom:.25rem; }
#seconddiv .subdiv1 p{
  color: rgba(255,255,255,.85);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 40ch;
  margin: 0 auto;
}
#seconddiv .subdiv2{ margin-top:1rem !important; }
#seconddiv .subdiv2 .col-md-4{ display:flex; justify-content:center; }
#seconddiv .subdiv2 img{
  max-width:100%; height:auto; border-radius:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.12); background:#fff;
}

/* --- ACTIVITY (fourthdiv) ----------------------------------------------- */
#fourthdiv{ margin-top:0; padding-block: var(--section-pad); }
#divfourtextbox{ width:auto; height:auto; margin:0; text-align:center; padding-inline:1rem; }
@media (min-width: 992px){ #divfourtextbox{ text-align:left; } }
#fourthdiv .h4{ color:#fff; font-weight:700; letter-spacing:.2px; margin-bottom:.4rem; }
#fourthdiv p{
  color: rgba(255,255,255,.88);
  font-size: 1.06rem; line-height:1.7; max-width:48ch; margin:0;
}
#divfourimgbox{
  width:auto; height:auto; margin:0;
  display:flex; justify-content:center;
}
#divfourimgbox img{
  display:block; width:auto; height:auto;
  max-width: clamp(760px, 52vw, 980px);
  border-radius:12px; box-shadow:0 6px 22px rgba(0,0,0,.18);
}
@media (min-width: 1200px){
  #divfourimgbox{ justify-content:flex-end; }
  #divfourimgbox img{ max-width: clamp(820px, 56vw, 1100px); }
}

/* --- Page titles (shared pattern) --------------------------------------- */
.page-head{ margin:6px 0 14px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.page-title{
  text-align:center; margin:.9rem 0 1.1rem; color:#fff; font-weight:800;
  line-height:1.15; font-size: clamp(22px, 3.2vw, 40px);
}
.page-title::after{
  content:""; display:block; width:72px; height:3px; border-radius:3px;
  margin:.5rem auto 0;
  background: linear-gradient(180deg, var(--brand, #FE4FB4), var(--brand-600, #EC399F));
}
.page-subtitle{ color:rgba(255,255,255,.85); margin-top:.35rem; font-size:.98rem; }
#page-content .page-title{ margin-top: clamp(10px, 2vw, 32px) !important; }
#page-content > .container:first-child{ padding-top: 6px; }

/* --- Footer (accordion) -------------------------------------------------- */
:root { --accent-pink: #FFB8DC; --footer-pad-y: clamp(14px, 2.2vw, 22px); }

.site-footer{
  background:#8686AC;
  color:#111;
  border-top:1px solid rgba(255,255,255,.25);
  margin-top:0 !important; margin-bottom:0 !important;
  padding-block: var(--footer-pad-y);
  padding-inline: 0;
}
.site-footer > .container-fluid{ padding-inline: clamp(8px,1vw,16px); }
.site-footer .accordion,
.site-footer .accordion-item{ margin:0; }

.footer-accordion .accordion-item{
  background:transparent;
  border:1px solid rgba(255,255,255,.28);
  border-radius:.75rem;
  overflow:hidden;
}
.footer-accordion .footer-toggle{
  background: rgba(255,255,255,.10) !important;
  color:#fff !important;
  border-radius:.75rem;
  padding: clamp(12px,1.8vw,18px) clamp(16px,2.2vw,24px);
  font-size: clamp(1.1rem, 1vw + 1rem, 1.35rem);
  line-height:1.2;
}
.footer-accordion .footer-toggle:not(.collapsed){
  background: rgba(255,255,255,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
}
.footer-accordion .footer-toggle::after{ filter: invert(1) opacity(.85); }
.footer-accordion .accordion-body{
  background:transparent; color:#111;
  padding: var(--footer-pad-y) clamp(16px,2.2vw,24px);
}

.site-footer h6{ color:#111; font-weight:600; }
.footer-links a{ color:#111; text-decoration:none; }
.footer-links a:hover{ border-bottom:2px solid var(--accent-pink); padding-bottom:1px; }
.footer-logo{ height:56px; width:auto; display:block; image-rendering:-webkit-optimize-contrast; }
.site-footer p:last-child{ margin-bottom:0; }

/* --- Cards/images safety (in case older CSS tries to overlay) ----------- */
.folder-card img,
.card img{
  display:block; width:100%; height:auto; position:relative; z-index:2;
  opacity:1; visibility:visible; filter:none; mix-blend-mode:normal;
}
.card::before, .card::after,
.folder-card::before, .folder-card::after{ content:none !important; }

/* --- Link action button spacing ---------------------------------------- */
.link-actions .btn{ margin-right:.25rem; }
.link-actions .btn:last-child{ margin-right:0; }

/* === Header highlight (final) ======================================= */
#headerdiv .navbar-nav > .nav-item > .nav-link:hover {
  color: var(--furlders-pink, #FFB8DC) !important;
  text-decoration-line: underline !important;
  text-decoration-color: var(--furlders-pink, #FFB8DC) !important;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.25em;
}

#headerdiv .navbar-nav > .nav-item > .nav-link.active {
  color: var(--furlders-pink, #FFB8DC) !important;
}

/* Don’t force the dropdown label pink by default */
#headerdiv .nav-link.dropdown-toggle { color: #fff !important; border-bottom: none !important; }

/* Hover underline */
#headerdiv .navbar-nav > .nav-item > .nav-link:hover {
  color: var(--furlders-pink, #FFB8DC) !important;
  text-decoration-line: underline !important;
  text-decoration-color: var(--furlders-pink, #FFB8DC) !important;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.25em;
}

/* Active state (including the dropdown label when we add .active via JS) */
#headerdiv .navbar-nav > .nav-item > .nav-link.active,
#headerdiv .nav-link.dropdown-toggle.active {
  color: var(--furlders-pink, #FFB8DC) !important;

}
/* active state (pink + underline) */
#headerdiv .nav-link.active{
  color: var(--furlders-pink, #FFB8DC) !important;

}
/* active = pink text + underline */
#headerdiv .nav-link.active,
#headerdiv .dropdown-toggle.active {
  color: var(--furlders-pink, #FFB8DC) !important;
}

/* top-level actives */
#headerdiv .nav-link.active {
  color: var(--furlders-pink, #FFB8DC) !important;
}

/* same look for the Folders dropdown label when active */
#headerdiv #foldersDropdown.active {
  color: var(--furlders-pink, #FFB8DC) !important;

}

#headerdiv .nav-link.active,
#headerdiv .dropdown-toggle.active{
  color: var(--furlders-pink, #FFB8DC) !important;

}


/* remove any leftover “border-bottom” actives that might override underline */
#headerdiv .nav-link.active { border-bottom: 0 !important; }




/* Final, authoritative active style (must be last) */
#headerdiv .navbar-nav > .nav-item > .nav-link.active,
#headerdiv #foldersDropdown.active {
  color: var(--furlders-pink, #FFB8DC) !important;

}

/* keep counters subtle and tidy */
[data-count-for] {
  font-variant-numeric: tabular-nums;
  opacity: .7;
}
.folder-card .actions {
  display: flex;
  justify-content: center !important;
  gap: .5rem;
  flex-wrap: wrap;
}


#accordionExample {
  width: 100%;
}

/* --- Make title wrap instead of overflowing --- */
.link-title,
.folder-card .card-title {
  white-space: normal;          /* allow wrapping */
  overflow-wrap: anywhere;      /* break long words/URLs if needed */
  word-break: break-word;       /* extra safety for long tokens */
}

/* When title & host sit in a flex row, allow text to actually shrink/wrap */
.link-header,
.folder-card .card-body .header-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.link-host-pill,
.folder-card .host-pill {
  flex: 0 1 320px;              /* can shrink, has a soft cap */
  min-width: 140px;
}
.link-title-wrap,
.folder-card .title-wrap {
  flex: 1 1 auto;
  min-width: 0;                 /* CRUCIAL: lets text wrap inside flex */
}

/* Host text ellipsis so long hosts don't push layout */
.link-host-pill > * {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Keep description visible + tidy on phones --- */
.link-desc,
.folder-card .link-desc {
  margin-top: 6px;
  color: rgba(15,14,71,.70);
  line-height: 1.25;
  display: -webkit-box;         /* 2-line clamp */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Phone layout: stack header, then actions --- */
@media (max-width: 576px) {
  .link-header,
  .folder-card .card-body .header-row {
    flex-direction: column;     /* host on its own row, title below */
    align-items: flex-start;
    gap: 8px;
  }

  .link-host-pill,
  .folder-card .host-pill {
    width: 100%;
    min-width: 0;
  }

  /* actions grid so nothing overlaps and "Open" is prominent */
  .link-row .actions,
  .folder-card .actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin-top: 8px;
  }
  /* very small phones: 2-up; make Open span full width */
  @media (max-width: 420px) {
    .link-row .actions,
    .folder-card .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .link-row .actions .btn-open,
    .folder-card .actions .btn-open { grid-column: span 2; }
  }

  .link-row .actions .btn,
  .folder-card .actions .btn {
    width: 100%;
    min-height: 44px;           /* tap target */
    display: flex; align-items: center; justify-content: center;
  }
}
/* ---------- Responsive fixes (stack instead of overlap) ---------- */

/* Always let children shrink: prevents title/host pill from overflowing */
.link-row > * { min-width: 0; }
.folder-card .header-row > * { min-width: 0; }

/* Titles should wrap instead of force the layout wider */
.link-title,
.folder-card .card-title {
  overflow-wrap: anywhere;   /* breaks long words/hosts */
  word-break: break-word;
}

/* Keep descriptions on small screens (2-line clamp for neatness) */
.link-desc,
.folder-card .link-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  line-height: 1.25;
}

/* Tablet & down: stack header (thumb + host + title) and push actions below */
@media (max-width: 992px) {
  .link-row {
    /* thumb | content (host+title) */
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 16px;
    align-items: start;
  }
  /* host pill + title live in the right column, title moves to its own row */
  .link-row .host-pill { grid-column: 2 / 3; }
  .link-row .link-title { grid-column: 1 / -1; margin-top: 2px; }
  .link-row .link-desc  { grid-column: 1 / -1; }

  /* actions occupy a full row and become a tidy grid */
  .link-row .actions {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
  }
  .link-row .actions .btn { width: 100%; min-height: 44px; }

  /* mirror for folder-card layout */
  .folder-card .header-row {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .folder-card .actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
  }
  .folder-card .actions .btn { width: 100%; min-height: 44px; }
}

/* Small phones: 2-wide button grid; make “Open” span full width */
@media (max-width: 576px) {
  .link-row .actions,
  .folder-card .actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .link-row .actions .btn-open,
  .folder-card .actions .btn-open {
    grid-column: span 2;
  }
}
/* ---------- Responsive fixes (stack instead of overlap) ---------- */

/* Always let children shrink: prevents title/host pill from overflowing */
.link-row > * { min-width: 0; }
.folder-card .header-row > * { min-width: 0; }

/* Titles should wrap instead of force the layout wider */
.link-title,
.folder-card .card-title {
  overflow-wrap: anywhere;   /* breaks long words/hosts */
  word-break: break-word;
}

/* Keep descriptions on small screens (2-line clamp for neatness) */
.link-desc,
.folder-card .link-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  line-height: 1.25;
}

/* Tablet & down: stack header (thumb + host + title) and push actions below */
@media (max-width: 992px) {
  .link-row {
    /* thumb | content (host+title) */
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 16px;
    align-items: start;
  }
  /* host pill + title live in the right column, title moves to its own row */
  .link-row .host-pill { grid-column: 2 / 3; }
  .link-row .link-title { grid-column: 1 / -1; margin-top: 2px; }
  .link-row .link-desc  { grid-column: 1 / -1; }

  /* actions occupy a full row and become a tidy grid */
  .link-row .actions {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
  }
  .link-row .actions .btn { width: 100%; min-height: 44px; }

  /* mirror for folder-card layout */
  .folder-card .header-row {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .folder-card .actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
  }
  .folder-card .actions .btn { width: 100%; min-height: 44px; }
}

/* Small phones: 2-wide button grid; make “Open” span full width */
@media (max-width: 576px) {
  .link-row .actions,
  .folder-card .actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .link-row .actions .btn-open,
  .folder-card .actions .btn-open {
    grid-column: span 2;
  }
}
/* ========= FINAL responsive fixes (put at END of allfolders.css) ========= */

/* Let text shrink/wrap; nuke any earlier fixed widths */
.link-row > *,
.link-meta,
.link-title,
.link-desc,
.link-url a {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Base grid */
.link-row { display: grid; gap: 16px; align-items: center; }

/* Large screens: 3 tracks; meta has a floor so it won’t collapse */
@media (min-width: 992px) {
  .link-row { grid-template-columns: 92px minmax(28rem, 1fr) auto; }
  .link-actions { display: flex; flex-wrap: nowrap; gap: 10px; }
  .link-desc { display: block; }
}

/* Tablets & small laptops: move actions under the meta block */
@media (max-width: 991.98px) {
  .link-row { grid-template-columns: 92px 1fr !important; }
  .link-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
  }
  .link-actions .btn { width: 100%; min-height: 44px; }
  .link-desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.25; margin-top: 6px;
  }
}

/* Phones: single column; 2-wide buttons; “Open” spans full width */
@media (max-width: 576px) {
  .link-row { grid-template-columns: 1fr !important; }
  .link-thumb { width: 76px; height: 56px; }
  .link-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .link-actions .btn-open { grid-column: 1 / -1; }
  .link-title { font-size: clamp(18px, 5vw, 20px); }
}
/* ===== Phone layout: host on its own row, then title, then desc ===== */
@media (max-width: 576px) {
  /* one-column card */
  .link-row { grid-template-columns: 1fr !important; }

  /* stack the header content */
  .link-meta,
  .link-header { 
    display: grid !important;
    grid-template-columns: 1fr;
    row-gap: 6px;
    min-width: 0 !important;
  }

  /* host pill: take full row, ellipsize instead of wrapping */
  .link-url,
  .link-url a {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* title: drop under the host, full width, WRAP normally */
  .link-title {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: clamp(18px, 5vw, 20px);
    margin-top: 2px;
  }

  /* description: keep it visible and trimmed to 2–3 lines */
  .link-desc {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* change to 2 if you prefer */
    overflow: hidden !important;
    line-height: 1.25;
    min-width: 0 !important;
  }

  /* actions: tidy 2-col grid; Open spans full width */
  .link-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
  }
  .link-actions .btn-open { grid-column: 1 / -1; }
}
/* ===== Brand tokens (already used site-wide; safe here too) ===== */
:root{
  --brand:#FE4FB4;           /* pink */
  --brand-600:#EC399F;       /* deeper pink */
  --ink:#0F0E47;             /* heading/text */
  --surface:#ffffff;         /* cards/modals */
}

/* ===== Modal container (scoped) ===== */
.fur-modal .modal-content{
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  box-shadow:
    0 30px 60px rgba(16,0,32,.22),
    0 8px 24px rgba(16,0,32,.10);
}

.fur-modal .modal-header{
  border: 0;
  padding: 18px 22px 12px;
  position: relative;
}
.fur-modal .modal-title{
  font-weight: 700;
  color: var(--ink);
}
.fur-modal .modal-header::after{
  content:"";
  position:absolute;
  left:22px; bottom:0;
  width:120px; height:3px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-600));
}

/* backdrop tint */
.modal-backdrop.show{
  background: #2A2751;
  opacity: .65;
}

/* footer */
.fur-modal .modal-footer{
  border: 0;
  padding: 14px 20px 20px;
  background: linear-gradient(0deg, rgba(142,132,176,.10), transparent);
}

/* ===== Form controls ===== */
.fur-modal .form-control,
.fur-modal .form-select,
.fur-modal textarea{
  border-radius: 12px;
  border: 1px solid rgba(15,14,71,.15);
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
}
.fur-modal .form-control:focus,
.fur-modal .form-select:focus,
.fur-modal textarea:focus{
  border-color: var(--brand-600);
  box-shadow: 0 0 0 .25rem rgba(254,79,180,.25);
}

/* Small helper text color (Bootstrap’s .form-text or <small>) */
.fur-modal .form-text,
.fur-modal small{ color: rgba(15,14,71,.65); }

/* ===== Buttons ===== */
.btn-brand{
  background: linear-gradient(180deg, var(--brand), var(--brand-600));
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: .55rem 1rem;
  font-weight: 600;
  box-shadow: 0 10px 22px rgba(254,79,180,.28);
}
.btn-brand:hover{ filter: brightness(1.04); }
.btn-brand:active{ transform: translateY(1px); }

.btn-ghost-dark{
  background: rgba(15,14,71,.06);
  color: var(--ink);
  border: 0;
  border-radius: 12px;
  padding: .55rem 1rem;
}
.btn-ghost-dark:hover{ background: rgba(15,14,71,.12); }

/* Keep buttons from splitting letters on narrow widths */
.fur-modal .btn{ white-space: nowrap; }

@media (max-width: 420px){
  .fur-modal .modal-dialog{ margin: .75rem; }
}