/* =============================================
   Recipe Grid Pro — style.css
   ============================================= */

:root {
    --rgp-primary:      #d6b6a5;
    --rgp-accent:       #a0785a;
    --rgp-text:         #2d2d2d;
    --rgp-text-light:   #777;
    --rgp-border:       #e5e5e5;
    --rgp-bg:           #faf7f5;
    --rgp-white:        #ffffff;
    --rgp-radius:       16px;
    --rgp-shadow:       0 4px 24px rgba(0,0,0,.08);
    --rgp-transition:   .25s ease;
}

.rgp-wrapper { max-width:1280px; margin:0 auto; padding:0 16px; }

/* ── HERO ─────────────────────────────────────────────── */
.rgp-hero {
    position:relative;
    min-height:500px;
    background-size:cover;
    background-position:center;
    border-radius:var(--rgp-radius);
    overflow:hidden;
    margin-bottom:40px;
    display:flex;
    align-items:flex-end;
}
.rgp-hero-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.1) 60%, transparent 100%);
}
.rgp-hero-content {
    position:relative;
    padding:40px;
    color:#fff;
    max-width:640px;
}
.rgp-hero-badge {
    display:inline-block;
    background:var(--rgp-primary);
    color:#fff;
    padding:4px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    margin-bottom:12px;
}
.rgp-hero-title {
    font-size:clamp(24px,4vw,40px);
    font-weight:800;
    line-height:1.2;
    margin:0 0 12px;
}
.rgp-hero-excerpt {
    font-size:16px;
    line-height:1.6;
    opacity:.9;
    margin:0 0 16px;
}
.rgp-hero-meta {
    display:flex;
    gap:16px;
    font-size:14px;
    margin-bottom:24px;
    flex-wrap:wrap;
}
.rgp-hero-btn {
    display:inline-block;
    background:var(--rgp-primary);
    color:#fff;
    padding:12px 28px;
    border-radius:var(--rgp-radius);
    font-weight:700;
    text-decoration:none;
    transition:background var(--rgp-transition);
}
.rgp-hero-btn:hover { background:var(--rgp-accent); color:#fff; }

/* ── SEARCH ───────────────────────────────────────────── */
.rgp-search-wrap { margin-bottom:24px; }
#rgp-search {
    width:100%;
    padding:16px 20px;
    border:1px solid var(--rgp-border);
    border-radius:var(--rgp-radius);
    font-size:16px;
    background:var(--rgp-white);
    transition:border-color var(--rgp-transition), box-shadow var(--rgp-transition);
    box-sizing:border-box;
}
#rgp-search:focus {
    outline:none;
    border-color:var(--rgp-primary);
    box-shadow:0 0 0 4px rgba(214,182,165,.15);
}

/* ── CONTROLS ─────────────────────────────────────────── */
.rgp-controls {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:28px;
}

/* Filter tabs */
.rgp-filter-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.rgp-tab {
    padding:8px 20px;
    border-radius:30px;
    border:1px solid var(--rgp-border);
    background:var(--rgp-white);
    color:var(--rgp-text-light);
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:all var(--rgp-transition);
}
.rgp-tab:hover         { border-color:var(--rgp-primary); color:var(--rgp-accent); }
.rgp-tab.rgp-tab-active{ background:var(--rgp-primary); border-color:var(--rgp-primary); color:#fff; }

/* Sort dropdown */
#rgp-sort {
    padding:10px 16px;
    border:1px solid var(--rgp-border);
    border-radius:12px;
    font-size:14px;
    background:var(--rgp-white);
    cursor:pointer;
    color:var(--rgp-text);
    min-width:160px;
}
#rgp-sort:focus { outline:none; border-color:var(--rgp-primary); }

/* ── GRID ─────────────────────────────────────────────── */
.rgp-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-bottom:40px;
    min-height:100px;
}
@media(max-width:1024px){ .rgp-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px) { .rgp-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px) { .rgp-grid{ grid-template-columns:1fr; } }

/* ── CARD ─────────────────────────────────────────────── */
.rgp-card {
    background:var(--rgp-white);
    border-radius:var(--rgp-radius);
    overflow:hidden;
    box-shadow:var(--rgp-shadow);
    transition:transform var(--rgp-transition), box-shadow var(--rgp-transition);
    display:flex;
    flex-direction:column;
}
.rgp-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.12); }

