/* Lexus Custom Redesign - Specific targeting for actual HTML structure */

/* Added CSS variables for light/dark mode theming */
:root {
  --bg-image: url("http://turkiye.lexus.com.tr/BasvuruLexus/images/lexusbg-beyaz.jpg");
  --text-color: #1a1a1a;
  --text-secondary: #333;
  --text-muted: #555;
  --bg-primary: rgba(255, 255, 255, 0.95);
  --bg-secondary: white;
  --bg-tertiary: #f8f9fa;
  --bg-quaternary: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  --border-color: #e0e0e0;
  --border-light: #ddd;
  --model-bg: white;
  --accent-color: #d47642;
}

/* Dark mode variables */
[data-theme="dark"] {
  --bg-image: url("http://turkiye.lexus.com.tr/BasvuruLexus/images/lexusbg-siyah.jpg");
  --text-color: white;
  --text-secondary: #e0e0e0;
  --text-muted: #b0b0b0;
  --bg-primary: rgba(0, 0, 0, 0.9);
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #2a2a2a;
  --bg-quaternary: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  --border-color: #404040;
  --border-light: #505050;
  --model-bg: #333333;
  --accent-color: #d47642;
}

/* Added dark mode toggle button */
.dark-mode-toggle {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 1000 !important;
  background: var(--accent-color) !important;
  color: white !important;
  border: none !important;
  border-radius: 50% !important;
  width: 50px !important;
  height: 50px !important;
  cursor: pointer !important;
  font-size: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
}

.dark-mode-toggle:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Updated body background to use CSS variables */
body {
  background: var(--bg-image) no-repeat center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 20px !important;
  font-family: Arial, sans-serif !important;
  color: var(--text-color) !important;
  transition: all 0.3s ease !important;
}

/* Target the actual PageWrapper container - expanded by 15% */
#PageWrapper {
  background: var(--bg-primary) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 20px !important;
  //box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 20px 60px var(--accent-color) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 1035px !important; /* Expanded from 900px by 15% */
  overflow: hidden !important;
  animation: fadeInUp 0.8s ease-out !important;
  border: 3px solid var(--accent-color) !important;
}

/* Hide TopBorder element */
#TopBorder {
  display: none !important;
}

#MainTitle {
  background: var(--bg-quaternary) !important;
  padding: 25px !important;
  text-align: center !important;
  /* Removed border-bottom from Başvuru Merkezi */
  border-bottom: none !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  color: var(--text-color) !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
}

/* Make menu links evenly spaced */
#NavWrapper {
  background: var(--bg-quaternary) !important;
  padding: 15px 30px !important;
  border-bottom: 1px solid var(--border-color) !important;
  display: flex !important;
  justify-content: space-evenly !important;
  align-items: center !important;
  min-height: 60px !important;
}

#NavWrapper a {
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
  border-radius: 25px !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  flex: 1 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  line-height: 1 !important; /* Added for better vertical alignment */
}

#NavWrapper a:hover {
  //background: var(--accent-color) !important;
  //color: white !important;
  transform: translateY(-2px) !important;
  //border:1px solid var(--accent-color) !important;
  box-shadow: 0 4px 15px rgba(212, 118, 66, 1.3) !important;
}

/* Style the Lexus link at the top */
.LexusLink {
  display: block !important;
  text-align: center !important;
  padding: 20px !important;
  margin: 0 !important; /* Removed margin-top */
  background: var(--bg-quaternary) !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 17px 17px 0 0 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

.LexusLink:hover {
  //background: linear-gradient(135deg, var(--accent-color) 0%, #e68a5a 100%) !important;
  color: white !important;
}

/* Target the actual FormWrapper */
.FormWrapper {
  background: var(--bg-secondary) !important;
  padding: 40px !important;
  margin: 0 !important;
  border-radius: 0 0 17px 17px !important;
}

/* Style the main title */
.Title {
  font-size: 32px !important;
  color: var(--text-color) !important;
  text-align: center !important;
  margin: 0 0 40px 0 !important;
  font-weight: 300 !important;
  letter-spacing: 2px !important;
}

/* Target the actual Models section */
#ModelsWrapper {
  margin: 30px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Update car models to display in 2 rows, 2 columns */
#Models {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  gap: 20px !important;
  padding: 0 !important;
  max-height: 500px !important;
  width: 100% !important; /* Added width 100% */
  justify-items: center !important; /* Added justify-items center */
}

