/*
Theme Name: Pembe Child
Author: WebGeniusLab
Author URI: http://webgeniuslab.net
Description: WebGeniusLab team presents absolutely fresh and powerful WordPress theme. It combines new technologies and functional design that helps to showcase your content in better way. This WordPress theme is developed with attention to details, so you can create effective presentation of a website easily. Enjoy building web pages with our product!
Version: 1.0
Template: pembe
Text Domain: pembe-child
*/

/*Màu nền Side Panel*/
#side-panel.side-panel_open {
	background-color: #2d4341;
}


/* ===> CSS cho form booking <=== */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap');

.booking-form-wrapper {
  font-family: 'Quicksand', sans-serif;
  background: #fffdf6;
  padding: 30px;
  border-radius: 12px;
  max-width: 650px;
  margin: 40px auto;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  color: #333;
}

.booking-form-wrapper h3 {
  text-align: center;
  margin-bottom: 25px;
  color: #2a2a2a;
  font-weight: 600;
  font-size: 24px;
}

.form-heading {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 15px;
  color: #2a2a2a;
}

.form-group {
  margin-bottom: 20px;
}

/* === INPUT, TEXTAREA, DATE === */
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
  font-family: 'Quicksand', sans-serif;
  box-sizing: border-box;
  transition: 0.3s ease;
  background-color: #fffdf6;
  color: #333;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

/* === DATE PAIR === */
.date-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.date-field {
  flex: 1;
  min-width: 45%;
}

.date-field span {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 14px;
  color: #333;
}

.date-field .wpcf7-form-control-wrap {
  display: block;
}

/* === STYLE DROPDOWN === */
.drop_view {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fffdf6 !important;
  border: 1px solid #ddd !important;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 15px;
  font-family: 'Quicksand', sans-serif;
  width: 100%;
  color: #333;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='16' height='16' viewBox='0 0 20 20' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7L10 12L15 7' stroke='%23333' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  cursor: pointer;
}

.drop_view:focus {
  outline: none;
  border-color: #999;
  box-shadow: 0 0 0 2px rgba(66, 107, 31, 0.1);
}

/* === NÚT GỬI === */
.form-submit {
  text-align: center;
}

.form-submit input[type="submit"] {
  background-color: #a98064;
  color: white;
  font-size: 16px;
  padding: 12px 28px;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  font-family: 'Quicksand', sans-serif;
  transition: background-color 0.3s ease;
}

.form-submit input[type="submit"]:hover {
  background-color: #c59a7d;
}

/* === THÔNG BÁO LỖI === */
.booking-form-wrapper span.wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #d43c3c;
  font-weight: 500;
  font-family: 'Quicksand', sans-serif;
}

/* === GHI ĐÈ TRẠNG THÁI LỖI === */
.booking-form-wrapper .wpcf7-not-valid {
  border: 1px solid #d43c3c !important;
  background-color: #fffdf6 !important;
  box-shadow: none !important;
  color: #333 !important;
}

/* === DROPDOWN LỖI === */
.booking-form-wrapper .drop_view.wpcf7-not-valid {
  background-color: #fffdf6 !important;
  border-color: #d43c3c !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='16' height='16' viewBox='0 0 20 20' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7L10 12L15 7' stroke='%23333' stroke-width='2'/%3E%3C/svg%3E") !important;
}

/* === SMOOTH TRANSITION === */
.booking-form-wrapper input,
.booking-form-wrapper select,
.booking-form-wrapper textarea {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Ẩn khung nếu chưa có nội dung */
.booking-form-wrapper .form-response-message .wpcf7-response-output:empty {
  display: none !important;
}

/* Style khi có nội dung (thành công hoặc lỗi) */
.booking-form-wrapper .form-response-message .wpcf7-response-output {
  display: block;
  margin-top: 20px;
  padding: 12px 20px;
  border: 1px solid #e0a631;
  background-color: #fffdf2;
  color: #444;
  font-size: 14px;
  border-radius: 6px;
  font-family: 'Quicksand', sans-serif;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* Lỗi */
.booking-form-wrapper .wpcf7-validation-errors {
  border-color: #d43c3c;
  background-color: #fff4f4;
  color: #c6453b;
}

/* Thành công */
.booking-form-wrapper .wpcf7-mail-sent-ok {
  border-color: #4caf50;
  background-color: #f1fff1;
  color: #2d7a33;
}
/*===> Hết css form booking <=== */

/* ===> Hiệu ứng Glassmorphism cho container hoặc cột Elementor <=== */
.glass3d { 
  --filter-glass3d: blur(32px) brightness(0.85) saturate(2.5); 
  --color-glass3d: hsl(189 80% 10% / 0.2); 
  --noise-glass3d: url("https://www.transparenttextures.com/patterns/egg-shell.png"); 

  position: relative; 
  z-index: 4; 
  box-shadow:  
    0 0 0.75px hsl(205 20% 10% / 0.2), 
    0.7px 0.8px 1.2px -0.4px hsl(205 20% 10% / 0.1), 
    1.3px 1.5px 2.2px -0.8px hsl(205 20% 10% / 0.1), 
    2.3px 2.6px 3.9px -1.2px hsl(205 20% 10% / 0.1), 
    3.9px 4.4px 6.6px -1.7px hsl(205 20% 10% / 0.1), 
    6.5px 7.2px 10.9px -2.1px hsl(205 20% 10% / 0.1), 
    8px 9px 14px -2.5px hsl(205 20% 10% / 0.2); 
}

.glass3d::before { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  pointer-events: none; 
  border-radius: inherit; 
  overflow: hidden; 
  z-index: 3; 
  
  -webkit-backdrop-filter: var(--filter-glass3d); 
  backdrop-filter: var(--filter-glass3d); 
  background-color: var(--color-glass3d); 
  background-image: var(--noise-glass3d); 
  background-size: 100px; 
  background-repeat: repeat; 
}

.glass3d::after { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  pointer-events: none; 
  border-radius: inherit; 
  overflow: hidden; 
  z-index: 5; 
  
  box-shadow: 
    inset 2px 2px 1px -3px hsl(205 20% 90% / 0.8), 
    inset 4px 4px 2px -6px hsl(205 20% 90% / 0.3), 
    inset 1.5px 1.5px 1.5px -0.75px hsl(205 20% 90% / 0.15), 
    inset 1.5px 1.5px 0.25px hsl(205 20% 90% / 0.03), 
    inset 0 0 0.25px 0.5px hsl(205 20% 90% / 0.03); 
}

.glass3d > * { 
  position: relative; 
  z-index: 6; 
}



/* ===> Kết thúc Glassmorphism <=== */