/* ============================================================
   Coupon India site theme for Bootstrap 5
   Carries the site's visual identity (red/black/Roboto) and
   back-ports the Bootstrap 3 components this codebase still uses
   (panels, labels). Replaces the old customized
   /bootstrap-3.2.0-dist/css/bootstrap-theme.css
   ============================================================ */

/* ---------- Bootstrap 3 component compatibility ---------- */

/* .panel -> card-like block (markup still uses panel classes) */
.panel {
    background: #fff;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    margin: 0 0 5px 0;
}
.panel-heading {
    padding: 7px 15px;
    background-color: #f8f8f8;
    background-image: linear-gradient(to bottom, #fff, #F3F3F3);
    border: #ddd solid 1px;
    color: #cf0808;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    border-radius: 0px;
}
.panel-title {
    font-weight: bolder;
    font-size: 1.3em;
}
.panel-body {
    padding: 7px;
    margin-top: -1px;
    border: 1px solid #ddd;
    background: #fff;
}
.panel-red { border-left: 0; }
.panel-red > .panel-heading { color: #cf0808; }

/* .label / .label-info (used by bootstrap-tagsinput) */
.label {
    display: inline-block;
    padding: .25em .6em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    border-radius: .25rem;
}
.label-info { background-color: #DE0000; color: #fff; }

/* .close button compat (BS3 markup uses .close, BS5 ships .btn-close) */
.modal .close, .alert .close {
    background: none;
    border: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    padding: 0;
    float: right;
}
.modal .close:hover, .alert .close:hover { opacity: .75; }

/* ---------- brand + layout ---------- */

body {
    background-color: #000000;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    line-height: 1.75;
    font-size: 16px;
}

#login, #footer {
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.6);
    transition: box-shadow 200ms ease;
}
.container a { color: #CF0808; }

@media (min-width: 1200px) {
    /* max-width (not width) so it overrides BS5's 1140px xl cap;
       keeps navbar and container identical between 1200-1399px too */
    .container { max-width: 1170px; }
}

.contentbox {
    padding: 0px 0px;
    background-color: #FCFCFC;
    margin-top: 0;
}

/* This design uses zero-padding columns (carried over from BS3). The inner
   main/sidebar row must not use BS5's negative gutter margins or it extends
   past the white content box. The OUTER row keeps them: they cancel the
   container's 12px padding so the white box spans the same width as the
   navbar. */
.contentbox > .row {
    margin-left: 0;
    margin-right: 0;
}
.contentbox > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}
.main, .sidebar { padding: 0 0px; }

.title {
    margin: 0px 0px 2px 0px;
    padding: 10px 10px 10px 16px;
    background-color: #A81212;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}

/* ---------- navbar (Bootstrap 5 markup, brand red, container-width bar) ---------- */

.navbar-ci {
    background-color: #A81212;
    border-radius: 0px;
    border: 0;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* keep the red bar exactly as wide as the page .container at every breakpoint */
@media (min-width: 576px)  { .navbar-ci { max-width: 540px; } }
@media (min-width: 768px)  { .navbar-ci { max-width: 720px; } }
@media (min-width: 992px)  { .navbar-ci { max-width: 960px; } }
@media (min-width: 1200px) { .navbar-ci { max-width: 1170px; } }
.navbar-ci .navbar-brand, .navbar-ci .nav-link {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}
.navbar-ci .nav-link:hover, .navbar-ci .nav-link:focus,
.navbar-ci .nav-link.active {
    color: #ffd9d9;
}
.navbar-ci .navbar-toggler {
    border-color: rgba(255, 255, 255, .5);
}
.navbar-ci .navbar-toggler:focus {
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
}
.navbar-ci .navbar-brand img { height: 45px; }

/* ---------- buttons ---------- */

.btn-red {
    background-color: #A81212;
    background-image: linear-gradient(to bottom, #db2e2a 0%, #A81212 100%);
    border: 1px solid #A81212;
    color: #ffffff;
    text-shadow: none;
    margin-bottom: 4px;
}
.btn-red:hover, .btn-red:focus {
    color: #ffffff;
    background-color: #871111;
}
.btn-red:active, .btn-red.active {
    background-color: #A81212;
    border-color: #A81212;
}
.btn-red { color: #ffffff !important; }

.btn-white {
    transition: all 300ms linear;
    margin: 5px 0;
    background-color: #ffffff;
    border: 2px solid #A81212;
    font-weight: bold;
}
.btn-white:hover {
    transition: all 300ms linear;
    background-color: #a81212;
    border: 2px solid #a90003;
    color: #ffffff;
    text-shadow: none;
}

/* ---------- coupon panels ---------- */

.coupon-label, h2 {
    margin-top: 3px;
    margin-bottom: 3px;
    font-size: 26px;
    font-weight: 500;
    padding: 0;
    color: #CF0808;
    font-family: 'Arial', sans-serif;
}
/* old-version link behavior: underline on hover only
   (BS5 underlines links by default; BS3 did not) */
.coupon-label a {
    text-decoration: none;
}
.coupon-label a:hover {
    text-decoration: underline;
}
.description {
    padding: 5px 10px;
    color: #333;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.description img {
    max-width: 80%;
    height: auto;
    margin: auto;
    border: 1px solid #ddd;
}
.desctext {
    padding: 5px 8px;
    min-height: 120px;
}
.coupon-btn {
    -webkit-transition: all 0.5s ease-in-out;
    transition: all .5s ease-in-out;
    padding: 0;
    margin: 5px 0;
}
.col-button { padding: 0; }
.revealthis {
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 5px 0;
    border: dashed 1px #881010;
    font: bold 14px tahoma;
    font-size: 18px;
    background-color: #9df9b6;
    text-align: center;
    text-decoration: none;
    color: #d62d2d;
    display: none;
    border-radius: 5px;
}
.featured {
    background-color: #ffff00;
    border: 3px solid #CDCDCD;
    color: #ff0000;
    font-weight: bold;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 16px;
}

/* ---------- tags ---------- */

.tags {
    padding: 0;
    margin-top: 10px;
    display: flex;
    align-items: center;
}
/* BS3 floated the label + tag block side by side; BS5 needs flex for that */
.tags .col-sm-2 { width: 40px; flex: 0 0 auto; }
.tags .col-sm-10 { flex: 1 1 auto; width: auto; }
.tag-label {
    width: 40px;
    padding: 1px 0px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .64);
    display: inline-block;
    text-align: center;
}
.tag-block { padding: 0px; }
.tags a:link { color: rgb(168, 18, 18); text-decoration: none; }
.tags a:visited { color: rgb(0, 129, 168); text-decoration: none; }
.tags a:hover {
    transition: all 300ms linear;
    color: #ba0000;
    background-color: #f9f9f9;
    border: 1px solid rgba(180, 177, 185, 0.63);
    box-shadow: 0px 0px 1px rgba(174, 174, 174, 0.66);
}
.tags a {
    transition: all 300ms linear;
    padding: 1px 7px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.64);
    margin-bottom: 2px;
    color: #A81212 !important;
    display: inline-block;
    margin-right: 4px;
    text-decoration: none;
}

/* ---------- sidebar / ads / share ---------- */

.sidebar > .panel { margin-bottom: 5px; }
.sidebar > .panel-body { margin: auto; }
.sidebar a.list-group-item { color: #CF0808; }

/* WordPress widget lists (e.g. blog "Stores" block) styled like
   the hand-written list-group blocks */
.panel .widget-area ul,
.widget-area ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.widget-area ul li {
    position: relative;
    display: block;
    padding: 10px 16px;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-bottom: -1px;
}
.widget-area ul li a { color: #CF0808; text-decoration: none; }
.widget-area ul li a:hover { color: #a81212; text-decoration: underline; }
/* widget panels keep the standard body padding (no 'ad' class) */
.widget-area .panel-body { padding: 7px; }
.ad img { margin: auto; }
.ad { text-align: center; }
.right-box { text-align: center; padding: 0px; }
.sharebox { margin-top: 0px; padding-left: 0; }
.twitter-button { text-align: center; }
.img-zoom, .coupon-btn { -webkit-transition: all 0.5s ease-in-out; transition: all .5s ease-in-out; }
/* share icons (Bootstrap Icons replacing the old PNGs) */
.share-icon {
    display: inline-block;
    margin-right: 6px;
    text-decoration: none;
}
.share-icon .bi {
    font-size: 20px;
    vertical-align: middle;
    color: #777;
}
.share-icon:hover .bi { color: #a81212; }
.rotate, .img-zoom:hover { transform: scale(1.3, 1.3); }

/* ---------- footer ---------- */

/* footer columns side by side (old BS3 spacing: 15px col padding,
   no negative row margins, so nothing pokes out of the white box) */
#footer .row {
    margin-left: 0;
    margin-right: 0;
}
#footer .row > [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
}

#footer {
    padding: 16px 0px;
    min-height: 100px;
    background-color: #f8f8f8;
    background-image: linear-gradient(to bottom, #fff, #F3F3F3);
    border: #ddd solid 1px;
    color: #cf0808;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    border-radius: 0px;
}
#footer a { color: #CF0808; }

/* ---------- store add box (owner tools) ---------- */

#addbox { padding: 5px 10px; }
#addbox > .alert { margin: 6px auto 6px auto; }
#cform, #dform { display: none; }
/* toast messages (replaces sweetalert) */
.ci-toast {
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    z-index: 3000;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.ci-toast.ok { background: #1d7a3e; }
.ci-toast.err { background: #a81212; }

/* ---------- auth pages ---------- */

#loginbox, #forgotbox, #signupbox {
    padding: 4% 10% 4% 10%;
    margin: auto;
}
#forgotbox { display: none; }
.recaptchabox { margin-bottom: 12px; }
@media screen and (max-height: 575px) {
    #rc-imageselect, .recaptchabox {
        transform: scale(0.77);
        transform-origin: 0 0;
    }
}

/* ---------- misc ---------- */

#gsearch { display: inline-block; max-height: 56px; }

/* Old-style compact search box (matches the previous BS3 design):
   34px tall, white input, light-gray border, slightly rounded,
   joined gradient button with dark magnifier icon */
.gsearch .form-control {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.gsearch .form-control:focus {
    color: #555;
    background-color: #fff;
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.gsearch .form-control::placeholder { color: #999; }
.gsearch .btn {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    background-image: linear-gradient(to bottom, #fff, #e0e0e0);
    border: 1px solid #ccc;
    border-radius: 0 4px 4px 0;
}
.gsearch .btn:hover,
.gsearch .btn:focus {
    color: #333;
    background-color: #e0e0e0;
    background-image: none;
    border-color: #adadad;
}
.gsearch .input-group { flex-wrap: nowrap; }
.gsc-input-box { border-radius: 18px; height: 34px !important; }
.gsc-search-button-v2 { height: 24px !important; }
.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 { width: auto !important; }
.products { padding: 0 5px; }
.products > .product { padding-left: 0px; padding-right: 0px; }
.thumbnail {
    margin: 2px;
    overflow: auto;
    height: 320px;
    cursor: pointer;
}
.bottom { margin-top: 5px; border-bottom: 1px solid #e3e3e3; }

@media (max-width: 768px) {
    .sharebox { text-align: center; }
    .main { margin-right: 0px; margin-left: 0px; }
    .desctext { border-right: 0px solid #ddd; }
    .title { text-align: center; }
    .addboxbtns { text-align: center; }
    .coupon-btn a { width: 70%; text-align: center; }
    .coupon-btn, .revealthis { margin: auto; text-align: center; }
    .sharebox img { width: 40px; height: 40px; }
    .coupon-label a { font-size: 0.7em; }
    .gsearch { width: 98% !important; margin-left: auto !important; margin-right: auto !important; }
}