/* ------------------------------------------------------------------
   GPlay Shop - dark theme in the spirit of the old ja_anion template.
   Styles the existing markup only. Images: shop-img/logo.png, shop-img/body-bg.png
------------------------------------------------------------------ */

* { box-sizing: border-box; }

html, body#bd { margin: 0; padding: 0; }

body#bd {
    background: #2e2e2e;
    color: #c8c8c8;
    font: 13px/1.5 Arial, Helvetica, sans-serif;
}

#ja-wrapper {
    background: url(shop-img/body-bg.png) center top no-repeat;
    padding-bottom: 10px;
}

a { color: #369; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; border: 0; }
h1, h2, h3, h4 { font-family: Georgia, "Times New Roman", serif; }

/* The old template's frame pieces; the panels below are drawn with CSS instead */
.top, .bot, .ml, .mr, .no-display, .content-links { display: none; }

.clearfix:after { content: ""; display: block; clear: both; }

.wrap > .main { margin: 0 auto; position: relative; }

/* ---- Header ---- */
#ja-header .main { padding: 22px 0 14px; }
h1.logo { float: left; margin: 0; }
h1.logo a {
    display: block;
    width: 590px;
    height: 85px;
    background: url(shop-img/logo.png) no-repeat left center;
}
h1.logo a span { position: absolute; left: -9999px; }
#ja-topnav { float: right; }

/* ---- Main navigation: top strip of the dark panel ---- */
#ja-mainnav .mid {
    position: relative;
    z-index: 2;
    background: linear-gradient(#3b3b3b, #242424);
    border: 1px solid #121212;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 0 14px rgba(0, 0, 0, .55);
    clip-path: inset(-20px -20px 0 -20px);
}
#ja-splitmenu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
#ja-splitmenu li { margin: 0; padding: 0; }
#ja-splitmenu li:empty { display: none; }
#ja-splitmenu li + li { border-left: 1px solid #474747; box-shadow: -1px 0 0 #161616; }
#ja-splitmenu a {
    display: block;
    position: relative;
    padding: 0 22px;
    line-height: 46px;
    color: #b3d2f1;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #000;
}
#ja-splitmenu a:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, .04); }
#ja-splitmenu a.active { color: #fff; }
#ja-splitmenu a.active:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    margin-left: -7px;
    border: 7px solid transparent;
    border-top: 0;
    border-bottom-color: #fff;
}

/* ---- Main panel: white content column + dark sidebar ---- */
#ja-container .mid {
    background: #1c1c1c;
    border: 1px solid #121212;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 0 14px rgba(0, 0, 0, .55);
}
#ja-container .main-inner { display: flex; align-items: stretch; }

#ja-mainbody { background: #fff; color: #353535; border-radius: 0 0 0 5px; }
#ja-content-main { padding: 6px 22px 22px; }
#ja-content-main p { margin: 10px 0; }
#ja-content-main h1, #ja-content-main h2 { color: #369; }

/* The home page opens with two <br> and a 30px spacer; trim that gap */
.item-page > div[align="center"] > br { display: none; }
.item-page > div[align="center"] > div[style*="padding-top:30px"] { padding-top: 4px !important; }

/* ---- Product grid: every cell holding a 250px product image becomes a card ---- */
#ja-content-main table { border-collapse: separate; border-spacing: 12px; margin: 0 auto; }
#ja-content-main td { vertical-align: top; padding: 4px 6px; }
#ja-content-main td:has(> p > a > img[width="250"]) {
    width: 50%;
    padding: 4px 12px 12px;
    text-align: center;
    background: #fff linear-gradient(#f0f0f0, #fff 46px);
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
#ja-content-main td:has(> p > a > img[width="250"]):hover { border-color: #08c; }
#ja-content-main td:has(> p > a > img[width="250"]) > p:first-child {
    margin: 6px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e6e6e6;
}
#ja-content-main td img { border-radius: 3px; }

/* Hover description (positioning comes from the inline rules in header.php) */
#ja-content-main a.tooltip { border-bottom: 0; }
#ja-content-main a.tooltip span.classic {
    color: #353535;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
}

/* ---- Buttons ---- */
a.ja-typo-btn {
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    background: #08c linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .06) 50%, rgba(0, 0, 0, .06) 51%, rgba(0, 0, 0, 0));
    border: 1px solid #006ea6;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
a.ja-typo-btn span {
    display: block;
    padding: 6px 16px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 11px;
}
a.ja-typo-btn:hover { color: #fff; text-decoration: none; background-color: #0077b3; border-color: #005a88; }

input[type="image"]:hover { opacity: .9; }

/* ---- Forms ---- */
#ja-content-main input[type="text"], #ja-content-main select, #ja-content-main textarea {
    font: 13px Arial, Helvetica, sans-serif;
    color: #353535;
    padding: 4px 6px;
    max-width: 100%;
    background: #f2f6fc;
    border: 1px solid #cfd8e3;
    border-radius: 3px;
}
#ja-content-main input[type="text"]:focus, #ja-content-main select:focus, #ja-content-main textarea:focus {
    outline: none;
    background: #ffc;
    border-color: #08c;
}

