/* My Pets frontend styling */
.awcp-pets { margin-top: 0px; }

/* ===== Header (title left, Add Pet right) ===== */
.awcp-pets__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 0 0 18px;
}

/* Hide the original header text node */
.awcp-pets__header h3{ display:none; }

/* Visible title text */
.awcp-pets__header::before{
  content: "Registered Pets";
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  color: inherit;
}

/* Button on the right */
.awcp-pets__header .awcp-btn{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  white-space: nowrap;
}

/* If the header is placed inside a wrapper with the same class, keep it full-width */
.awcp-pets__list > .awcp-pets__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 18px;
}

/* ===== Lists / Grid ===== */
/* Outer wrapper should NOT be the grid (prevents empty columns when nested) */

.awcp-pets__list{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
@media (max-width: 640px){
    .awcp-pets__list{
        grid-template-columns: 1fr;
    }
}
/* The actual grid lives on the inner list that contains the cards */
#awcp-pets-list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* max 3 cols on desktop */
  gap: 18px;                                        /* spacing between cards */
}

/* Tablet: 2 columns */
@media (max-width: 1024px){
  #awcp-pets-list{ grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: 1 column */
@media (max-width: 640px){
  #awcp-pets-list{ grid-template-columns: 1fr; }
}

/* ===== Pet cards ===== */
.awcp-pet-card{
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 16px;
  background: #fff;
}

.awcp-pet-card h4 {
    margin: 0 0 10px !important;
    font-size: 20px !important;
    color: #ffffff !important;
    font-weight: normal !important;
    background: #9a9484 !important;
    padding: 5px 10px !important;
    border-radius: 2px !important;
}
.awcp-pet-card .meta{ opacity:.8; margin-bottom: 10px; }
.awcp-pet-card .actions{ margin-top: auto; }

.awcp-pet-card .actions a {
    text-decoration: none;
    margin-top: auto !important;
    background: #f5f5f5;
    padding: 5px 10px;
    border-radius: 5px;
}
/* ===== Add Pet form wrapper ===== */
.awcp-petform {
    background: #f2f2ef;
    border-radius: 10px !important;
    padding: 20px !important;
	max-width: 100% !important;
}

.awcp-petform input.input-text, .awcp-petform select, .awcp-petform textarea.input-text {
    padding: 10px;
    border-radius: 10px;
    border: none;
	margin-top: 10px;
}
#awcp-add-pet-form-wrap { display:none; margin-top: 14px; }
/* Fields – single-column */
.woocommerce .woocommerce-MyAccount-content #awcp-add-pet-form input[type=text],
.woocommerce .woocommerce-MyAccount-content #awcp-add-pet-form input[type=number],
.woocommerce .woocommerce-MyAccount-content #awcp-add-pet-form input[type=date],
.woocommerce .woocommerce-MyAccount-content #awcp-add-pet-form textarea,
.woocommerce .woocommerce-MyAccount-content #awcp-add-pet-form select {
  width: 100% !important;
  padding: 10px !important;
  border-radius: 10px !important;
  border: 1px solid #c1cfb5;
  margin-bottom: 12px;
}

/* ===== Buttons ===== */
.awcp-btn, a#awcp-cancel-pet {
  color:#FFFFFF !important;
  border-radius:50px !important;
  background:#c5b38f !important;
  padding:12px 35px !important;
  text-decoration:none;
  display:inline-block;
  cursor:pointer;
  border:none;
}
#awcp-add-pet-form-wrap button.button {
    color:#FFFFFF !important;
  border-radius:50px !important;
  background:#c5b38f !important;
  padding:12px 35px !important;
  text-decoration:none;
  display:inline-block;
  cursor:pointer;
  border:none;
  font-size: 16px;
}
.awcp-btn:hover,
.awcp-btn:focus { background: #54595f !important; color: #fff !important; }

.awcp-btn--ghost {
  background: transparent;
  color: #54595f !important;
  border: 1px solid #54595f;
}
.awcp-btn--ghost:hover { background: #54595f; color:#fff !important; }

/* ===== Accordion ===== */
.awcp-pets-accordion-section {
    border-radius: 8px !important;
    border: none !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.awcp-pets-accordion-header {
    background: #ece8e4 !important;
    padding: 20px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.awcp-pets-accordion-content {
    padding: 30px !important;
    background: #f8f8f7 !important;
}