/* Thumbnail */
.rgp-card-thumb {
    position:relative;
    padding-top:66%;
    overflow:hidden;
    background:var(--rgp-bg);
}
.rgp-card-thumb img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .4s ease;
}
.rgp-card:hover .rgp-card-thumb img { transform:scale(1.05); }
.rgp-card-thumb-placeholder {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:48px;
    color:var(--rgp-text-light);
}
.rgp-card-image-link { display:block; text-decoration:none; }

/* Category badge */
.rgp-card-cat {
    position:absolute;
    top:12px;
    left:12px;
    background:var(--rgp-primary);
    color:#fff;
    font-size:11px;
    font-weight:700;
    padding:3px 10px;
    border-radius:20px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

/* Favourite button */
.rgp-fav-btn {
    position:absolute;
    top:10px;
    right:10px;
    width:34px;
    height:34px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.9);
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background var(--rgp-transition), color var(--rgp-transition);
    color:#bbb;
    line-height:1;
}
.rgp-fav-btn:hover, .rgp-fav-btn.rgp-fav-active { background:#fff; color:#e05555; }

/* Card body */
.rgp-card-body { padding:16px 18px 20px; display:flex; flex-direction:column; flex:1; }
.rgp-card-title { font-size:16px; font-weight:700; margin:0 0 8px; line-height:1.4; }
.rgp-card-title a { text-decoration:none; color:var(--rgp-text); }
.rgp-card-title a:hover { color:var(--rgp-accent); }
.rgp-card-excerpt { font-size:13px; color:var(--rgp-text-light); line-height:1.5; margin:0 0 12px; flex:1; }

/* Meta row */
.rgp-card-meta {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
}
.rgp-meta-item {
    font-size:12px;
    color:var(--rgp-text-light);
    display:flex;
    align-items:center;
    gap:4px;
}

/* Card button */
.rgp-card-btn {
    display:block;
    text-align:center;
    padding:10px;
    background:var(--rgp-primary);
    color:#fff;
    border-radius:12px;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    transition:background var(--rgp-transition);
}
.rgp-card-btn:hover { background:var(--rgp-accent); color:#fff; }

/* Modern card variant */
.rgp-card-modern .rgp-card-body { padding:14px 16px 16px; }
.rgp-card-modern .rgp-card-btn { border-radius:8px; }

/* Magazine card variant */
.rgp-card-magazine { flex-direction:row; }
.rgp-card-magazine .rgp-card-thumb { width:45%; padding-top:0; min-height:180px; flex-shrink:0; }
.rgp-card-magazine .rgp-card-thumb img { position:absolute; }
.rgp-card-magazine .rgp-card-image-link { width:45%; }
.rgp-card-magazine .rgp-card-body { padding:20px; }

/* ── LOAD MORE ────────────────────────────────────────── */
.rgp-load-more-wrap { text-align:center; margin-bottom:48px; }
#rgp-load-more {
    padding:14px 40px;
    background:transparent;
    border:2px solid var(--rgp-primary);
    color:var(--rgp-accent);
    border-radius:30px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:all var(--rgp-transition);
}
#rgp-load-more:hover { background:var(--rgp-primary); color:#fff; }
#rgp-load-more:disabled { opacity:.5; cursor:default; }

/* ── LOADING / NO RESULTS ─────────────────────────────── */
.rgp-loading { text-align:center; padding:60px 20px; color:var(--rgp-text-light); font-size:16px; }
.rgp-no-results {
    grid-column:1/-1;
    text-align:center;
    padding:80px 20px;
    font-size:20px;
    color:var(--rgp-text-light);
}

/* ── FAVORITES PAGE ───────────────────────────────────── */
.rgp-fav-title {
    font-size:28px;
    font-weight:800;
    margin-bottom:24px;
    color:var(--rgp-text);
}

/* ── SKELETON LOADER ──────────────────────────────────── */
@keyframes rgp-shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
.rgp-skeleton {
    background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
    background-size:800px 100%;
    animation:rgp-shimmer 1.4s infinite;
    border-radius:var(--rgp-radius);
}
.rgp-skeleton-card { height:320px; }

/* ──────────────────────────────────────────────────────────
   SINGLE RECIPE CARD — live servings, timers, cook mode, ratings
   ────────────────────────────────────────────────────────── */
.rgp-recipe-card {
    margin-top:40px;
    padding:28px;
    background:var(--rgp-white);
    border:1px solid var(--rgp-border);
    border-radius:var(--rgp-radius);
    box-shadow:var(--rgp-shadow);
}
.rgp-recipe-card-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:18px; }
.rgp-recipe-card-title { font-size:24px; font-weight:800; color:var(--rgp-text); margin:0; }
.rgp-recipe-jumplinks { display:flex; gap:16px; font-size:13px; }
.rgp-recipe-jumplinks a { color:var(--rgp-accent); text-decoration:none; font-weight:600; }
.rgp-recipe-jumplinks a:hover { text-decoration:underline; }

