/* Reset some default styles */
*, *::before, *::after {
    margin: 0;
    box-sizing: border-box;
}

/* Global styles */
body {
    text-align: center;
    font-family: "Open Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.4;
}

/* Header styles */
header {
    display: flex;
    justify-content: space-between;
    height: 40px;
    background-color: #332D39;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 99;
    text-align: left;
    margin: 0;
}

header img {
    /* Style for header image (if any) */
}

.header-column {
    flex: 1;
    color: white;
    font-size: 0.8em;
}

.hheader {
    width: 100%;
    height: 0px;
    text-align: left;
    margin-top: 40px;
}

/* Container styles */
.container {
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 0px 10px 0px 10px;
    color: white;
    background: linear-gradient(90deg, rgba(0,65,103,1) 0%, rgba(0,44,69,1) 15%, rgba(0,44,69,1) 85%, rgba(0,65,103,1) 100%);
}

.container-body {
    text-align: left;
    max-width: 800px;
    width: auto;
    margin: 10px auto;
    padding: 20px 5px;
}

.url-input {
    font-size: 2.18em;
    padding-left: 5px;
    margin-bottom: 20px;
    text-align: center;
}

main {
    text-align: left;
    width: auto;
    max-width: 850px;
    margin: 10px auto;
    padding: 5px;
}

.footer {
    display: flex;
    flex-wrap: wrap;
	text-align: left;
}

.footer .fcolumn {
    /*width: 25%;*/ /* ak su 4 stlpce*/
	width: 33%;
    padding: 10px;
	font-size: 15px;
}

.footer .fcolumn h3 {
    margin-bottom: 10px;
	font-weight: bold;
}

.footer .fcolumn ul {
    list-style: square inside;
    padding: 0;
}

.footer .fcolumn ul li {
    margin-bottom: 2px;
}

.footer .fcolumn ul li a {
    text-decoration: none;
    color: #000; 
}

/* Header styles */
h1 {
    padding-left: 0px;
    font-weight: 500;
    color: black;
    font-size: 1.9em;
    text-shadow: 2px 2px 4px silver;
    text-align: left;
    font-family: "Asap Condensed", sans-serif;
}

h2 {
    font-weight: 500;
    font-size: 1.6em;
    text-shadow: 2px 2px 4px silver;
    font-family: "Asap Condensed", sans-serif;
}

h3 {
    font-weight: 400;
    font-size: 1.3em;
	font-family: "Asap Condensed", sans-serif;
}

h4 {
    font-size: 1.25em;
    font-weight: 400;
    padding: 15px 0px;
    font-family: "Asap Condensed", sans-serif;
}

h5 {
    font-size: 1.15em;
    font-weight: 400;
    padding: 15px 0px;
    font-family: "Asap Condensed", sans-serif;
}

/* Box styles */
.box p {
    font-size: 1em;
    padding-top: 10px;
}

.box p img {
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
    border-radius: 7px;
}

/* Link styles */
h1 a, h2 a, h1 a:visited, h2 a:visited, .box a, .box a:visited, div.toc ol li a, div.toc ol li a:visited, .recent ul li a, .recent ul li a:visited {
    color: #0295bf;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: #0295bf;
}

h1 a:hover, h2 a:hover, .box a:hover, div.toc ol li a:hover, .recent ul li a:hover {
    color: #04d504;
    text-decoration-color: #04d504;
}

.like-link{
	color: #0295bf;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: #0295bf;
}

/* General text styles */
a, h1, h2, h3, h4, b, i, strong, li, p, .wrap {
    word-wrap: break-word;
    padding: 0px;
    margin: 0px;
}

b {
    font-weight: normal;
}

strong {
    font-size: inherit;
    font-family: "PT Sans", sans-serif;
    font-weight: 600;
}

ul {
    /* Optional list styles can be added here */
}

li::marker {
    font-size: 0.8em;
}

.input_form label {
    display: block;
    margin-bottom: 10px;
}

.input-form {
    display: flex;
    flex-direction: row;
    height: 3em;
    color: #332D39;
}

.input-form input[type="text"], button {
    padding: 5px;
}

.input-form input[type="text"] {
    flex-grow: 2;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border: 3px solid black;
    color: #332D39;
}