/* Style the car selection items as boxes */
.RadioBtnItem.k {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  //padding: 20px !important;
  background: var(--model-bg) !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Hover state for car selection items */
.RadioBtnItem.k:hover {
  border-color: var(--accent-color) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(212, 118, 66, 0.2) !important;
}

/* Selected state for car selection items */
.RadioBtnItem.k.Selected,
.RadioBtnItem.k:active,
.RadioBtnItem.k[aria-selected="true"],
.RadioBtnItem.k:checked {
  border-color: var(--accent-color) !important;
  background: var(--bg-tertiary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 0 3px rgba(212, 118, 66, 0.2) !important;
    border-width: 4px !important;

}

/* Set car image width to 360px */
.RadioBtnItem.k img {
  //width: 360px !important;
  width: 100% !important;
  height: auto !important;
  max-height: 172px !important;
  object-fit: contain !important;
  //margin-bottom: 10px !important;
  border-radius:10px;
  box-shadow: rgba(212, 118, 66, 0.2) 0px 1px 0px, rgba(212, 118, 66, 0.2) 0px 7px 14px, rgba(212, 118, 66, 0.2) 0px 2px 14px;
 // box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(212, 118, 66, 0.2) 0px 10px 10px;
  position: relative !important; /* Added for animation positioning */

}

/* Hide model names, show only images */
.RadioBtnItem.k .Name {
  display: none !important;
}

/* Style form content section */
#FormContent {
  margin-top: 40px !important;
}

/* Style field containers */
.FieldContainer {
  margin-bottom: 25px !important;
}

.Field {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  margin-bottom: 8px !important;
}

.Field sup {
  color: #dc3545 !important;
  font-size: 16px !important;
}

/* Style form inputs */
.FieldValue input,
.FieldValue select {
  //width: 100% !important;
  padding: 15px !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  background: var(--bg-secondary) !important;
  color: var(--text-color) !important;
  transition: all 0.3s ease !important;
}

.FieldValue input:focus,
.FieldValue select:focus {
  outline: none !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 2px rgba(212, 118, 66, 0.2) !important;
}

/* Style gender radio buttons with #d47642 selection color */
#RadioBtnCinsiyet {
  display: flex !important;
  gap: 15px !important;
}

#RadioBtnCinsiyet .RadioBtnItem {
  flex: 1 !important;
  padding: 12px 20px !important;
  background: var(--bg-tertiary) !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 8px !important;
  text-align: center !important;
  text-decoration: none !important;
  color: var(--text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

#RadioBtnCinsiyet .RadioBtnItem:hover, #RadioBtnCinsiyet .RadioBtnItem.Selected ,#RadioBtnCinsiyet .RadioBtnItem:checked,
#RadioBtnCinsiyet .RadioBtnItem[aria-selected="true"]{
  border-color: var(--accent-color) !important;
  background: var(--bg-secondary) !important;
}

/* Updated gender selection to have #d47642 background and white text when selected */
/*#RadioBtnCinsiyet .RadioBtnItem.Selected {
  //background: var(--accent-color) !important;
  color: white !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 2px rgba(212, 118, 66, 0.3) !important;
}*/

/* Added additional selector for checked state */
/*#RadioBtnCinsiyet .RadioBtnItem:checked,
#RadioBtnCinsiyet .RadioBtnItem[aria-selected="true"] {
  background: var(--accent-color) !important;
  color: white !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 2px rgba(212, 118, 66, 0.3) !important;
}*/

/* Style privacy checkboxes section */
#Iletisim {
  margin-top: 40px !important;
  padding: 20px !important;
  background: var(--bg-tertiary) !important;
  border-radius: 10px !important;
  border-left: 4px solid var(--accent-color) !important;
}

.Text {
//  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--text-muted) !important;
  margin-bottom: 15px !important;
}

.TextCheck {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid var(--border-light) !important;
  border-radius: 3px !important;
  margin-right: 10px !important;
  vertical-align: top !important;
  margin-top: 2px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  background: var(--bg-secondary) !important;
}

.TextCheck:hover {
  border-color: var(--accent-color) !important;
}

.TextCheck.checked {
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

.TextCheck.checked::after {
  content: "✓" !important;
  color: white !important;
  font-size: 12px !important;
  display: block !important;
  text-align: center !important;
  line-height: 14px !important;
}

/* Style submit button */
.SendBtn {
  display: block !important;
  width: 200px !important;
  margin: 40px auto !important;
  padding: 15px 30px !important;
  background: var(--accent-color) !important;
  color: white !important;
  text-decoration: none !important;
  text-align: center !important;
  border-radius: 25px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.SendBtn:hover {
  background: #c06538 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(212, 118, 66, 0.3) !important;
}

.SendBtn[style*="opacity: 0.6"] {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* Style required fields section */
.ReqFields {
  margin-top: 40px !important;
  padding: 20px !important;
  background: var(--bg-tertiary) !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--text-muted) !important;
}

.ReqFields sup.blue {
  color: #dc3545 !important;
  font-weight: bold !important;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
  body {
    padding: 10px !important;
    background-size: cover !important;
  }

  #PageWrapper {
    border-radius: 15px !important;
    max-width: 95% !important;
  }

  .FormWrapper {
    padding: 25px !important;
  }

  .Title {
    font-size: 24px !important;
  }

  /* Keep 2x2 grid on tablet */
  #Models {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
  }

  .RadioBtnItem.k img {
    //width: 280px !important;
    width: 100% !important;
	
  }

  #RadioBtnCinsiyet {
    flex-direction: column !important;
  }

  .dark-mode-toggle {
    top: 10px !important;
    right: 10px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  body {
    background-size: cover !important;
  }

  .FormWrapper {
    padding: 20px !important;
  }

  .Title {
    font-size: 20px !important;
  }

  /* 1 column on mobile */
  #Models {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  .RadioBtnItem.k img {
    //width: 250px !important;
    width: 100% !important;
	
  }
}

