/*
Theme Name: TidbitsZone
Theme URI: https://tidbitszone.com
Author: TidbitsZone
Author URI: https://tidbitszone.com
Description: Custom deals, coupons and product showcase theme for TidbitsZone.com. Includes a "Deals" content type with categories, a scrolling offers ticker, subscribe box, country selector and horizontally scrollable deal rows.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tidbitszone
*/

/* ==========================================================================
   0. Variables & Reset
   ========================================================================== */
:root{
    --tbz-pink:#FF4F81;
    --tbz-orange:#FF8C42;
    --tbz-yellow:#FFD23F;
    --tbz-blue:#2D6CDF;
    --tbz-dark:#22223B;
    --tbz-gray:#6c6c80;
    --tbz-bg:#FFFBF5;
    --tbz-card-bg:#ffffff;
    --tbz-border:#f0e6d6;
    --radius:14px;
    --max-width:1700px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    font-family:'Segoe UI', Tahoma, Verdana, sans-serif;
    background:var(--tbz-bg);
    color:var(--tbz-dark);
    line-height:1.5;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
.container{max-width:var(--max-width);margin:0 auto;padding:0 20px;}
button{font-family:inherit;cursor:pointer;}

/* ==========================================================================
   1. Top utility bar (tagline centered / subscribe on right)
   ========================================================================== */
.tbz-topbar{
    background:var(--tbz-dark);
    color:#fff;
    font-size:13px;
}
.tbz-topbar-grid{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:14px;
    padding-top:8px;
    padding-bottom:8px;
}
.tbz-header-tagline{
    font-weight:600;
    font-size:13.5px;
    color:#fff;
    opacity:0.95;
    text-align:center;
    justify-self:center;
    white-space:nowrap;
}
.tbz-topbar-grid .tbz-subscribe-form{justify-self:end;}
.tbz-subscribe-form{display:flex;align-items:center;gap:6px;}
.tbz-subscribe-form input[type="email"]{
    border:none;
    border-radius:20px 0 0 20px;
    padding:6px 12px;
    font-size:13px;
    width:190px;
}
.tbz-subscribe-form button{
    background:var(--tbz-blue);
    color:#fff;
    border:none;
    border-radius:0 20px 20px 0;
    padding:6px 14px;
    font-weight:600;
    font-size:13px;
}

/* ==========================================================================
   2. Header: logo (left) + search bar & offers strip stacked (right),
      right column height capped to match the logo so nothing overflows below it
   ========================================================================== */
.tbz-header{
    background:#fff;
    border-bottom:3px solid var(--tbz-yellow);
    padding:16px 0;
}
.tbz-header-grid{
    display:flex;
    align-items:flex-start;
    gap:24px;
}
.tbz-logo{
    font-size:28px;
    font-weight:800;
    color:var(--tbz-pink);
    letter-spacing:-0.5px;
    white-space:nowrap;
    display:flex;
    align-items:center;
    width:300px;
    height:200px;
    flex-shrink:0;
}
.tbz-logo span{color:var(--tbz-orange);}
.tbz-logo img,
.tbz-logo .custom-logo{
    max-height:200px;
    max-width:300px;
    width:auto !important;
    height:auto !important;
    display:block;
    object-fit:contain;
    margin:auto;
}

.tbz-header-right{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:200px;
    min-width:0;
}

.tbz-search-form{
    display:flex;
    width:100%;
}
.tbz-search-form input[type="search"]{
    flex:1;
    padding:12px 18px;
    border:2px solid var(--tbz-border);
    border-right:none;
    border-radius:24px 0 0 24px;
    font-size:15px;
    min-width:0;
}
.tbz-search-form button{
    background:var(--tbz-yellow);
    border:2px solid var(--tbz-yellow);
    border-radius:0 24px 24px 0;
    padding:0 24px;
    font-weight:700;
    font-size:16px;
    flex-shrink:0;
}

/* ==========================================================================
   3. Rolling offers — plain bordered, manually scrollable strip
      (sits directly under the search bar, capped within header height)
   ========================================================================== */
.tbz-offers-strip{
    display:flex;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    border:2px solid var(--tbz-dark);
    border-radius:10px;
    padding:10px 14px;
    flex:1;
    align-items:center;
    margin-top:14px;
    scrollbar-width:thin;
}
.tbz-offer-pill{
    display:inline-block;
    font-size:13.5px;
    font-weight:600;
    color:var(--tbz-dark);
    background:var(--tbz-bg);
    border:1px solid var(--tbz-border);
    border-radius:20px;
    padding:6px 16px;
    flex-shrink:0;
}

/* ==========================================================================
   4. Primary navigation
   ========================================================================== */
.tbz-nav{
    background:var(--tbz-dark);
}
.tbz-nav .container{display:flex;align-items:center;flex-wrap:wrap;}
.tbz-nav ul{display:flex;flex-wrap:wrap;}
.tbz-nav li{position:relative;}
.tbz-nav a{
    display:block;
    padding:14px 18px;
    color:#fff;
    font-weight:600;
    font-size:14.5px;
}
.tbz-nav li:hover > a, .tbz-nav a:focus{background:rgba(255,255,255,0.12);}
.tbz-nav .tbz-all-toggle{background:var(--tbz-pink);}

.tbz-dropdown{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    min-width:200px;
    box-shadow:0 10px 24px rgba(0,0,0,0.15);
    border-radius:0 0 10px 10px;
    z-index:50;
}
.tbz-all-item.tbz-open .tbz-dropdown{display:block;}
.tbz-dropdown a{color:var(--tbz-dark);padding:10px 18px;}
.tbz-dropdown a:hover{background:var(--tbz-bg);color:var(--tbz-pink);}

.tbz-nav-toggle{display:none;background:none;border:none;color:#fff;font-size:22px;padding:12px 18px;}

/* ==========================================================================
   5. Deal rows / cards (homepage)
   ========================================================================== */
.tbz-section{padding:34px 0 10px;}
.tbz-section-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:14px;
}
.tbz-section-head h2{
    font-size:22px;
    margin:0;
    border-left:6px solid var(--tbz-pink);
    padding-left:10px;
}
.tbz-section-head a{font-size:13px;font-weight:700;color:var(--tbz-orange);}

.tbz-row-wrap{position:relative;}
.tbz-scroll-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:#fff;
    border:2px solid var(--tbz-border);
    border-radius:50%;
    width:38px;
    height:38px;
    font-size:16px;
    font-weight:700;
    color:var(--tbz-pink);
    z-index:10;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
}
.tbz-scroll-btn.prev{left:-6px;}
.tbz-scroll-btn.next{right:-6px;}