.input-form input[type="text"]:focus {
    outline: none;
}

.input-form button {
    width: 30%;
    float: right;
    background-color: #fcd90c;
    color: #000;
    font-size: 1em;
    cursor: pointer;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border: 3px solid black;
    border-left: none;
}

.input-form button:hover {
    background-color: #332D39;
	color: #fcd90c;
    font-weight: bold;
}

.status-message{ 
	font-size: 1.5em;
	color: red;
	font-weight: bold;
}

/* Feedback link styles */
a.feedback {
    color: white;
    text-decoration: none;
}

a.feedback:hover {
    color: white;
    text-decoration: underline dotted;
}

.feedback-form {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
    }
    .feedback-form div {
        margin-bottom: 15px;
        clear: both; /* Ensure div elements stack vertically */
    }
    .feedback-form label {
        display: block;
        margin-bottom: 5px;
    }
    .feedback-form input[type="text"],
    .feedback-form input[type="email"],
    .feedback-form textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box; /* Ensure padding is included in the width */
    }
    .feedback-form input[type="submit"] {
        width: auto;
        background-color: #4CAF50;
        color: white;
        cursor: pointer;
        border: none;
        padding: 10px 20px;
    }
    .feedback-form input[type="submit"]:hover {
        background-color: #45a049;
    }

/* kapča */
#your_name { 
	display: none;
}
/* Text alignment classes */
.center {
    text-align: center;
}

.right {
    text-align: right;
    padding-right: 10px;
}

.topten {
    padding-top: 10px;
}

/* URL box styles */
.urlbox {
    padding: 20px 20px;
    margin: 20px 0px;
    color: #4a4a4a;
    background-color: #e5e5e57a;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.urlbox a, .urlbox a:visited {
    color: #a3a7a2;
    background-color: #f9f87169;
}

/* Box styles */
.box {
    border: 0px solid #dcdcdc8c;
    margin: 20px 0px;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

/* Disclaimer styles */
.disclaimer h2, h3, h4, p {
    margin: 20px 0px;
}

/* Jump link title styles */
.jump-link-title {
    scroll-margin-top: 100px;
}

/* To the top scroll button styles */
#myBtn:hover {
    background-color: #fcd90c;
    font-weight: 500;
}

#myBtn, #myBtn:active, #myBtn:visited {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    font-size: 26px;
    color: #050505;
    cursor: pointer;
    padding: 5px;
    border-radius: 25px;
    background-color: #fcd90c;
    width: auto;
    height: auto;
    text-align: center;
    border: none;
}

/* Color classes */
.red {
    color: red;
}

.green {
    color: #23ee23;
}

.blue {
    color: #09bdf1;
}

.yellow {
    text-decoration: underline dotted #fcd90c;
    text-shadow: 2px 2px 2px black;
}

.black {
    color: black;
    text-shadow: none;
}

/* Justified text class */
.justified {
    text-align: justify;
}

/* Highlighted text class */
.highlighted {
    color: red;
    font-weight: 400;
    font-size: 1.2em;
    text-transform: uppercase;
    padding: 0px;
    font-family: "PT Sans Narrow", sans-serif;
}

/* Traffic text class */
.traffic {
    color: black;
    font-weight: 400;
    font-size: 1.2em;
}

/* Error message styles */
p.error-message {
    text-align: center;
    padding: 70px 20px;
    font-size: 1.2em;
    font-weight: normal;
    color: red;
    line-height: 40px;
}

/* Shopify lists related CSS  */

.shopify-list{
	list-style: square inside;
}

.shopify-list-item{
	
}

.shopify-product{
	text-transform: text-transform: capitalize;
	font-family: monospace;
	font-size: 0.9em;
}

.shopify-price{
		font-family: monospace;
		font-weight: bold;
		font-style: italic;	
}

/*placeholder image for loader script */
        #image-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        #image-overlay img {
            max-width: 250px;
			height: auto;
			border: 7px dotted black;
        }		

/* Mobile viewport styles */
@media (max-width: 700px) {
    .hide-mobile {
        display: none;
    }
	
	.footer .fcolumn {
    width: 100%;
	
}