/* Add smooth loading animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#Models a {
    min-width: 250px !important;
    max-width: 100% !important;
    width: auto;
}
#Models{
    width: 100% !important;
	max-height:100% !important;
    justify-items: center !important;
    justify-self: center;
	    grid-template-columns: auto auto;
    grid-template-rows: repeat(2, 1fr) !important;
}

@media (max-width: 768px) {
    #Models {
        grid-template-columns: auto !important;
        gap: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

div:has(>.LexusLink){
padding-top:0px !important;
}
#NavWrapper{
width:auto !important;
    max-width: 100%;
}
#ModelsWrapper{
width:100% !important;
max-width:100% !important;

}
.Container{
max-width:100% !important;
padding:0px !important;
}
.Formsep{
display:none !important;
}
 #HaberdarEt{
 top:0px !important;
 }
.ReqFields {
    margin-left: 0px;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
.FieldContainer .TextCheck.checked {
    text-decoration: none;
}
.FieldContainer > .Text .Link {
    color: var(--accent-color);
}
@media (max-width:689px){

#NavWrapper{
display: block !important;
position:relative;
}}

#Models.hero-image{
     justify-items:  center !important;
    justify-self: center !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 2fr !important; 
 
}
#Models.hero-image .interest{
//box-shadow:rgba(212 118, 66, 0.2) 0px 12px 28px 0px, rgba(212 118, 66, 0.2) 0px 2px 4px 0px, rgba(212 118, 66, 0.2) 0px 0px 0px 1px; 
 border-radius:20px;
     margin:0% 5% !important;
}
#Models.hero-image img{
  border-radius:20px;
  margin:0px;
}
/* Varsayılan masaüstü görünüm */
#NavWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: #fff;
  position: relative;
  transition: all 0.3s ease;
}

#NavWrapper a {
  text-decoration: none;
  color: #000;
  font-weight: 500;
  padding: 10px 16px;
}
 .mobile-burger {
    	display:none;
  }
/* --- MOBİL GÖRÜNÜM --- */
@media (max-width: 768px) {
  #NavWrapper {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 12px;
    overflow: hidden;
  }

  /* Hamburger butonu */
  .mobile-burger {
    font-size: 26px;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
    user-select: none;
	display:block;
  }

  /* Menüdeki linkler */
  #NavWrapper a {
    display: block;
    width: 100%;
    //border-bottom: 1px solid #eee;
    transition: all 0.3s ease;
  }

  /* Başlangıçta menüyü gizle */
  #NavWrapper:not(.open) a {
    max-height: 0;
    padding: 0;
    overflow: hidden;
	display:none !important;
  }

  /* Menü açıkken animasyonlu göster */
  #NavWrapper.open a {
    max-height: 60px;
    padding: 10px 16px;
    transition: max-height 0.35s ease, padding 0.25s ease;
  }

  /* Hamburgeri en üstte tut */
  .mobile-burger {
    position: relative;
    z-index: 10;
  }
}
  .interest img {
            width: 100% !important;
            /*height:200px;*/
            max-height: 260px !important;
            object-fit: cover;
            margin-top: 5px;
        }

        .interest a {
            background-image: none !important;
        }

        .interest span.Name {
            display: none !important;
        }

        .interest {
            display: inline-block !important;
            width: 100% !important;
            text-align: center !important;
        }

        #Models a.interest {
            background-image: none !important;
        }
		#Models a{
			margin: 0px !important;
		}
		

        .interest span {
            width: 100%;
            /*height: auto;*/
            max-height: 300px !important;
            display: inline-block !important;
        }
        /*
        .k.RadioBtnItem img {
            height: 90px;
        }*/

        /* Main title */
        .interest-page #MainTitle {
            display: none;
        }

        /* Nav wrapper */
        .interest-page #NavWrapper {
            display: none;
        }



        /* Top border */
        .interest-page #TopBorder {
            display: none;
        }

        /* Title */


        /* Form wrapper */
        .interest-page #PageWrapper .FormWrapper {
            display: none;
        }

        .interest-page .Title {
            font-size: 32px;
            text-align: center;
            margin: 0px !important;
        }
/*
        #rbLBX img {
            height: 90px;
        }*/

        .interest-car-desc {
            text-align: center;
        }

        .interest-page #ModelsWrapper {
            margin: 0px auto 0px auto !important;
        }

        .interest-page #Models {
            padding: 0px !important;
        }