/* ══════════════════════════════════════════════════════════════════════
   DrinkLab Search Widget — Dark Theme v2.7
   ══════════════════════════════════════════════════════════════════════ */

/* ── Search bar wrapper ─────────────────────────────────────────────── */
.dlb-search-wrap{
    position:relative;width:100%;max-width:660px;margin:0 auto;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.dlb-search-bar{
    display:flex;align-items:stretch;
    background:#111;
    border:none;
    border-radius:8px;
    overflow:hidden;
}

/* Input */
.dlb-search-input{
    flex:1;border:none;outline:none;
    font-size:16px;line-height:1.4;
    background:transparent;
    color:#fff;
    padding:13px 14px;
    min-width:0;
}
.dlb-search-input::placeholder{color:#555}
.dlb-search-input::-webkit-search-cancel-button{-webkit-appearance:none}

/* Clear button */
.dlb-search-clear{
    background:none;border:none;cursor:pointer;
    color:#555;font-size:16px;
    padding:0 10px;line-height:1;flex-shrink:0;
    transition:color .15s;align-self:center;
}
.dlb-search-clear:hover{color:#aaa}

/* Blue search button on the right */
.dlb-search-btn{
    display:flex;align-items:center;justify-content:center;gap:7px;
    background:#1E73BE;color:#fff;
    border:none;cursor:pointer;
    padding:0 22px;
    font-size:14px;font-weight:700;
    letter-spacing:.02em;
    flex-shrink:0;
    transition:background .15s;
    white-space:nowrap;
    font-family:inherit;
}
.dlb-search-btn:hover{background:#1660a8}
.dlb-search-btn svg{flex-shrink:0}

/* ── Dropdown ───────────────────────────────────────────────────────── */
.dlb-search-dropdown{
    position:absolute;top:calc(100% + 6px);left:0;right:0;
    background:#111;
    border:1px solid #2a2a2a;
    border-radius:12px;
    box-shadow:0 12px 40px rgba(0,0,0,.7);
    z-index:9999;
    max-height:500px;
    overflow-y:auto;
    overscroll-behavior:contain;
}
.dlb-search-dropdown::-webkit-scrollbar{width:5px}
.dlb-search-dropdown::-webkit-scrollbar-track{background:transparent}
.dlb-search-dropdown::-webkit-scrollbar-thumb{background:#333;border-radius:3px}

/* ── Section headers ────────────────────────────────────────────────── */
.dlb-sdr-section{padding:10px 14px 4px}
.dlb-sdr-section-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#555}

/* ── Result rows ────────────────────────────────────────────────────── */
.dlb-sdr-item{
    display:flex;align-items:center;gap:11px;
    padding:9px 14px;cursor:pointer;
    transition:background .1s;
    text-decoration:none;color:#e0e0e0;
}
.dlb-sdr-item:hover,.dlb-sdr-item.dlb-focused{background:#1a1a1a}
.dlb-sdr-item:active{background:#222}

/* Thumbnail */
.dlb-sdr-thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#1e1e1e}
.dlb-sdr-thumb-placeholder{
    width:40px;height:40px;border-radius:8px;flex-shrink:0;
    background:#1e1e1e;display:flex;align-items:center;justify-content:center;font-size:18px;
}
.dlb-sdr-emoji{
    width:40px;height:40px;border-radius:8px;flex-shrink:0;
    background:#1e1e1e;display:flex;align-items:center;justify-content:center;font-size:18px;
}

/* Text */
.dlb-sdr-text{flex:1;min-width:0}
.dlb-sdr-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f0f0f0}
.dlb-sdr-name mark{background:none;color:#1E73BE;font-weight:700}

/* Arrow */
.dlb-sdr-arrow{color:#444;font-size:16px;flex-shrink:0}

/* Type badges in dropdown */
.dlb-sdr-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px;flex-shrink:0;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.dlb-sdr-badge-shot     {background:color-mix(in srgb,var(--dlb-color-shot,#b45309) 25%,#000);color:#fff}
.dlb-sdr-badge-punch    {background:color-mix(in srgb,var(--dlb-color-punch,#9d174d) 25%,#000);color:#fff}
.dlb-sdr-badge-cocktail {background:color-mix(in srgb,var(--dlb-color-cocktail,#1E73BE) 25%,#000);color:#fff}
.dlb-sdr-badge-mocktail {background:color-mix(in srgb,var(--dlb-color-mocktail,#065f46) 25%,#000);color:#fff}
.dlb-sdr-badge-smoothie {background:color-mix(in srgb,var(--dlb-color-smoothie,#6d28d9) 25%,#000);color:#fff}

/* ── "Can I make this?" row ─────────────────────────────────────────── */
.dlb-sdr-cta{
    display:flex;align-items:center;gap:10px;
    padding:8px 14px;cursor:pointer;
    transition:background .1s;
    text-decoration:none;color:#1E73BE;
    font-size:12px;font-weight:600;
    border-top:1px solid #1a1a1a;
    margin-left:65px;
}
.dlb-sdr-cta:hover{background:#0f1f30;color:#60a5fa}

/* ── Recent searches ─────────────────────────────────────────────────── */
.dlb-sdr-recent-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 4px}
.dlb-sdr-recent-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#555}
.dlb-sdr-recent-clear{font-size:11px;color:#555;cursor:pointer;background:none;border:none;padding:0;text-decoration:underline}
.dlb-sdr-recent-clear:hover{color:#aaa}
.dlb-sdr-recent-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;color:#999;font-size:14px;transition:background .1s}
.dlb-sdr-recent-item:hover,.dlb-sdr-recent-item.dlb-focused{background:#1a1a1a;color:#f0f0f0}
.dlb-sdr-recent-icon{color:#444;flex-shrink:0;font-size:14px}

/* ── Loading / empty ────────────────────────────────────────────────── */
.dlb-sdr-empty{padding:20px 14px;text-align:center;color:#555;font-size:14px}
.dlb-sdr-loading{padding:16px 14px;display:flex;align-items:center;gap:10px;color:#555;font-size:14px}
.dlb-sdr-spinner{width:16px;height:16px;border:2px solid #333;border-top-color:#1E73BE;border-radius:50%;animation:dlb-spin .6s linear infinite;flex-shrink:0}
@keyframes dlb-spin{to{transform:rotate(360deg)}}

/* ── Divider ────────────────────────────────────────────────────────── */
.dlb-sdr-divider{height:1px;background:#1e1e1e;margin:4px 0}

/* ── "View all" footer ──────────────────────────────────────────────── */
.dlb-sdr-view-all{
    display:block;text-align:center;
    padding:11px 14px;font-size:13px;
    color:#1E73BE;font-weight:600;
    text-decoration:none;
    border-top:1px solid #1e1e1e;
}
.dlb-sdr-view-all:hover{background:#0a1929;color:#60a5fa}


/* ══════════════════════════════════════════════════════════════════════
   Results Page
   ══════════════════════════════════════════════════════════════════════ */
.dlb-results-page{
    max-width:1100px;margin:0 auto;
    padding:0 0 60px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* Search bar at top of results */
.dlb-rp-search-wrap{margin-bottom:32px}

/* Header */
.dlb-rp-header{margin-bottom:24px}
.dlb-rp-heading{font-size:24px;font-weight:700;color:#fff;margin:0}

/* ── Section labels ─────────────────────────────────────────────────── */
.dlb-rp-section{margin-bottom:40px}
.dlb-rp-section-label{
    font-size:11px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:#555;
    margin-bottom:16px;padding-bottom:8px;
    border-bottom:1px solid #1e1e1e;
    display:flex;align-items:center;gap:6px;
}

/* ── Cocktail grid ──────────────────────────────────────────────────── */
.dlb-rp-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}
@media(max-width:900px){.dlb-rp-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.dlb-rp-grid{grid-template-columns:repeat(2,1fr);gap:10px}}

/* Card */
.dlb-rp-card{
    display:block;text-decoration:none;color:#fff;
    background:#181818;
    border-radius:10px;overflow:hidden;
    border:1px solid #222;
    transition:transform .18s,box-shadow .18s,border-color .18s;
}
.dlb-rp-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 40px rgba(0,0,0,.6);
    border-color:#333;
}

/* Card image area */
.dlb-rp-card-img{
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    background:#1a1a1a;
}
.dlb-rp-card-img img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .3s;
}
.dlb-rp-card:hover .dlb-rp-card-img img{transform:scale(1.04)}
.dlb-rp-card-placeholder{
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    font-size:48px;
}

/* ── Corner badge — clip-path triangle (reliable cross-browser) ─────── */
.dlb-rp-corner-badge{
    position:absolute;
    bottom:0;right:0;
    width:72px;height:72px;
    display:flex;align-items:flex-end;justify-content:flex-end;
    padding:0 7px 7px 0;
    clip-path:polygon(100% 0, 100% 100%, 0 100%);
}
.dlb-rp-corner-badge span{
    font-size:10px;font-weight:800;
    color:#fff;text-align:right;
    line-height:1.15;letter-spacing:.04em;
    text-transform:uppercase;
    white-space:nowrap;
    text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* Badge colours */
.dlb-rp-corner-cocktail{background:var(--dlb-color-cocktail,#1E73BE)}
.dlb-rp-corner-shot    {background:var(--dlb-color-shot,#b45309)}
.dlb-rp-corner-punch   {background:var(--dlb-color-punch,#9d174d)}
.dlb-rp-corner-mocktail{background:var(--dlb-color-mocktail,#065f46)}
.dlb-rp-corner-smoothie{background:var(--dlb-color-smoothie,#6d28d9)}

/* Card text */
.dlb-rp-card-body{padding:11px 12px 13px}
.dlb-rp-card-name{font-size:14px;font-weight:700;color:#fff;line-height:1.35;margin:0}

/* ── Ingredient list ────────────────────────────────────────────────── */
.dlb-rp-list{display:flex;flex-direction:column;gap:4px}
.dlb-rp-ing-row{
    display:flex;align-items:center;gap:12px;
    padding:11px 16px;border-radius:10px;
    border:1px solid #1e1e1e;background:#181818;
    text-decoration:none;color:#e0e0e0;
    transition:background .12s,border-color .12s;
}
.dlb-rp-ing-row:hover{background:#1a1a1a;border-color:#333}
.dlb-rp-ing-icon{font-size:20px;flex-shrink:0;width:28px;text-align:center}
.dlb-rp-ing-name{font-size:15px;font-weight:500;flex:1;color:#f0f0f0}
.dlb-rp-ing-cta{font-size:12px;color:#1E73BE;text-decoration:none;white-space:nowrap;font-weight:600;flex-shrink:0}
.dlb-rp-ing-cta:hover{color:#60a5fa;text-decoration:underline}

/* ── Theme list ─────────────────────────────────────────────────────── */
.dlb-rp-theme-row{
    display:flex;align-items:center;gap:12px;
    padding:11px 16px;border-radius:10px;
    border:1px solid #1e1e1e;background:#181818;
    text-decoration:none;color:#e0e0e0;
    transition:background .12s,border-color .12s;
}
.dlb-rp-theme-row:hover{background:#1a1a1a;border-color:#333}
.dlb-rp-theme-emoji{font-size:22px;flex-shrink:0;width:28px;text-align:center}
.dlb-rp-theme-name{font-size:15px;font-weight:500;flex:1;color:#f0f0f0}
.dlb-rp-theme-arrow{color:#444;font-size:18px;flex-shrink:0}

/* ── Load more ──────────────────────────────────────────────────────── */
.dlb-rp-loadmore-wrap{text-align:center;margin-top:24px}
.dlb-rp-loadmore{
    display:inline-flex;align-items:center;gap:8px;
    background:#1E73BE;color:#fff;
    border:none;cursor:pointer;
    padding:13px 40px;border-radius:8px;
    font-size:14px;font-weight:700;
    letter-spacing:.03em;
    transition:background .15s,transform .12s;
    font-family:inherit;
}
.dlb-rp-loadmore:hover{background:#1660a8;transform:translateY(-1px)}
.dlb-rp-loadmore:disabled{background:#1e3a5a;color:#567;cursor:not-allowed;transform:none}
.dlb-rp-loadmore-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:dlb-spin .6s linear infinite;display:none}
.dlb-rp-loadmore.loading .dlb-rp-loadmore-spinner{display:block}
.dlb-rp-loadmore.loading .dlb-rp-loadmore-text{opacity:.7}

/* ── Empty state ────────────────────────────────────────────────────── */
.dlb-rp-empty{text-align:center;padding:56px 20px;color:#444}
.dlb-rp-empty-icon{font-size:52px;margin-bottom:14px}
.dlb-rp-empty-title{font-size:20px;font-weight:700;color:#666;margin-bottom:8px}
.dlb-rp-empty-sub{font-size:14px}
.dlb-rp-empty-sub a{color:#1E73BE}