/* custom wpcf7 */

/* 2. Style all the text input fields and textareas */
.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea {
	font-family: Manrope;
    font-style: normal;
    font-weight: 200 800;
    font-display: fallback;
    src: url(https://dev.farbica.si/wp-content/themes/twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2) format('woff2');
	
    width: 100%; /* Makes fields span the whole width */
    padding: 12px 15px; /* Makes the boxes taller and pads the text */
    border: 1px solid #ccc; /* Subtle grey border */
    border-radius: 5px; /* Slightly rounded corners */
    margin-top: 5px;
    margin-bottom: 15px;
    font-size: 16px; /* Prevents auto-zooming on mobile phones */
    box-sizing: border-box;
}

/* 3. Make the Submit button look modern */

.wpcf7 input[type="submit"] {
    background-color: #e99996;
    color: #ffffff;
    border: none;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s ease;
}


/* 4. Make the Submit button change color when hovered */
.wpcf7 input[type="submit"]:hover {
    background-color: #b63b0e; /* A slightly darker shade for the hover effect */
}

.wpcf7-list-item input[type="checkbox"],
.wpcf7-list-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.wpcf7-form-control-wrap .wpcf7-acceptance .wpcf7-list-item,
.wpcf7-form-control-wrap .wpcf7-radio .wpcf7-list-item {
	margin: unset;
}

/* 2. Setup the label as the anchor point */
.wpcf7-list-item label {
    position: relative;
    display: inline-block; 
    padding-left: 30px; /* Pushes text to the right to make room for the box */
    cursor: pointer;
    font-size: 16px;
    line-height: 22px; /* Matches the height of the box to keep text centered */
    min-height: 22px;
    color: #333;
    margin-right: 15px;
}

/* 3. Draw the Custom Box / Circle (Pinned to top-left) */
.wpcf7-list-item-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0; /* Pins it exactly to the top edge */
    width: 22px; /* Slightly larger for easier clicking */
    height: 22px;
    border: 2px solid #ccc;
    background-color: #fff;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* Make Radios perfectly round, Checkboxes slightly rounded */
.wpcf7-radio .wpcf7-list-item-label::before {
    border-radius: 50%;
}
.wpcf7-acceptance .wpcf7-list-item-label::before {
    border-radius: 4px;
}

/* 4. Draw the Checkmark and Radio Dot (Pinned precisely inside the box) */
.wpcf7-list-item-label::after {
    content: '';
    position: absolute;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Specific shape & exact math for the Checkmark */
.wpcf7-acceptance .wpcf7-list-item-label::after {
    left: 8px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
}

/* Specific shape & exact math for the Radio Dot */
.wpcf7-radio .wpcf7-list-item-label::after {
    left: 6px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
    transform: scale(0);
}

/* 5. CHECKED STATES: What happens when the user clicks them */
.wpcf7-list-item input:checked + .wpcf7-list-item-label::before {
    background-color: #d9534f; /* Farbica Red */
    border-color: #d9534f;
}

/* Show the Checkmark/Dot with a pop animation */
.wpcf7-acceptance input:checked + .wpcf7-list-item-label::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}
.wpcf7-radio input:checked + .wpcf7-list-item-label::after {
    opacity: 1;
    transform: scale(1);
}

/* 6. Hover effect */
.wpcf7-list-item:hover .wpcf7-list-item-label::before {
    border-color: #d9534f; 
}

.acf-cena-title {
	text-align: center;
    margin: 40px;
	padding-top: 50px;
}

/* Create the Row/Grid */
.acf-cena-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin: 0px -20px;
	gap: 20px;
    justify-content: flex-start; /* Centers the whole row if there's extra space */
}

/* Style the individual cards */
.cena-item-card {
    max-width: 230px; /* Prevents 1 or 2 lonely cards from stretching across the entire screen */
    box-sizing: border-box; /* Ensures padding doesn't break the width math */
    
    /* Your original beautiful styling: */
    padding: 20px;
    text-align: center;
}

/* Style the Image */
.cena-image img {
    width: 100%;
    height: 250px;
    object-fit: cover; /* Keeps all images exactly the same size without stretching */
    margin-bottom: 15px;
}

/* Style the Title */
.cena-title {
    font-size: 1.2rem;
    margin: 0 0 10px 0;
}

header nav {
	align-self: flex-start !important;
}

.page-id-200 main .wp-block-columns > .wp-block-column:first-child, .page-id-200 .acf-events, .page-id-228 .acf-events, .page-id-237 .acf-events, .page-id-196 .acf-events, .page-id-252 .acf-events {
	display: none !important;
}



.foot a, header a, header button, header .wp-block-image a, .cena-title a, .cena-date a, .cena-hour a, .cena-price a, .cena-image a {
    text-decoration: none !important;
    outline: none !important;
}

header figure {
	max-width: 350px;
}

.cena-date {
	font-size: 80%;
}

.cena-hour {
	margin-bottom: 20px;
	font-size: 70%;
}

/* Style the Price */
.cena-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000000;
}

@media (max-width: 650px) {
    .acf-cena-grid {
        grid-template-columns: 1fr; /* 1 fraction of the space = 100% width */
		padding-top: 0px;
    }
	
	.cena-item-card {
		max-width: unset;
	}
	
	.cena-image img {
		height: 100%;
	}
	
	header figure {
		max-width: unset;
	}
}