.tbz-deal-row{
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:none;
    grid-auto-columns:400px;
    gap:22px;
    overflow-x:auto;
    scroll-behavior:smooth;
    padding:6px 6px 18px;
    scrollbar-width:thin;
}
.tbz-deal-row::-webkit-scrollbar{height:8px;}
.tbz-deal-row::-webkit-scrollbar-thumb{background:var(--tbz-border);border-radius:10px;}

.tbz-card{
    background:var(--tbz-card-bg);
    border:1px solid var(--tbz-border);
    border-radius:var(--radius);
    padding:14px;
    display:flex;
    flex-direction:column;
    transition:transform .15s ease, box-shadow .15s ease;
}
.tbz-card:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(0,0,0,0.09);}
.tbz-card .tbz-card-img{
    width:100%;
    aspect-ratio:400/200;
    object-fit:cover;
    border-radius:10px;
    margin-bottom:12px;
    background:var(--tbz-bg);
}
.tbz-card h3{
    font-size:17px;
    margin:0 0 8px;
    line-height:1.3;
    min-height:44px;
}
.tbz-card p{font-size:13.5px;color:var(--tbz-gray);margin:0 0 12px;flex:1;}
.tbz-badge{
    display:inline-block;
    font-size:11px;
    font-weight:700;
    color:var(--tbz-pink);
    background:#ffeef3;
    padding:3px 10px;
    border-radius:10px;
    margin-bottom:10px;
    width:fit-content;
}
.tbz-view-deal{
    display:block;
    text-align:center;
    background:var(--tbz-yellow);
    border-radius:20px;
    padding:10px 12px;
    font-weight:700;
    font-size:14px;
    color:var(--tbz-dark);
}
.tbz-view-deal:hover{background:var(--tbz-orange);color:#fff;}

/* Featured widget card (first item in wireframe) */
.tbz-widget-card{
    background:linear-gradient(160deg,#fff, #FFF3E4);
    border:2px dashed var(--tbz-orange);
}
.tbz-widget-card .tbz-badge{background:var(--tbz-orange);color:#fff;}

/* ==========================================================================
   6. Single Deal page
   ========================================================================== */
.tbz-single-deal{padding:40px 0 60px;}
.tbz-single-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:start;
}
.tbz-single-grid img{border-radius:var(--radius);border:1px solid var(--tbz-border);}
.tbz-single-info h1{font-size:26px;margin-top:0;}
.tbz-single-info .tbz-price{font-size:22px;color:var(--tbz-pink);font-weight:800;margin:10px 0;}
.tbz-single-cta{
    display:inline-block;
    background:var(--tbz-pink);
    color:#fff;
    padding:14px 30px;
    border-radius:30px;
    font-weight:700;
    font-size:16px;
    margin-top:12px;
}
.tbz-single-cta:hover{background:var(--tbz-orange);}
.tbz-related h2{margin-top:50px;}

/* ==========================================================================
   7. Generic page content (About / Contact / Terms)
   ========================================================================== */
.tbz-page{padding:50px 0 70px;}
.tbz-page h1{font-size:30px;border-left:6px solid var(--tbz-pink);padding-left:14px;}
.tbz-page .entry-content{max-width:820px;font-size:16px;}
.tbz-page .entry-content h2{color:var(--tbz-pink);}

.tbz-contact-form input, .tbz-contact-form textarea{
    width:100%;
    padding:12px 14px;
    margin-bottom:14px;
    border:2px solid var(--tbz-border);
    border-radius:10px;
    font-family:inherit;
    font-size:15px;
}
.tbz-contact-form button{
    background:var(--tbz-pink);
    color:#fff;
    border:none;
    padding:12px 28px;
    border-radius:30px;
    font-weight:700;
}

/* ==========================================================================
   8. Footer
   ========================================================================== */
.tbz-footer{background:var(--tbz-dark);color:#d9d9e6;padding:46px 0 0;margin-top:40px;}
.tbz-footer-cols{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    padding-bottom:30px;
    border-bottom:1px solid rgba(255,255,255,0.12);
}
.tbz-footer-cols h3{color:#fff;font-size:16px;margin-bottom:14px;}
.tbz-footer-cols h3.connect{color:var(--tbz-yellow);}
.tbz-footer-cols h3.discounts{color:var(--tbz-orange);}
.tbz-footer-cols li{margin-bottom:9px;font-size:14px;}
.tbz-footer-cols a:hover{color:#fff;text-decoration:underline;}
.tbz-social{display:flex;gap:12px;margin-top:10px;}
.tbz-social a{
    width:34px;height:34px;border-radius:50%;
    background:rgba(255,255,255,0.1);
    display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:700;
}
.tbz-social a:hover{background:var(--tbz-pink);}
.tbz-footer-bottom{
    text-align:center;
    padding:18px 0;
    font-size:13px;
    color:#a9a9bd;
}
.tbz-footer-bottom a{margin:0 8px;}

/* ==========================================================================
   9. Responsive
   ========================================================================== */
@media (max-width:900px){
    .tbz-single-grid{grid-template-columns:1fr;}
    .tbz-footer-cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
    .tbz-topbar-grid{grid-template-columns:1fr;text-align:center;}
    .tbz-topbar-grid .tbz-subscribe-form{justify-self:center;margin-top:6px;}
    .tbz-header-grid{flex-direction:column;align-items:center;}
    .tbz-logo{width:auto;height:auto;max-width:100%;justify-content:center;}
    .tbz-header-right{width:100%;height:auto;}
    .tbz-offers-strip{margin-top:10px;}
    .tbz-nav-toggle{display:block;margin-left:auto;}
    .tbz-nav .container{position:relative;}
    .tbz-nav ul.tbz-menu{
        display:none;
        flex-direction:column;
        width:100%;
        background:var(--tbz-dark);
    }
    .tbz-nav ul.tbz-menu.tbz-menu-open{display:flex;}
    .tbz-nav li{width:100%;}
    .tbz-dropdown{position:static;box-shadow:none;border-radius:0;background:rgba(255,255,255,0.05);}
    .tbz-dropdown a{color:#fff;}
    .tbz-footer-cols{grid-template-columns:1fr;text-align:center;}
    .tbz-social{justify-content:center;}
}
@media (max-width:480px){
    .tbz-logo{font-size:22px;}
    .tbz-deal-row{grid-auto-columns:260px;}
}