/*
--------------------------------------
Cart Zipcode Widget Styles
--------------------------------------
*/

.cart-summary__container .cart-zipcode-widget {
  background : white;
  padding    : 24px;
  margin-top : 20px;
  border     : 1px solid #E5E8EB;
  transition : all 0.3s ease;
}

.cart-zipcode-widget:hover {
  box-shadow : 0 2px 8px rgba(0, 0, 0, 0.08);
}

/*
--------------------------------------
Widget Header
--------------------------------------
*/

.cart-zipcode-widget__header {
  display        : flex;
  align-items    : center;
  gap            : 12px;
  margin-bottom  : 16px;
  padding-bottom : 16px;
  border-bottom  : 1px solid #E5E8EB;
}

.cart-zipcode-widget__header svg {
  flex-shrink : 0;
}

.cart-zipcode-widget__title {
  flex : 1;
}

.cart-zipcode-widget__title h3 {
  font-size   : 18px;
  font-weight : 600;
  color       : var(--color-primary);
  margin      : 0 0 4px 0;
  line-height : 1.2;
}

.cart-zipcode-widget__current-location {
  font-size   : 14px;
  color       : var(--color-secondary);
  margin      : 0;
  font-weight : 500;
}

#cart-zipcode-current-value {
  font-weight : 600;
  color       : var(--color-primary);
}

/*
--------------------------------------
Widget Content
--------------------------------------
*/

.cart-zipcode-widget__content {
  margin-top : 16px;
}

.cart-zipcode-widget__description {
  font-size   : 14px;
  color       : #666;
  margin      : 0 0 16px 0;
  line-height : 1.5;
}

/*
--------------------------------------
Widget Form
--------------------------------------
*/

.cart-zipcode-widget__form {
  display        : flex;
  flex-direction : column;
  gap            : 12px;
}

.cart-zipcode-widget__input-group {
  display        : flex;
  flex-direction : column;
}

.cart-zipcode-widget__input,
.cart-zipcode-widget__commune {
  width         : 100%;
  padding       : 12px 16px;
  border        : 1px solid #DDE2E6;
  border-radius : 4px;
  font-size     : 14px;
  transition    : all 0.2s ease;
  background    : white;
}

.cart-zipcode-widget__input:focus,
.cart-zipcode-widget__commune:focus {
  outline      : none;
  border-color : var(--color-secondary);
  box-shadow   : 0 0 0 3px rgba(0, 164, 188, 0.1);
}

.cart-zipcode-widget__input::placeholder {
  color : #999;
}

.cart-zipcode-widget__input.zipcode-valid {
  border-color     : #28a745;
  background-color : #f0f9f4;
}

.cart-zipcode-widget__input.input-error {
  border-color     : #dc3545;
  background-color : #fff5f5;
  animation        : shake 0.3s ease;
}

/* Commune select - hidden by default */
.cart-zipcode-widget__commune.hidden {
  display : none;
}

.cart-zipcode-widget__commune {
  background-image    : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232C3248' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat   : no-repeat;
  background-position : right 12px center;
  background-size     : 12px;
  -webkit-appearance  : none;
  -moz-appearance     : none;
  appearance          : none;
  padding-right       : 36px;
}

/*
--------------------------------------
Widget Button
--------------------------------------
*/

.cart-zipcode-widget__btn {
  width           : 100%;
  padding         : 14px 24px;
  font-size       : 15px;
  font-weight     : 600;
  border          : none;
  border-radius   : 4px;
  cursor          : pointer;
  transition      : all 0.3s ease;
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 8px;
  text-transform  : none;
}

.cart-zipcode-widget__btn svg {
  transition : transform 0.2s ease;
}

.cart-zipcode-widget__btn:hover:not(:disabled) {
  transform  : translateY(-1px);
  box-shadow : 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cart-zipcode-widget__btn:hover:not(:disabled) svg {
  transform : translateX(3px);
}

.cart-zipcode-widget__btn:disabled {
  opacity : 0.6;
  cursor  : not-allowed;
}

.cart-zipcode-widget__btn.loading {
  position : relative;
  color    : transparent;
}

.cart-zipcode-widget__btn.loading::after {
  content          : '';
  position         : absolute;
  width            : 20px;
  height           : 20px;
  top              : 50%;
  left             : 50%;
  margin-left      : -10px;
  margin-top       : -10px;
  border           : 3px solid #ffffff;
  border-radius    : 50%;
  border-top-color : transparent;
  animation        : spin 0.8s linear infinite;
}

.cart-zipcode-widget__btn.success {
  background-color : #28a745 !important;
  border-color     : #28a745 !important;
}

#cart-zipcode-validate-btn {
  display : flex;
}

/*
--------------------------------------
Animations
--------------------------------------
*/

@keyframes shake {
  0%, 100% {
    transform : translateX(0);
  }
  25% {
    transform : translateX(-8px);
  }
  75% {
    transform : translateX(8px);
  }
}

@keyframes spin {
  to {
    transform : rotate(360deg);
  }
}

/*
--------------------------------------
Responsive
--------------------------------------
*/

@media (max-width : 768px) {
  .cart-zipcode-widget {
    padding    : 20px;
    margin-top : 16px;
  }

  .cart-zipcode-widget__header {
    margin-bottom  : 12px;
    padding-bottom : 12px;
  }

  .cart-zipcode-widget__title h3 {
    font-size : 16px;
  }

  .cart-zipcode-widget__description {
    font-size : 13px;
  }

  .cart-zipcode-widget__btn {
    font-size : 14px;
    padding   : 12px 20px;
  }
}

@media (max-width : 480px) {
  .cart-zipcode-widget {
    padding : 16px;
  }

  .cart-zipcode-widget__header {
    flex-direction : column;
    align-items    : flex-start;
    gap            : 8px;
  }
}