/* ---- "Cum comanzi" / donation panels: title sits on the border ---- */
.ja-typo-legend {
    position: relative;
    margin: 28px 0 16px;
    padding: 22px 16px 12px;
    border: 3px solid #ddd;
    border-radius: 6px;
    text-align: left;
}
.ja-typo-legend.legend-2 { border-color: #08c; }
#ja-content-main .ja-typo-legend .legend-title {
    position: absolute;
    top: -14px;
    left: 12px;
    margin: 0;
    padding: 2px 10px;
    background: #fff;
    color: #08c;
    font: bold 16px Arial, Helvetica, sans-serif;
}
ul.ja-typo-list { list-style: none; margin: 0; padding: 0; }
ul.ja-typo-list li { position: relative; padding: 3px 0 3px 18px; }
ul.ja-typo-list span.icon {
    position: absolute;
    left: 2px;
    top: 8px;
    border-left: 7px solid #08c;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* ---- Sidebar ---- */
#ja-right {
    background: #1c1c1c;
    color: #b5b5b5;
    font-size: 12px;
    padding: 16px 14px 2px;
    border-left: 1px solid #111;
    border-radius: 0 0 5px 0;
}
#ja-right a { color: #6fa8dc; }
#ja-right a:hover { color: #9cc6ee; }
#ja-right .ja-moduletable {
    margin: 0 0 14px;
    background: #202020;
    border: 1px solid #111;
    border-radius: 4px;
}
#ja-right .ja-moduletable h3 {
    margin: 0;
    padding: 8px 10px;
    background: linear-gradient(#313131, #252525);
    border-bottom: 1px solid #111;
    border-radius: 3px 3px 0 0;
    box-shadow: inset 0 1px 0 #3c3c3c;
    font: bold 11px Arial, Helvetica, sans-serif;
    letter-spacing: .6px;
    text-transform: uppercase;
}
#ja-right .ja-moduletable h3 > span {
    display: inline-block;
    padding: 2px 12px;
    color: #aaa;
    background: #171717;
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 1px 0 #3a3a3a;
}
#ja-right .ja-box-ct { padding: 12px 14px; border-top: 1px solid #2b2b2b; }
#ja-right .custom p { margin: 6px 0; }
#ja-right h1 { margin: 6px 0; color: #ddd; font: bold 15px Arial, Helvetica, sans-serif; }

/* ---- Footer strip ---- */
#ja-navhelper { margin-top: 14px; }
#ja-navhelper .mid {
    background: #1c1c1c;
    border: 1px solid #121212;
    border-radius: 6px;
    box-shadow: 0 0 14px rgba(0, 0, 0, .45);
}
#ja-navhelper .main-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    color: #8a8a8a;
    font-size: 11px;
}
.ja-links { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; }
.ja-links a { color: #8a8a8a; }
.ja-links a:hover { color: #ccc; }
#ja-footer { padding: 10px 0 20px; }

/* ------------------------------------------------------------------
   Phones: stack the sidebar under the content and the products in one column
------------------------------------------------------------------ */
@media (max-width: 760px) {
    body.bd #ja-wrapper { min-width: 0 !important; }
    body.bd .main { width: auto !important; margin: 0 10px; }
    h1.logo { float: none; }
    h1.logo a { width: 100%; max-width: 590px; height: 60px; background-size: contain; }
    #ja-splitmenu a { padding: 0 14px; }
    #ja-container .main-inner { flex-direction: column; }
    #ja-mainbody, #ja-right { width: auto !important; }
    #ja-mainbody { border-radius: 0; }
    #ja-right { border-left: 0; border-top: 1px solid #111; border-radius: 0 0 5px 5px; }
    #ja-content-main { padding: 6px 12px 16px; }
    #ja-content-main table:has(img[width="250"]),
    #ja-content-main table:has(img[width="250"]) tbody,
    #ja-content-main table:has(img[width="250"]) tr { display: block; }
    #ja-content-main td:has(> p > a > img[width="250"]) { display: block; width: auto; margin: 0 0 12px; }
    #ja-navhelper .main-inner { flex-direction: column; text-align: center; }
}