/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/

/* Βασικό layout */
.contact-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}




.row-advanced {
    display: flex;
    gap: 20px;
}

.row-advanced .col-1-3 {
    width: 33.33%;
}

.row-advanced .col-2-3 {
    width: 66.66%;
}

@media (max-width: 768px) {
    .row-advanced {
        flex-direction: column;
    }
    .row-advanced .col-1-3,
    .row-advanced .col-2-3 {
        width: 100%;
    }
}





@media (max-width: 768px) {
    .contact-wrapper {
        flex-direction: column;
    }
}

/* Στήλη φόρμας */
.contact-form {
    width: 100%;
}

/* Στήλη ωραρίου */
.contact-hours {
    width: 35%;
}

@media (max-width: 768px) {
    .contact-hours {
        width: 100%;
        text-align: center;
    }
}

/* Inputs όπως Contact Form 7 */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 3px;
    font-size: 16px;
    color: #333;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.contact-form textarea {
    height: 180px; /* περίπου διπλό από πριν */
}

/* Placeholder style ίδιο με CF7 */
.contact-form input::placeholder,
.contact-form textarea::placeholder,
.contact-form select {
    color: #7a828d;
    opacity: 1;
    font-size: 16px;
}

/* Focus state ίδιο με CF7 */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: #1e88e5;
    outline: none;
}


/* Ίδιο κουμπί με CF7 */
.contact-form button {
    width: 100%;
    padding: 14px;
    background: #1e88e5;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 17px;
    cursor: pointer;
    transition: 0.2s ease;
}

.contact-form button:hover {
    background: #1565c0;
}

/* Δύο στήλες όπως CF7 */
.row {
    display: flex;
    gap: 20px;
}

.row .col {
    width: 50%;
}

@media (max-width: 768px) {
    .row {
        flex-direction: column;
    }
    .row .col {
        width: 100%;
    }
}

/* Popup στο στυλ CF7 */
/* RESET για να μην επηρεάζεται από BeTheme */
.popup, .popup * {
    all: unset;
    box-sizing: border-box;
    display: revert;
}

/* Ξαναορίζουμε το popup */
.popup {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0,0,0,0.6) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999999999 !important;
}

/* Ξαναορίζουμε το popup-content */
.popup-content {
    background: #fff !important;
    padding: 25px !important;
    border-left: 4px solid #46b450 !important;
    border-radius: 3px !important;
    max-width: 400px !important;
    width: 90% !important;
    font-size: 17px !important;
    color: #333 !important;
    box-shadow: 0 0 20px rgba(0,0,0,0.2) !important;
    text-align: left !important;
    display: block !important;
    position: relative !important;
    z-index: 999999999 !important;
}

/* Κουμπί μέσα στο popup */
.popup-content button {
    margin-top: 15px !important;
    padding: 10px 15px !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    background-color: var(--mfn-button-theme-bg) !important;
    background-image: var(--mfn-button-theme-bg-image) !important;
    border-color: var(--mfn-button-theme-border-color) !important;
    color: var(--mfn-button-theme-color) !important;
    box-shadow: var(--mfn-button-theme-box-shadow) !important;
}




.contact-form button,
input[type="submit"] {
  background-color: var(--mfn-button-theme-bg);
  background-image: var(--mfn-button-theme-bg-image);
  border-color: var(--mfn-button-theme-border-color);
  color: var(--mfn-button-theme-color);
  box-shadow: var(--mfn-button-theme-box-shadow);
}


.contact-form button:hover,
input[type="submit"]:hover {
  background-color: var(--mfn-button-theme-bg-hover);
  background-image: var(--mfn-button-theme-bg-image-hover);
  border-color: var(--mfn-button-theme-border-color-hover);
  color: var(--mfn-button-theme-color-hover);
}