/* ==========================================================================
   Site UI refresh — additive overrides, loaded after style.css/style-rtl.css
   Modernizes color/typography/spacing/shadows without touching markup or JS.
   ========================================================================== */

:root {
    --brand: #FF6B35;
    --brand-dark: #E4551F;
    --ink: #1F2937;
    --ink-soft: #6B7280;
    --surface: #FFFFFF;
    --surface-soft: #F7F7F8;
    --border-soft: #ECECEE;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow-sm: 0 2px 8px rgba(31, 41, 55, 0.06);
    --shadow-md: 0 8px 24px rgba(31, 41, 55, 0.10);
    --transition: all .2s ease;
}

body {
    color: var(--ink-soft);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .titleWithline {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}

a { transition: var(--transition); }

/* Header */
#header {
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 20;
}
#header .menu > ul > li > a {
    transition: var(--transition);
}
#header .menu ul li ul.menu-categories,
#header .user-menu {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
#header .user-toggle span img {
    border-radius: 50%;
    transition: var(--transition);
}
#header .user-toggle:hover span img { box-shadow: 0 0 0 2px var(--brand); }

/* Buttons */
.button,
input[type="button"],
input[type="submit"],
.newsletter-btn {
    border-radius: var(--radius-sm) !important;
    transition: var(--transition) !important;
}
.button.color, input[type="button"], input[type="submit"], .newsletter-btn {
    background-color: var(--brand) !important;
}
.button.color:hover, input[type="button"]:hover, input[type="submit"]:hover, .newsletter-btn:hover {
    background-color: var(--brand-dark) !important;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* Section titles */
.titleWithline:after { background-color: var(--brand); }
#titlebar { box-shadow: var(--shadow-sm); }

/* Search bar */
#advanced-search {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.search-by-keyword button { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }

/* Category quick-nav pills */
.home-cats a {
    background-color: var(--brand) !important;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.home-cats a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Recipe / tips / blog cards */
.recipe-block {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    background: var(--surface);
}
.recipe-block:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}
.recipe-block-img { border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.recipe-block-content h3 a { color: var(--ink); }
.recipe-block-content h3 a:hover { color: var(--brand); }
.recipe-category a, .recipe-type { color: var(--ink-soft); }
.author-recipe img { border-radius: 50%; }

/* Pagination */
.pagination ul li a.current-page,
.pagination .current,
.pagination li a:hover,
.pagination-next-prev ul li a:hover,
ul.pagination li.paginate_button.active a {
    background-color: var(--brand) !important;
    border-radius: 50%;
}
.pagination li a { transition: var(--transition); }

/* Forms */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
textarea,
select {
    border-radius: var(--radius-sm) !important;
    transition: var(--transition);
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus {
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15) !important;
}

/* Login / register modal */
.login-model {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.login-model input {
    border-radius: var(--radius-sm);
}
.login-model .button.color { width: 100%; }

/* Newsletter band */
.subscribe-section { background-color: var(--ink); }
.subscribe-section .newsletter { border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; }

/* Footer */
#footer { background-color: #16202E; }
#footer .titleWithline.footer:after { background-color: var(--brand); }
.footer-links a { transition: var(--transition); }
.footer-links a:hover { color: var(--brand) !important; padding-left: 4px; }
#footer-bottom { background-color: #101825; }

/* Notifications */
.notification { border-radius: var(--radius-sm); }
.notification.success,
.alert.alert-success { border-left: 4px solid #2E9E5B; }
.notification.error,
.alert.alert-danger { border-left: 4px solid var(--brand-dark); }
.notification.warning { border-left: 4px solid #E0A800; }
.notification.notice { border-left: 4px solid var(--brand); }
.alert.alert-success, .alert.alert-danger { border-radius: var(--radius-sm); }

/* Breadcrumbs */
#breadcrumbs ul li a:hover { color: var(--brand) !important; }

/* Recipe detail */
.recipe-details {
    background: var(--surface-soft);
    border-radius: var(--radius);
    padding: 15px 20px;
}
.recipe-cat a, .recipe-cat i { color: var(--brand); }
.print:hover { color: var(--brand) !important; }
.ingredients label:before { transition: var(--transition); }
.ingredients input[type=checkbox]:checked + label:before,
ol.directions > li:before { background-color: var(--brand) !important; border-color: var(--brand) !important; }

/* Share buttons */
ul.share-post li a { transition: var(--transition); }
ul.share-post li a:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* Author box (recipe sidebar) */
.author-box {
    border: none !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
}
.author-box .title { color: var(--brand); }

/* Profile / dashboard sidebar */
.user-widget .sidebar-box {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.user-widget .user { background-color: var(--ink); }
.user-widget figure img { border-radius: 50%; border: 3px solid var(--brand); }
.navdashboard ul li a { transition: var(--transition); }
.navdashboard ul li a:hover { color: var(--brand) !important; }
.featured-recipe { border-radius: var(--radius-sm); overflow: hidden; }
a.featured-recipe img, .featured-recipe img { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }

/* Post quote (profile bio) & blog/trick detail */
.post-quote { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.post-quote .icon:before { color: var(--brand); }
.blog-page .post-name a:hover { color: var(--brand); }
.blog-img img { border-radius: var(--radius); }
.topic-tags li { transition: var(--transition); }
.topic-tags li:hover { background-color: var(--brand) !important; }

/* Dashboard / my recipes */
.dashboard-box { border-bottom: 2px solid var(--border-soft); }
.dashboard-wrapper { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.adstatus { border-radius: 20px; }
.btns-actions .btn-action { transition: var(--transition); }
.btns-actions .btn-action:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); color: #fff !important; background-color: var(--brand) !important; }

/* Recipe submit form */
.form-group-separator { border-color: var(--border-soft) !important; }
.upload-btn { border-radius: var(--radius-sm); background-color: var(--ink) !important; }
.upload-btn:hover { background-color: var(--brand) !important; }
.img-upload, .img-inline { border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.compose-message-editor { border-radius: var(--radius-sm); transition: var(--transition); }

/* Contact page */
.contact-info .item {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    padding: 25px 15px;
}
.contact-info .item:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.contact-info .item i { color: var(--brand); font-size: 28px; }
.image-with-caption { border-radius: var(--radius); overflow: hidden; }
.alert-message { box-shadow: var(--shadow-md) !important; }
.alert-message i { color: var(--brand) !important; }
.alert-message a.button { border-radius: 50px !important; }