.rgp-recipe-meta-strip {
    display:flex; flex-wrap:wrap; gap:18px;
    padding:16px 0; border-top:1px solid var(--rgp-border); border-bottom:1px solid var(--rgp-border);
    margin-bottom:20px;
}
.rgp-meta-block { display:flex; flex-direction:column; gap:4px; min-width:90px; }
.rgp-meta-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--rgp-text-light); }
.rgp-meta-value { font-size:16px; font-weight:700; color:var(--rgp-text); }
.rgp-timer-btn {
    align-self:flex-start; margin-top:2px; padding:4px 10px; font-size:12px; font-weight:700;
    background:var(--rgp-bg); border:1px solid var(--rgp-primary); color:var(--rgp-accent);
    border-radius:20px; cursor:pointer; transition:all var(--rgp-transition);
}
.rgp-timer-btn:hover { background:var(--rgp-primary); color:#fff; }

.rgp-servings-stepper { display:flex; align-items:center; gap:10px; }
.rgp-servings-stepper button {
    width:28px; height:28px; border-radius:50%; border:1px solid var(--rgp-primary);
    background:var(--rgp-white); color:var(--rgp-accent); font-size:16px; font-weight:700; cursor:pointer; line-height:1;
}
.rgp-servings-stepper button:hover { background:var(--rgp-primary); color:#fff; }
.rgp-servings-count { font-size:16px; font-weight:700; min-width:20px; text-align:center; }

.rgp-recipe-card-actions { display:flex; gap:12px; margin-bottom:24px; }
.rgp-print-btn, .rgp-cookmode-btn {
    padding:10px 18px; border-radius:30px; border:1px solid var(--rgp-border); background:var(--rgp-bg);
    font-weight:700; font-size:13px; cursor:pointer; color:var(--rgp-text); transition:all var(--rgp-transition);
}
.rgp-print-btn:hover, .rgp-cookmode-btn:hover { border-color:var(--rgp-primary); color:var(--rgp-accent); }

.rgp-recipe-section { margin-bottom:28px; }
.rgp-recipe-section h3 { font-size:18px; font-weight:800; color:var(--rgp-text); margin-bottom:14px; }
.rgp-ingredient-list, .rgp-instruction-list { padding-left:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.rgp-ingredient-list li { padding-left:24px; position:relative; color:var(--rgp-text); }
.rgp-ingredient-list li::before { content:''; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--rgp-primary); }
.rgp-ing-amt { font-weight:700; color:var(--rgp-accent); }
.rgp-instruction-list { counter-reset:rgp-step; }
.rgp-instruction-list li {
    counter-increment:rgp-step; padding-left:38px; position:relative; color:var(--rgp-text);
    display:flex; align-items:flex-start; flex-wrap:wrap; gap:10px;
}
.rgp-instruction-list li::before {
    content:counter(rgp-step); position:absolute; left:0; top:0;
    width:26px; height:26px; border-radius:50%; background:var(--rgp-primary); color:#fff;
    font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.rgp-step-text { flex:1; min-width:200px; }

.rgp-nutrition-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(80px,1fr)); gap:14px; text-align:center; }
.rgp-nutrition-grid div { background:var(--rgp-bg); border-radius:12px; padding:14px 8px; }
.rgp-nutrition-grid strong { display:block; font-size:18px; color:var(--rgp-accent); }
.rgp-nutrition-grid span { font-size:12px; color:var(--rgp-text-light); }

/* Ratings */
.rgp-rating-interactive { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rgp-rating-stars { display:flex; gap:2px; }
.rgp-star { background:none; border:none; font-size:26px; line-height:1; color:#ddd; cursor:pointer; padding:0; transition:transform .15s; }
.rgp-star:hover { transform:scale(1.15); }
.rgp-star-filled { color:#f0b429; }
.rgp-rating-summary { font-size:14px; color:var(--rgp-text-light); }
.rgp-rating-thanks { font-size:13px; color:var(--rgp-accent); font-weight:700; }
.rgp-rating-static { display:inline-flex; align-items:center; gap:2px; font-size:13px; }
.rgp-star-mini { color:#ddd; font-size:14px; }
.rgp-star-mini.rgp-star-filled { color:#f0b429; }
.rgp-rating-count { color:var(--rgp-text-light); margin-left:4px; font-size:12px; }

/* Real-time timer tray */
.rgp-timer-tray { position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:10px; z-index:9999; }
.rgp-timer-widget {
    background:var(--rgp-text); color:#fff; padding:10px 14px; border-radius:12px;
    display:flex; align-items:center; gap:10px; box-shadow:0 6px 20px rgba(0,0,0,.25); font-size:13px; min-width:180px;
}
.rgp-timer-name { font-weight:700; flex:1; }
.rgp-timer-display { font-family:monospace; font-size:16px; font-weight:700; }
.rgp-timer-widget button { background:none; border:none; color:#fff; cursor:pointer; font-size:14px; opacity:.8; }
.rgp-timer-widget button:hover { opacity:1; }
.rgp-timer-done { background:var(--rgp-accent); animation:rgp-pulse 1s infinite; }
@keyframes rgp-pulse { 0%,100%{opacity:1} 50%{opacity:.6} }

/* Cook mode */
.rgp-cookmode-overlay {
    position:fixed; inset:0; background:rgba(20,18,16,.92); z-index:99999;
    display:flex; align-items:center; justify-content:center; padding:20px;
}
.rgp-cookmode-inner { background:#fff; border-radius:20px; max-width:560px; width:100%; padding:32px; position:relative; }
.rgp-cookmode-close { position:absolute; top:16px; right:16px; background:none; border:none; font-size:20px; cursor:pointer; color:var(--rgp-text-light); }
.rgp-cookmode-progress { height:6px; background:var(--rgp-bg); border-radius:4px; overflow:hidden; margin-bottom:24px; }
.rgp-cookmode-progress { background-image:linear-gradient(to right, var(--rgp-primary) var(--w,0%), var(--rgp-bg) 0); }
.rgp-cookmode-step { text-align:center; min-height:140px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.rgp-cookmode-step-num { font-size:13px; font-weight:700; color:var(--rgp-accent); text-transform:uppercase; letter-spacing:.06em; }
.rgp-cookmode-step-text { font-size:20px; font-weight:600; color:var(--rgp-text); line-height:1.5; }
.rgp-cookmode-nav { display:flex; align-items:center; justify-content:space-between; margin-top:28px; gap:12px; flex-wrap:wrap; }
.rgp-cookmode-nav button { padding:10px 20px; border-radius:30px; border:1px solid var(--rgp-primary); background:var(--rgp-white); color:var(--rgp-accent); font-weight:700; cursor:pointer; }
.rgp-cookmode-nav button:hover { background:var(--rgp-primary); color:#fff; }
.rgp-cookmode-nav button:disabled { opacity:.4; cursor:default; }
.rgp-cookmode-wakelock { font-size:12px; color:var(--rgp-text-light); display:flex; align-items:center; gap:6px; }

/* Print */
@media print {
    body * { visibility:hidden; }
    .rgp-print-area, .rgp-print-area * { visibility:visible; }
    .rgp-print-area { position:absolute; left:0; top:0; width:100%; box-shadow:none; border:none; }
    .rgp-no-print, .rgp-recipe-card-actions, .rgp-timer-btn, .rgp-recipe-jumplinks { display:none !important; }
}